表情鍵盤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

添加以下代碼到項(xiàng)目的build.gradle里:

allprojects {
    repositories {
        jcenter()
        maven { url "https://jitpack.io" }
    }
}

加上以下依賴

dependencies {
    compile 'com.codebear.keyboard:emoticons-keyboard:1.0.2'
}

庫中需要解壓表情包偎肃，需要用到存儲(chǔ)權(quán)限，所以在項(xiàng)目的AndroidManifest.xml中還需要加入以下權(quán)限(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, "快捷回復(fù)"));
    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, "快捷回復(fù)"));
    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跟表情鍵盤分開來抛虫，可以實(shí)現(xiàn)自定義的視圖

通過調(diào)用以下方法可以設(shè)置顯示表情包的view

 setEmoticonFuncView(IEmoticonsView emoticonView)

IEmoticonsView是表情包view統(tǒng)一的接口

 public interface IEmoticonsView {
     /**
      * 獲取view視圖
      */
     View getView();
     /**
      * 通知view被打開了(即要顯示出來)
      */
     void openView();
 }

通過調(diào)用以下方法可以設(shè)置顯示app功能的biew
```
 setAppFuncView(View appFuncView)
```

該庫提供了默認(rèn)的表情包view:CBEmoticonsView和默認(rèn)的app功能的view:CBAppFuncView

1. CBEmoticonsView的使用

   //初始化CBEmoticonsView
   CBEmoticonsView cbEmoticonsView = new CBEmoticonsView(this);
   //內(nèi)部使用了FragmentStatePagerAdapter西乖，所以需要傳入FragmentManager
   cbEmoticonsView.init(getSupportFragmentManager());
   //為keyboard添加顯示表情包的view
   cbEmoticonsKeyBoard.setEmoticonFuncView(cbEmoticonsView);

   //添加表情包數(shù)據(jù)
   //通過表情包的名字
   //default是本庫提供的默認(rèn)的emoji表情
   //其他的需要自行添加在項(xiàng)目的assets->emoticon目錄下狐榔，并且命名為xxx.zip
   //以下傳入的名稱就是xxx
   cbEmoticonsView.addEmoticonsWithName(new String[]{"default", "ali1", "ali2", "ali3","sibi","jinguanzhang"});
   //添加表情的點(diǎn)擊事件
   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 添加表情包的方式

表情包放在項(xiàng)目的assets->emoticon目錄下，以ali1表情包為例：
新建文件夾ali1获雕，在文件夾ali1下新建文件夾命名為2968(表示ali1表情包的id薄腻，可以根據(jù)需要改別的),2968這個(gè)文件夾下就放表情包圖片，可以是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 下各參數(shù)介紹：

id : 表情包的id
name : 表情包名稱
iconUri : 表情包tab顯示的圖標(biāo)
iconType : 圖標(biāo)的格式
showName : 表情包是否顯示名稱(0表示不顯示球碉，1表示顯示)
bigEmoticon : 是否是大表情(0表示不顯示，1表示顯示)
rol : 表情包顯示的列數(shù)
row : 表情包顯示的行數(shù)
showDel : 是否顯示刪除鍵(0表示不顯示仓蛆，1表示顯示)

Emoticon 下各參數(shù)介紹：

id : 表情的id
name : 表情名稱
iconUri : 表情圖標(biāo)
iconType : 圖標(biāo)的格式

2. CBAppFuncView的使用

   //初始化CBAppFuncView
   CBAppFuncView cbAppFuncView = new CBAppFuncView(this);
   //為keyboard添加顯示顯示app功能的view
   cbEmoticonsKeyBoard.setAppFuncView(cbAppFuncView);
   //添加數(shù)據(jù)
   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, "快捷回復(fù)"));
   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, "快捷回復(fù)"));
   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有兩個(gè)變量豆拨，分別是顯示的圖標(biāo)跟名稱