仿微信表情输入键盘(支持 Gif 表情图文混排 )

转载 2017年12月11日 00:00:00

作者 | PandaQ404

地址 | http://www.jianshu.com/p/fddca2b0a26b

声明 | 本文是 PandaQ404 原创,已获授权发布,未经原作者允许请勿转载



简介

自定义的表情输入键盘在很多应用中都会有用到,譬如微信、QQ 等社交聊天软件中更是不可缺少的部分。本文将解析一下个人的自定义表情输入控件库 PandaEmoView 的实现和使用。


特点

  • 支持 emoji 表情图片

  • 支持 gif 动态表情输入显示

  • 支持单张贴图表情(与微信收藏表情一致)

  • 支持题图表情库的添加删除


效果图


快速使用

引入库

compile 'com.pandaq:PandaEmoView:1.0.0'


表情资源及配置文件

  • 默认的 emoji 和 gif 表情以及他们的配置文件是放在开发包 assets 目录下的,若表情比较多比较大也可自行修改源码在 APP 启动时从服务器下载。



  • emoji 表情配置文件



  • 非自定义 sticker 配置文件(自定义 sticker 是没有配置文件的)



具体使用规则

与表情输入控件相关的 EditText 必须使用 PandaEditText

PandaEditText 只是重写了 onKeyPreIme() 获取按返回键的通知,继承自 EditText 的控件可继承 PandaEditText 自定义


  1. 应用 Application 中进行全局参数配置


private void configPandaEmoView() {
       new PandaEmoManager.Builder()
               .with(getApplicationContext()) // 传递 Context
               .configFileName("emoji.xml")// 配置文件名称
               .emoticonDir("face") // asset 下存放表情的目录路径(asset——> configFileName 之间的路径,结尾不带斜杠)
               .sourceDir("images") // 存放 emoji 表情资源文件夹路径(emoticonDir 图片资源之间的路径,结尾不带斜杠)
               .showAddTab(true)//tab栏是否显示添加按钮
               .showStickers(true)//tab栏是否显示贴图切换按键
               .showSetTab(true)//tab栏是否显示设置按钮
               .defaultBounds(30)//emoji 表情显示出来的宽高
               .cacheSize(1024)//加载资源到内存时 LruCache 缓存大小
               .defaultTabIcon(R.drawable.ic_default)//emoji表情Tab栏图标
               .emojiColumn(7)//单页显示表情的列数
               .emojiRow(3)//单页显示表情的行数
               .stickerRow(2)//单页显示贴图表情的行数
               .stickerColumn(4)//单页显示贴图表情的列数
               .maxCustomStickers(30)//允许添加的收藏表情数
               .imageLoader(new IImageLoader() {
                   @Override
                   public void displayImage(String path, ImageView imageView)
{ // 加载贴图表情的图片加载接口
                       Picasso.with(getApplicationContext())
                               .load(path)
                               .fit()
                               .centerCrop()
                               .into(imageView);
                   }
               })
               .build(); //构建 PandaEmoManager 单利
   }


2.使用此控件的 Activity 在 manifest 文件中配置

// 这句是一定要加上的。
钱柜娱乐开户:windowSoftInputMode="adjustResize"


3.使用此控件的界面 xml 文件规则
布局规则如下图,lockView 即是我们正常显示内容的 View 它与表情输入控件 PandaEmoView 属于同一层级,父布局必须为纵向线性布局,且设置 lockView 权重为 1 ,PandaEmoView 高度包裹内容即可

4.使用控件的 Activity Java 代码设置


//界面控件初始化后 .attachEditText()绑定输入控件
//初始化 KeyBoardManager,PandaEmoView.attachEditText() 必须在后调用


主要使用类及公有方法概览

PandaEmoEditText

  • 表情输入框继承自 EditText 只对 onKeyIme() 进行复写用于监听输入键盘或者软键盘的弹出与关闭

PandaEmoView

  • 表情输入控件 View 继承自 RelativeLayout

PandaEmoManager

  • PandaEmoManager 为核心配置类,表情控件的各种参数都通过此类的构造器进行配置




剩余方法都为属性值的 getter() setter() 不在赘述。


PandaEmoManager.Builder

  • PandaEmoManager 的构造器类,属性及方法都与 PandaEmoManager 一一对应;

