Android 如何簡單集成 Emoji 鍵盤

01-27

簡評：使用一個庫，簡單的幾個步驟，就能為你的 Android 應用集成好 Emoji 鍵盤啦。

現在 Emoji 已經快成了世界通用語言，各種聊天應用也都紛紛支持起了 Emoji。今天這裡就介紹下如何簡簡單單就集成 Emoji 鍵盤。

首先我們使用 SuperNova-Emoji 這個庫。

使用 hani.momanii.supernova_emoji_library.Helper.EmojiconEditText 而不是 EditText 作為輸入框：

<hani.momanii.supernova_emoji_library.Helper.EmojiconEditTextn android:id="@+id/emojicon_edit_text"n android:layout_width_="match_parent"n android:layout_height="wrap_content"n emojicon:emojiconSize="28sp" />n

用 EmojiconTextView 來展示消息：

<hani.momanii.supernova_emoji_library.Helper.EmojiconTextViewn android:id="@+id/emojicon_text_view"n android:layout_width_="wrap_content"n android:layout_height="wrap_content"n emojicon:emojiconSize="28sp"/>??n

修改調出 emoji 鍵盤的按鈕圖標：

rootView = findViewById(R.id.root_view);nemojiconEditText = (EmojiconEditText) findViewById(R.id.emojicon_edit_text);ntextView = (EmojiconTextView) findViewById(R.id.textView);nemojiIcon = new EmojIconActions(this, rootView, emojiconEditText, emojiImageView);nemojiIcon.ShowEmojIcon();nemojiIcon.setIconsIds(R.drawable.ic_action_keyboard,R.drawable.smiley);n

還能根據應用的配色來自定義顏色：

?EmojIconActions emojIcon= new EmojIconActions(this, rootView, emojiconEditText, emojiImageView,n"#F44336","#e8e8e8","#f4f4f4");n n?emojIcon.ShowEmojIcon();?n

完整的示例代碼：

<?xml version="1.0" encoding="utf-8"?>n<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"n xmlns:emojicon="http://schemas.android.com/apk/res-auto"n xmlns:tools="http://schemas.android.com/tools"n android:id="@+id/root_view"n android:layout_width_="match_parent"n android:layout_height="match_parent"n android:paddingBottom="@dimen/activity_vertical_margin"n android:paddingLeft="@dimen/activity_horizontal_margin"n android:paddingRight="@dimen/activity_horizontal_margin"n android:paddingTop="@dimen/activity_vertical_margin"n tools:context="info.androidhive.emojis.MainActivity">n n <ImageViewn android:id="@+id/emoji_btn"n android:layout_width_="40dp"n android:layout_height="40dp"n android:layout_alignParentBottom="true"n android:layout_alignParentLeft="true"n android:padding="4dp"n android:src="@drawable/ic_insert_emoticon_black_24dp" />n n <ImageViewn android:id="@+id/submit_btn"n android:layout_width_="40dp"n android:layout_height="40dp"n android:layout_alignParentBottom="true"n android:layout_alignParentRight="true"n android:padding="4dp"n android:src="@android:drawable/ic_menu_send" />n n <hani.momanii.supernova_emoji_library.Helper.EmojiconEditTextn android:id="@+id/emojicon_edit_text"n android:layout_width_="match_parent"n android:layout_height="wrap_content"n android:layout_alignParentBottom="true"n android:layout_toLeftOf="@id/submit_btn"n android:layout_toRightOf="@id/emoji_btn"n emojicon:emojiconSize="28sp" />n n n <CheckBoxn android:id="@+id/use_system_default"n android:layout_width_="wrap_content"n android:layout_height="wrap_content"n android:layout_below="@+id/textView"n android:layout_centerHorizontal="true"n android:checked="false"n android:text="Use System Default?" />n n <hani.momanii.supernova_emoji_library.Helper.EmojiconTextViewn android:id="@+id/textView"n android:layout_width_="wrap_content"n android:layout_height="wrap_content"n android:layout_centerHorizontal="true"n android:layout_centerVertical="true"n android:layout_marginTop="26dp"n android:text="Hello Emojis!"n android:textAppearance="@style/TextAppearance.AppCompat.Large"n android:textColor="#000000"n emojicon:emojiconSize="45sp"n emojicon:emojiconUseSystemDefault="true" />n</RelativeLayout>n

public class MainActivity extends AppCompatActivity {n n private static final String TAG = MainActivity.class.getSimpleName();nn CheckBox mCheckBox;n EmojiconEditText emojiconEditText;n EmojiconTextView textView;n ImageView emojiImageView;n ImageView submitButton;n View rootView;n EmojIconActions emojIcon;n n @Overriden protected void onCreate(Bundle savedInstanceState) {n super.onCreate(savedInstanceState);n setContentView(R.layout.activity_main);n rootView = findViewById(R.id.root_view);n emojiImageView = (ImageView) findViewById(R.id.emoji_btn);n submitButton = (ImageView) findViewById(R.id.submit_btn);n mCheckBox = (CheckBox) findViewById(R.id.use_system_default);n emojiconEditText = (EmojiconEditText) findViewById(R.id.emojicon_edit_text);n textView = (EmojiconTextView) findViewById(R.id.textView);n emojIcon = new EmojIconActions(this, rootView, emojiconEditText, emojiImageView);n emojIcon.ShowEmojIcon();n emojIcon.setIconsIds(R.drawable.ic_action_keyboard, R.drawable.smiley);n emojIcon.setKeyboardListener(new EmojIconActions.KeyboardListener() {n @Overriden public void onKeyboardOpen() {n Log.e(TAG, "Keyboard opened!");n }n n @Overriden public void onKeyboardClose() {n Log.e(TAG, "Keyboard closed");n }n });n n mCheckBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {n @Overriden public void onCheckedChanged(CompoundButton compoundButton, boolean b) {n emojIcon.setUseSystemEmoji(b);n textView.setUseSystemDefault(b);n n }n });n n n submitButton.setOnClickListener(new View.OnClickListener() {n @Overriden public void onClick(View v) {n String newText = emojiconEditText.getText().toString();n textView.setText(newText);n }n });n }n}n

運行效果：

原文：Android How to Integrate Emojis Keyboard in your App

擴展閱讀：

聊聊 Android StateListAnimator

歡迎關註：知乎專欄「極光日報」，每天為 Makers 導讀三篇優質英文文章。