表情键盘CBEmotionsKeyBoard

github地址：https://github.com/smileysx/CBEmotionsKeyBoard

说明

该库是基于w446108264提供的开源表情键盘解决方案XhsEmoticonsKeyboard修改的

screen

1.png
2.png
3.png
4.png
5.png
6.png
7.png

gif

showGif.gif

Gradle

  • 添加以下代码到项目的build.gradle里:
allprojects {
    repositories {
        jcenter()
        maven { url "https://jitpack.io" }
    }
}
  • 加上以下依赖
dependencies {
    compile 'com.codebear.keyboard:emoticons-keyboard:1.0.2'
}
  • 库中需要解压表情包，需要用到存储权限，所以在项目的AndroidManifest.xml中还需要加入以下权限(6.0以上需要申请)
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

使用

<?xml version="1.0" encoding="utf-8"?>
<com.codebear.keyboard.CBEmoticonsKeyBoard
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ekb_emoticons_keyboard"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/rcv_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </LinearLayout>

</com.codebear.keyboard.CBEmoticonsKeyBoard>

activity

private void initRecycleView() {
    rcvContent = (RecyclerView) findViewById(R.id.rcv_content);
    rcvContent.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));

    rcvContent.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View view, MotionEvent motionEvent) {
            if (null != cbEmoticonsKeyBoard) {
                cbEmoticonsKeyBoard.reset();
            }
            return false;
        }
       });
}

private void initKeyBoard() {
    cbEmoticonsKeyBoard = (CBEmoticonsKeyBoard) findViewById(R.id.ekb_emoticons_keyboard);

    cbEmoticonsKeyBoard.addOnFuncKeyBoardListener(new FuncLayout.OnFuncKeyBoardListener() {
        @Override
        public void OnFuncPop(int height) {

        }

        @Override
        public void OnFuncClose() {

        }
    });

    cbEmoticonsKeyBoard.getBtnVoice().setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View view, MotionEvent motionEvent) {
            return false;
        }
    });

    cbEmoticonsKeyBoard.getBtnSend().setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            cbEmoticonsKeyBoard.getEtChat().setText("");
        }
    });
}

private void initEmoticonsView() {
    CBEmoticonsView cbEmoticonsView = new CBEmoticonsView(this);
    cbEmoticonsView.init(getSupportFragmentManager());
    cbEmoticonsKeyBoard.setEmoticonFuncView(cbEmoticonsView);

    cbEmoticonsView.addEmoticonsWithName(new String[]{"default", "ali1", "ali2", "ali3", "sibi", "jinguanzhang"});

    cbEmoticonsView.setOnEmoticonClickListener(new CBEmoticonsView.OnEmoticonClickListener() {
        @Override
        public void onEmoticonClick(EmoticonsBean emoticon, boolean isDel) {
            if (isDel) {
                Log.i("onEmoticonClick", "delete");
                cbEmoticonsKeyBoard.delClick();
            } else {
                if ("default".equals(emoticon.getParentTag())) {
                    String content = emoticon.getName();
                    if (TextUtils.isEmpty(content)) {
                        return;
                    }
                    int index = cbEmoticonsKeyBoard.getEtChat().getSelectionStart();
                    Editable editable = cbEmoticonsKeyBoard.getEtChat().getText();
                    editable.insert(index, content);
                } else {
                    String text = "bigEmoticon : " + " - [" + emoticon.getName() + "] - " + emoticon.getParentId() + " - " + emoticon.getId() + "." + emoticon.getIconType();
                    Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
                    Log.i("onEmoticonClick", text);
                }

            }
        }
    });
}

private void initAppFuncView() {
    CBAppFuncView cbAppFuncView = new CBAppFuncView(this);
    cbEmoticonsKeyBoard.setAppFuncView(cbAppFuncView);
    List<AppFuncBean> appFuncBeanList = new ArrayList<>();
    appFuncBeanList.add(new AppFuncBean(R.mipmap.ic_chat_photo, "图片"));
    appFuncBeanList.add(new AppFuncBean(R.mipmap.ic_chat_ptjob, "兼职"));
    appFuncBeanList.add(new AppFuncBean(R.mipmap.ic_chat_reply, "快捷回复"));
    appFuncBeanList.add(new AppFuncBean(R.mipmap.ic_location, "定位"));
    appFuncBeanList.add(new AppFuncBean(R.mipmap.ic_chat_photo, "图片"));
    appFuncBeanList.add(new AppFuncBean(R.mipmap.ic_chat_ptjob, "兼职"));
    appFuncBeanList.add(new AppFuncBean(R.mipmap.ic_chat_reply, "快捷回复"));
    appFuncBeanList.add(new AppFuncBean(R.mipmap.ic_location, "定位"));
    cbAppFuncView.setAppFuncBeanList(appFuncBeanList);
    cbAppFuncView.setOnAppFuncClickListener(new CBAppFuncView.OnAppFuncClickListener() {
        @Override
        public void onAppFunClick(AppFuncBean emoticon) {
            String text = emoticon.getTitle();
            Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
            Log.i("onAppFunClick", text);
        }
    });
}

其他

  • 该库把显示表情包的view跟显示功能view跟表情键盘分开来，可以实现自定义的视图

  1. 通过调用以下方法可以设置显示表情包的view

     setEmoticonFuncView(IEmoticonsView emoticonView)

    IEmoticonsView是表情包view统一的接口

     public interface IEmoticonsView {
     /**
      * 获取view视图
      */
     View getView();
     /**
      * 通知view被打开了(即要显示出来)
      */
     void openView();
 }

  2. 通过调用以下方法可以设置显示app功能的biew

     setAppFuncView(View appFuncView)
  • 该库提供了默认的表情包view:CBEmoticonsView和默认的app功能的view:CBAppFuncView