KeyBoardManager

  • KeyBoardManager 为输入法软键盘与表情输入控件协调管理类



EmoticonManager

  • EmoticonManager 为 emoji 表情加载管理类,此类提供方法将资源文件根据配置文件加载进内存,方法大多数为私有方法,源码中可查看注释。


StickerManager

  • StickerManager 为 sticker 表情加载管理类,此类提供方法将资源文件根据配置文件加载进内存,与 EmoticonManager 类似


PandaEmoTranslator

  • PandaEmoTranslator 为 emoji 表情 [文字] 转表情的转换工具类



关于内存优化

因为表情,gif 表情,自定义贴图,表情包贴图这些都涉及到图片资源加载到内存中。因此开发过程中不可避免的也遇到了许多的内存优化相关的问题。

工具

就地取材,直接使用 钱柜娱乐开户 Studio 的 Monitors 工具可以直观的查看到应用运行过程中内存的变化过程

优化点1 —— Gif 播放类的优化


  • 问题:

参考网上的 gif 图文混排项目,虽然实现了 gif 与文字的图文混排效果,但存在致命的缺陷。该项目中每一个 gif 动态表情图都有一个对应的 Runable 对象去执行 gif 图片的逐帧播放,当一个表情重复输入也会有新的 Runable 对象去执行这样的操作,这样做的后果就是当输入的表情数量增加时,所消耗的内存是持续增长的。这显然不能满足生产使用的需求。


  • 解决方案:

考虑到此处内存增加的原因是让表情动起来的 Runable 泛滥引起的,因此减少 Runable 的数量就是解决此处内存问题的关键。我的方案做的比较彻底,整个应用 gif 表情这一块儿都交给一个 Runable 去处理,这个 Runable 在 PandaTranslator 中进行图文转化时会被初始化


// PandaTranslator 的 103 - 107 行 
103                   if (mGifRunnable == null) {
104                      mGifRunnable = new GifRunnable(gifDrawable, mHandler);
105                   } else {
106                      mGifRunnable.addGifDrawable(gifDrawable);
107                   }


因为 PandaTranslator 是一个单例实现,所以在他初始化后 mGifRunnable 也将保持唯一性。无论是新建初始化还是 addGifDrawable() 都是把 Gif 表情对象放入 GifRunnable 中的一个 Map 中。Map 的 key value 分别是表情控件依附的 Activity 的 LocalName 和 一个 AnimatedGifDrawable 的 List。在 GifRunnable 的 run 方法中会根据当前的 Activity 的 LocalName 去取出对应的 AnimatedGifDrawable 列表,遍历执行并按第一张 gif 表情的帧间隔去刷新 Drawable 并触发 TextView 刷新回调


@Override
   public void run() {
       isRunning = true;
       if (currentActivity != null) {
           List<AnimatedGifDrawable> runningDrawables = mGifDrawableMap.get(currentActivity);
           if (runningDrawables != null) {
               for (AnimatedGifDrawable gifDrawable : runningDrawables) {
                   AnimatedGifDrawable.RunGifCallBack listener = gifDrawable.getUpdateListener();
                   List<AnimatedGifDrawable.RunGifCallBack> runningListener = listenersMap.get(currentActivity);
                   if (runningListener != null) {
                   // 避免一个 TextView 多个表情时重复添加回调
                       if (!runningListener.contains(listener)) {
                           runningListener.add(listener);
                       }
                   } else {
                       // 为空时肯定不存在直接添加
                       runningListener = new ArrayList<>();
                       runningListener.add(listener);
                       listenersMap.put(currentActivity, runningListener);
                   }
                   gifDrawable.nextFrame();
               }
               for (AnimatedGifDrawable.RunGifCallBack callBack : listenersMap.get(currentActivity)) {
                   if (callBack != null) {
                       callBack.run();
                   }
               }
               frameDuration = runningDrawables.get(0).getFrameDuration();
           }
       }
       mHandler.postDelayed(this, frameDuration);
   }


这样就实现了全局使用一个 Runable 来执行 gif 动起来的任务,不同的界面也仅需要将该界面的 AnimatedGifDrawable 对象加入任务 Map 即可。


优化点2 —— 界面暂停或退出时 Gif 播放资源同步退出回收


