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跟表情鍵盤分開來,可以實現自定義的視圖
-
通過調用以下方法可以設置顯示表情包的view
setEmoticonFuncView(IEmoticonsView emoticonView)
IEmoticonsView是表情包view統一的接口
public interface IEmoticonsView { /** * 獲取view視圖 */ View getView(); /** * 通知view被打開了(即要顯示出來) */ void openView(); }
-
通過調用以下方法可以設置顯示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有兩個變量,分別是顯示的圖標跟名稱