1. CBEmoticonsView的使用

   //初始化CBEmoticonsView
   CBEmoticonsView cbEmoticonsView = new CBEmoticonsView(this);
   //内部使用了FragmentStatePagerAdapter，所以需要传入FragmentManager
   cbEmoticonsView.init(getSupportFragmentManager());
   //为keyboard添加显示表情包的view
   cbEmoticonsKeyBoard.setEmoticonFuncView(cbEmoticonsView);

   //添加表情包数据
   //通过表情包的名字
   //default是本库提供的默认的emoji表情
   //其他的需要自行添加在项目的assets->emoticon目录下，并且命名为xxx.zip
   //以下传入的名称就是xxx
   cbEmoticonsView.addEmoticonsWithName(new String[]{"default", "ali1", "ali2", "ali3","sibi","jinguanzhang"});
   //添加表情的点击事件
   cbEmoticonsView.setOnEmoticonClickListener(new CBEmoticonsView.OnEmoticonClickListener() {
       @Override
       public void onEmoticonClick(EmoticonsBean emoticon, boolean isDel) {
           if (isDel) {
               Log.i("onEmoticonClick", "delete");
               cbEmoticonsKeyBoard.delClick();
           } else {
               if ("default".equals(emoticon.getParentTag())) {
                   String content = emoticon.getName();
                   if (TextUtils.isEmpty(content)) {
                       return;
                   }
                   int index = cbEmoticonsKeyBoard.getEtChat().getSelectionStart();
                   Editable editable = cbEmoticonsKeyBoard.getEtChat().getText();
                   editable.insert(index, content);
               } else {
               String text = "bigEmoticon : " + " - [" + emoticon.getName() + "] - " + emoticon.getParentId() + " - " + emoticon.getId() + "." + emoticon.getIconType();
               Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
               Log.i("onEmoticonClick", text);
           }
       }
   }
1.1 添加表情包的方式

表情包放在项目的assets->emoticon目录下，以ali1表情包为例：
新建文件夹ali1，在文件夹ali1下新建文件夹命名为2968(表示ali1表情包的id，可以根据需要改别的),2968这个文件夹下就放表情包图片，可以是gif、png、jpg等，在ali1目录下新建ali1.xml(命名一定要跟文件夹一致，这里为ali1)，然后编写ali1.xml表情包配置文件，可以参考app例子

<EmoticonSet>
   <id>2968</id>
   <name>阿狸1</name>
   <iconUri>01.gif</iconUri>
   <iconType>gif</iconType>
   <showName>0</showName>
   <bigEmoticon>1</bigEmoticon>
   <rol>4</rol>
   <row>2</row>
   <showDel>0</showDel>
   <Emoticon>
       <id>01</id>
       <iconUri>01.gif</iconUri>
       <iconType>gif</iconType>
   </Emoticon>
   <Emoticon>
       <id>02</id>
       <iconUri>02.gif</iconUri>
       <iconType>gif</iconType>
   </Emoticon>
<EmoticonSet>
EmoticonSet 下各参数介绍：
  • id : 表情包的id
  • name : 表情包名称
  • iconUri : 表情包tab显示的图标
  • iconType : 图标的格式
  • showName : 表情包是否显示名称(0表示不显示，1表示显示)
  • bigEmoticon : 是否是大表情(0表示不显示，1表示显示)
  • rol : 表情包显示的列数
  • row : 表情包显示的行数
  • showDel : 是否显示删除键(0表示不显示，1表示显示)
Emoticon 下各参数介绍：
  • id : 表情的id
  • name : 表情名称
  • iconUri : 表情图标
  • iconType : 图标的格式

2. CBAppFuncView的使用

   //初始化CBAppFuncView
   CBAppFuncView cbAppFuncView = new CBAppFuncView(this);
   //为keyboard添加显示显示app功能的view
   cbEmoticonsKeyBoard.setAppFuncView(cbAppFuncView);
   //添加数据
   List<AppFuncBean> appFuncBeanList = new ArrayList<>();
   appFuncBeanList.add(new AppFuncBean(R.mipmap.ic_chat_photo, "图片"));
   appFuncBeanList.add(new AppFuncBean(R.mipmap.ic_chat_ptjob, "兼职"));
   appFuncBeanList.add(new AppFuncBean(R.mipmap.ic_chat_reply, "快捷回复"));
   appFuncBeanList.add(new AppFuncBean(R.mipmap.ic_location, "定位"));
   appFuncBeanList.add(new AppFuncBean(R.mipmap.ic_chat_photo, "图片"));
   appFuncBeanList.add(new AppFuncBean(R.mipmap.ic_chat_ptjob, "兼职"));
   appFuncBeanList.add(new AppFuncBean(R.mipmap.ic_chat_reply, "快捷回复"));
   appFuncBeanList.add(new AppFuncBean(R.mipmap.ic_location, "定位"));
   cbAppFuncView.setAppFuncBeanList(appFuncBeanList);
   cbAppFuncView.setOnAppFuncClickListener(new CBAppFuncView.OnAppFuncClickListener() {
       @Override
       public void onAppFunClick(AppFuncBean emoticon) {
           String text = emoticon.getTitle();
           Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
           Log.i("onAppFunClick", text);
       }
   });

相对表情包显示，CBAppFuncView使用比较简单，只需要初始化并传入AppFuncBean列表即可，AppFuncBean有两个变量，分别是显示的图标跟名称

github地址：https://github.com/smileysx/CBEmotionsKeyBoard

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,968评论 6赞 482
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,601评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,220评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,416评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,425评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,144评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,432评论 3赞 401
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,088评论 0赞 261
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,586评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,783评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,343评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2赞 345

推荐阅读更多精彩内容