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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容