如何在Android中使用emojicon库集成表情符号, 妈妈在也不用担心我的表情了～～～

如何在Android中使用emojicon库集成表情符号

 最全最专业的emojicon库教程。

在本教程中，我们将学习如何通过一个简单的示例在Android应用程序中使用emojicon库集成  表情符号。

 

步骤1

 

内容目录

1简介
2创建一个新项目
3添加支持库
4创建布局
5初始化EmojiconEditText和EmojiconTextView
6实现Emojicons单击Listener和Emojicons Back Space单击Listener
7添加文本更改侦听器
8在Fragment中设置表情符号
9最终代码 

介绍

表情符号是键盘字符和符号的组合，表示面部表情，例如微笑或皱眉。在本教程中，我们将学习如何使用Android应用程序中的emojicon库集成表情符号。

 

创建一个新项目

在Android Studio中创建一个新项目，转到文件⇒新建⇒新项目。

 

添加支持库

要集成表情符号，我们需要在项目中添加Emojicons库。因此，打开build.gradle文件并添加emojicons库作为依赖项。

dependencies {
  ....
    compile 'com.rockerhieu.emojicon:library:1.3.3'
  ....
}

  

创建布局

我们将在FrameLayout中添加表情符号。如果用户单击表情符号，它会在EditText中显示图标，并在TextView上显示EditText的输入。因此，我们需要在activity.xml文件中使用EmojiconEditText和EmojiconTextView元素。

1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 32 33 34 35 36 37 38

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     xmlns:emojicon="http://schemas.android.com/apk/res-auto"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     tools:context="app.androidsmiles.MainActivity">       <com.rockerhieu.emojicon.EmojiconTextView         android:id="@+id/txtEmojicon"         emojicon:emojiconAlignment="baseline"         android:layout_width="match_parent"         android:layout_height="wrap_content" />       <com.rockerhieu.emojicon.EmojiconEditText         android:id="@+id/editEmojicon"         android:hint="Type emoji here"         emojicon:emojiconSize="28sp"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_below="@+id/txtEmojicon"         android:layout_alignParentRight="true"         android:layout_alignParentEnd="true" />       <FrameLayout         android:id="@+id/emojicons"         android:layout_width="match_parent"         android:layout_height="fill_parent"         android:layout_below="@+id/editEmojicon"         android:layout_alignParentRight="true"         android:layout_alignParentEnd="true"         android:layout_marginTop="38dp" />   </RelativeLayout>

 

第5步

 

初始化EmojiconEditText和EmojiconTextView

要使用EmojiconEditText和EmojiconTextVew的属性，我们需要在onCreate（）方法中初始化EmojiconEditText和EmojiconTextVew。

1 2 3 4 五 6 7 8 9 10 11 12 13 14 15

public class MainActivity extends AppCompatActivity {       EmojiconEditText mEditEmojicon;     EmojiconTextView mTxtEmojicon;       @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);           // initialize EmojicobEditText and EmojiconTextView.         mEditEmojicon = (EmojiconEditText) findViewById(R.id.editEmojicon);         mTxtEmojicon = (EmojiconTextView) findViewById(R.id.txtEmojicon);     } }

 

第6步

 

实现Emojicons单击Listener和Emojicons Back Space单击Listener

我们将在MainActivity.java文件中实现点击监听器和后退空间单击Emojicons的监听器，以在EditText中添加和删除图标。这些监听器提供onEmojiconClicked（），onEmojiconBackspaceClicked（）方法来处理表情符号。

1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 32 33 34 35 36

public class MainActivity extends AppCompatActivity implements EmojiconGridFragment.OnEmojiconClickedListener,         EmojiconsFragment.OnEmojiconBackspaceClickedListener {       EmojiconEditText mEditEmojicon;     EmojiconTextView mTxtEmojicon;       @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);           // initialize EmojicobEditText and EmojiconTextView.         mEditEmojicon = (EmojiconEditText) findViewById(R.id.editEmojicon);         mTxtEmojicon = (EmojiconTextView) findViewById(R.id.txtEmojicon);     }       /**      * It called, when click on icon of Emoticons.      * @param emojicon      */     @Override     public void onEmojiconClicked(Emojicon emojicon) {           EmojiconsFragment.input(mEditEmojicon, emojicon);     }       /**      * It called, when click on backspace button of Emoticons.      * @param view      */     @Override     public void onEmojiconBackspaceClicked(View view) {           EmojiconsFragment.backspace(mEditEmojicon);     } }

 