上面说到的将 AnimatedGifDrawable 列表加入任务 Map,只进不出显然是不科学的也会持续增加内存的消耗。我们希望在 Activity 退出时能将将当前 Activity 的 AnimatedGifDrawable 列表销毁移除,在界面不可见但是可能会恢复时(pause 状态)暂停 Runable 的执行,减少资源消耗。于是 GifRunable 提供了如下三个方法给外部调用


/**
    * 使用了表情转换的界面退出时调用,停止动态图handler
    */

   public void clearHandler(String activityName) {
       currentActivity = null;
       //清除当前页的数据
       mGifDrawableMap.remove(activityName);
       // 当退出当前Activity后没表情显示时停止 Runable 清除所有动态表情数据
       listenersMap.remove(activityName);
       if (mGifDrawableMap.size() == 0) {
           clearAll();
       }
   }
   private void clearAll() {
       mHandler.removeCallbacks(this);
       mHandler.removeCallbacksAndMessages(null);
       mGifDrawableMap.clear();
       isRunning = false;
   }
   /**
    * 启动运行
    */

   public void startHandler(String activityName) {
       currentActivity = activityName;
       if (mGifDrawableMap != null && mGifDrawableMap.size() > 0 && !isRunning) {
           run();
       }
   }


它的调用入口都在 PandaTranslator 中,然后我们只需在使用到 PandaEmoView 或者直接在 BaseActivity 的 onResume(),onPause(),onDestory() 中分别调用以下三个方法:


PandaTranslator.getInstance().resumeGif(activityLocalName);
PandaTranslator.getInstance().pauseGif();
PandaTranslator.getInstance().clearGif(activityLocalName)


优化点3 —— 使用 LruCache 缓存 emoji 资源


根据 LRU 规则将表情 Gif 缓存,避免重复加载创建新对象。

最后

因为离职从南京回到成都还有工作的各种各样的原因,也是有四个多月没更博客了。这是重新开始写博客的第一篇,之后大概会以一个月 2-3 篇的样子更新,记录与分享,欢迎大家关注我的简书。

本库地址 https://github.com/PandaQAQ/PandaEmoView

欢迎 star 和提 issue


开源库

 推荐几个开源库



gif表情键盘、图文混排富文本

  • 2017年11月10日 13:44
  • 4.09MB
  • 下载

如丝般顺滑的微信朋友圈(点赞,评论,图文混排表情,点击文字链接等)

  • 2016年05月26日 02:03
  • 9.86MB
  • 下载

Textview显示gif表情图,图文混排形式

  • 2016年11月07日 16:52
  • 24.37MB
  • 下载

Swift3.0 功能二 (表情键盘与图文混排)

随着iOS越来越多表情键盘以及图文混排的需求,本文系统的实现其功能以及封装小功能,感谢相关作者的宝贵资料,写的不好,如有错误望各位提出宝贵意见,多谢项目源码地址:相关知识点都有标识项目源码地址 废...
  • IOS_Qing
  • IOS_Qing
  • 2016年10月20日 00:01
  • 1818

ios 图文混排 (支持显示文字和表情)

#import "KitchenShowFaces.h" #define BEGIN_FLAG @"{" #define END_FLAG @"}" @implementation Kitchen...
  • mad2man
  • mad2man
  • 2013年11月06日 14:56
  • 13684

图文混排的实践+输入式动态插入表情

暑假快要结束了,这个暑假献给
  • FlareMars_Ray
  • FlareMars_Ray
  • 2014年08月25日 11:43
  • 268

聊天窗口演示(XML+GDI表情管理、图文混排...)

  • 2011年05月16日 14:15
  • 2.54MB
  • 下载

AS3聊天表情即图文混排

  • 2010年10月22日 00:45
  • 1KB
  • 下载

EditText显示表情,图文混排

  • 2016年07月29日 20:36
  • 10.11MB
  • 下载

Flex: flash聊天框 表情+文字 图文混排 (思路)

PS:具体实现代码
  • huanghr_1
  • huanghr_1
  • 2011年05月15日 20:36
  • 2260
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:仿微信表情输入键盘(支持 Gif 表情图文混排 )
举报原因:
原因补充:

(最多只允许输入30个字)