第7步

 

添加文本更改侦听器

我们需要从EditText中收听文本更改。我们将调用addTextChangedListener（）方法并传递TextWatcher对象。TextWatcher对象需要添加beforeTextChanged（），afterTextChanged（）和onTextChanged（）来侦听EditText中的文本更改。

1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 32 33 34

mEditEmojicon.addTextChangedListener(new TextWatcher() {               /**              * This notify that, within s,              * the count characters beginning at start are about to be replaced by new text with length              * @param s              * @param start              * @param count              * @param after              */             @Override             public void beforeTextChanged(CharSequence s, int start, int count, int after) {}               /**              * This notify that, somewhere within s, the text has been changed.              * @param s              */             @Override             public void afterTextChanged(Editable s) {}               /**              * This notify that, within s, the count characters beginning at start have just              * replaced old text that had length              * @param s              * @param start              * @param before              * @param count              */             @Override             public void onTextChanged(CharSequence s, int start, int before, int count) {                 // Set text on TextView                 mTxtEmojicon.setText(s);             }         });

 

第8步

 

在Fragment中设置表情符号

现在，我们需要通过调用getSupportFragmentManager（）方法在片段中设置表情符号。此方法返回FragmentManager以与与此活动关联的EmojiconsFragment进行交互  。

1 2 3 4 五 6 7 8 9 10 11

/**  * Set the Emoticons in Fragment.  * @param useSystemDefault  */  private void setEmojiconFragment(boolean useSystemDefault) {        getSupportFragmentManager()              .beginTransaction()              .replace(R.id.emojicons, EmojiconsFragment.newInstance(useSystemDefault))              .commit();  }

 

第9步

 

最终代码

这是最终的代码：

1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

public class MainActivity extends AppCompatActivity implements EmojiconGridFragment.OnEmojiconClickedListener,         EmojiconsFragment.OnEmojiconBackspaceClickedListener {       EmojiconEditText mEditEmojicon;     EmojiconTextView mTxtEmojicon;       @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);           // initialize EmojicobEditText and EmojiconTextView.         mEditEmojicon = (EmojiconEditText) findViewById(R.id.editEmojicon);         mTxtEmojicon = (EmojiconTextView) findViewById(R.id.txtEmojicon);           mEditEmojicon.addTextChangedListener(new TextWatcher() {               /**              * This notify that, within s,              * the count characters beginning at start are about to be replaced by new text with length              * @param s              * @param start              * @param count              * @param after              */             @Override             public void beforeTextChanged(CharSequence s, int start, int count, int after) {}               /**              * This notify that, somewhere within s, the text has been changed.              * @param s              */             @Override             public void afterTextChanged(Editable s) {}               /**              * This notify that, within s, the count characters beginning at start have just              * replaced old text that had length              * @param s              * @param start              * @param before              * @param count              */             @Override             public void onTextChanged(CharSequence s, int start, int before, int count) {                   mTxtEmojicon.setText(s);             }         });           setEmojiconFragment(false);       }       /**      * Set the Emoticons in Fragment.      * @param useSystemDefault      */     private void setEmojiconFragment(boolean useSystemDefault) {           getSupportFragmentManager()                 .beginTransaction()                 .replace(R.id.emojicons, EmojiconsFragment.newInstance(useSystemDefault))                 .commit();     }       /**      * It called, when click on icon of Emoticons.      * @param emojicon      */     @Override     public void onEmojiconClicked(Emojicon emojicon) {           EmojiconsFragment.input(mEditEmojicon, emojicon);     }       /**      * It called, when backspace button of Emoticons pressed      * @param view      */     @Override     public void onEmojiconBackspaceClicked(View view) {           EmojiconsFragment.backspace(mEditEmojicon);     } }