原文鏈接：http://www.itwendao.com/article/detail/53941.html

什么是emoji表情

emoji表情是一種表情符號，在代碼中它現(xiàn)在其實是一組遵循Unicode的編碼，即每一個表情符號都對應(yīng)了一個Unicode編碼。更進一步說，emoji表情實際上是一組Unicode編碼與一組表情描述之間的對應(yīng)。注意，這里所說的不是表情圖片，而是表情描述。那么圖片的實現(xiàn)是由誰來負責的呢？圖片是由各個系統(tǒng)或者軟件針對統(tǒng)一的表情描述來各自實現(xiàn)的，他們都遵循統(tǒng)一的Unicode編碼規(guī)范。也就是說Unicode編碼其所對應(yīng)的表情描述是統(tǒng)一的，是所有人都要共同遵守的一套標準或者規(guī)范，而具體的表情圖片則可能因平臺的不同而產(chǎn)生差異。

首先你得先從網(wǎng)上收集一套emoji的Unicode編碼,例如這個網(wǎng)站Emoji Unicode Tables
該網(wǎng)站上面給出了每個emoji表情的圖片,描述,Unicode編碼的對照表,點擊表中每一項emoji可看到如下所示:
這里寫圖片描述
紅色框框就是我們要的值.在java中的Unicode表示就是:”\ud83d\ude01”,該編碼字符可以直接被Android的TextView和EditText控件識別成對應(yīng)的emoji表情.
本次demo中展示了從 “\ud83d\ude00” - “\ud83c\udf7c”這216個emoji表情.
效果圖如下:
這里寫圖片描述

關(guān)于emoji編碼的存放和獲取

由于有216個emoji編碼字符串,因此我把它整理到一個json數(shù)組中,然后保存到assets目錄下.
然后獲取的話,通過如下代碼方式獲取:

/** * 從assets目錄下獲取所有表情 * * @return */ public String[] getEmojis() {BufferedReader br = null;String emojis[] = null;try {InputStream is = mContext.getAssets().open("emoji.json");StringBuffer sb = new StringBuffer();br = new BufferedReader(new InputStreamReader(is));String line = null;while (null != (line = br.readLine())) {sb.append(line).append("\r\n");}JSONArray emojiArray = new JSONArray(sb.toString());if (null != emojiArray && emojiArray.length() > 0) {emojis = new String[emojiArray.length()];for (int i = 0; i < emojiArray.length(); i++) {emojis[i] = emojiArray.optString(i);}}} catch (Exception e) {e.printStackTrace();} finally {if (null != br) {try {br.close();} catch (IOException e) {e.printStackTrace();}}}return emojis; }

表情組設(shè)計

通過上面的效果圖也可以看得出,216個emoji表情被分成了8組,每組27個emoji+1個刪除按鈕.
實現(xiàn)這個效果也很簡單,就是通過ViewPager來展示每一組emoji,而每一組emoji里面又是一個GridView控件,里面的item就是一個個的TextView.
每一組emoji頁面的創(chuàng)建代碼如下:

/** * 獲取所有表情GridView頁面的集合 * * @return */ public List<View> getPagerList() {List<View> pagers = null;String[] eachPageEmojis = null;if (null != mEmojis && mEmojis.length > 0) {pagers = new ArrayList<>();int pageCount = mEmojis.length / 27;//共8頁表情for (int i = 0; i < pageCount; i++) {GridView gridView = new GridView(mContext);gridView.setNumColumns(7);gridView.setSelector(new ColorDrawable(Color.TRANSPARENT));gridView.setCacheColorHint(Color.TRANSPARENT);gridView.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);gridView.setGravity(Gravity.CENTER);eachPageEmojis = new String[28];//總共216個表情字符,索引變化為:0-26,27-53,54-80,81-107,108-134,135-161,162-188,189-215System.arraycopy(mEmojis, i * 27, eachPageEmojis, 0, 27);eachPageEmojis[27] = "del";//第28是刪除按鈕,用特殊字符串表示gridView.setAdapter(new EmojiGvAdapter(mContext, eachPageEmojis));//點擊表情監(jiān)聽gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {//獲取選中的表情字符String emoji = (String) parent.getAdapter().getItem(position);if (null != mEmojiClickListener) {mEmojiClickListener.onClick(emoji);}}});pagers.add(gridView);}}return pagers; }

MainActivity的布局和代碼

主布局是一個垂直的線性布局,大體分2部分,表情面板和上面的視圖界面

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" ><!--顯示表情的TextView--><TextView android:id="@+id/tv_info" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:padding="15dp" /><!--表情,輸入框,發(fā)送--><LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"><Button android:id="@+id/btn_emoji" android:layout_width="55dp" android:layout_height="wrap_content" android:text="表情"/><EditText android:id="@+id/edt_msg" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"/><Button android:id="@+id/btn_send" android:layout_width="55dp" android:layout_height="wrap_content" android:text="發(fā)送"/></LinearLayout><!--表情面板--><FrameLayout android:id="@+id/fl_emoji" android:layout_width="match_parent" android:layout_height="wrap_content" android:visibility="gone" ><android.support.v4.view.ViewPager android:id="@+id/vp_emoji" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="10dp" /><LinearLayout android:id="@+id/ll_point" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_marginBottom="10dp" android:gravity="center" android:orientation="horizontal"></LinearLayout></FrameLayout> </LinearLayout>

MainActivity代碼如下:

public class MainActivity extends AppCompatActivity {private static final String TAG = "MainActivity";private Button mEmojiBtn, mSendBtn;//表情按鈕和發(fā)送按鈕private EditText mMsgEdt;//輸入框private TextView mInfoTv;//展示界面private ViewPager mEmojiVp;//表情ViewPagerprivate FrameLayout mEmojiFl;//表情面板private LinearLayout mVpPointLl;//表情ViewPager指示器//輸入法和表情平滑切換的輔助類private EmotionKeyboardSwitchHelper mEmotionKeyboardSwitchHelper;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mEmotionKeyboardSwitchHelper = EmotionKeyboardSwitchHelper.with(this);initView();initListener();}private void initListener() {mSendBtn.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {mInfoTv.append(mMsgEdt.getText() + "\r\n");mMsgEdt.setText("");}});mEmotionKeyboardSwitchHelper.bind(mInfoTv, mMsgEdt, mEmojiBtn, mEmojiFl);}private void initView() {mEmojiBtn = (Button) findViewById(R.id.btn_emoji);mSendBtn = (Button) findViewById(R.id.btn_send);mMsgEdt = (EditText) findViewById(R.id.edt_msg);mInfoTv = (TextView) findViewById(R.id.tv_info);mEmojiVp = (ViewPager) findViewById(R.id.vp_emoji);mEmojiFl = (FrameLayout) findViewById(R.id.fl_emoji);mVpPointLl = (LinearLayout) findViewById(R.id.ll_point);initViewPager();}/** * 設(shè)置ViewPager表情 */private void initViewPager() {EmojiVpAdapter adapter = new EmojiVpAdapter(this);mEmojiVp.setAdapter(adapter);//表情點擊監(jiān)聽adapter.setOnEmojiClickListener(new EmojiVpAdapter.OnEmojiClickListener() {@Overridepublic void onClick(String emoji) {if ("del".equals(emoji)) {//表示點擊的是刪除按鈕KeyEvent event = new KeyEvent(KeyEvent.ACTION_DOWN, KeyEvent.KEYCODE_DEL);mMsgEdt.onKeyDown(KeyEvent.KEYCODE_DEL, event);} else {mMsgEdt.append(emoji);}}});mEmojiVp.setCurrentItem(0);//關(guān)聯(lián)指示器點adapter.setupWithPagerPoint(mEmojiVp, mVpPointLl);}@Overridepublic void onBackPressed() {if (mEmotionKeyboardSwitchHelper.onBackPress()) {super.onBackPressed();}} }

emoji ViewPager

public class EmojiVpAdapter extends PagerAdapter {private Context mContext;private String[] mEmojis;//216個表情字符private List<View> mPagers;//展示的頁面private OnEmojiClickListener mEmojiClickListener;//表情點擊監(jiān)聽接口public EmojiVpAdapter(Context ctx) {this.mContext = ctx;this.mEmojis = getEmojis();this.mPagers = getPagerList();}@Overridepublic int getCount() {return null == mPagers ? 0 : mPagers.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {View view = mPagers.get(position);if (null != view) {container.addView(view);}return view;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView((View) object);}/** * 從assets目錄下獲取所有表情 * * @return */public String[] getEmojis() {BufferedReader br = null;String emojis[] = null;try {InputStream is = mContext.getAssets().open("emoji.json");StringBuffer sb = new StringBuffer();br = new BufferedReader(new InputStreamReader(is));String line = null;while (null != (line = br.readLine())) {sb.append(line).append("\r\n");}JSONArray emojiArray = new JSONArray(sb.toString());if (null != emojiArray && emojiArray.length() > 0) {emojis = new String[emojiArray.length()];for (int i = 0; i < emojiArray.length(); i++) {emojis[i] = emojiArray.optString(i);}}} catch (Exception e) {e.printStackTrace();} finally {if (null != br) {try {br.close();} catch (IOException e) {e.printStackTrace();}}}return emojis;}/** * 獲取所有表情GridView頁面的集合 * * @return */public List<View> getPagerList() {List<View> pagers = null;String[] eachPageEmojis = null;if (null != mEmojis && mEmojis.length > 0) {pagers = new ArrayList<>();int pageCount = mEmojis.length / 27;//共8頁表情for (int i = 0; i < pageCount; i++) {GridView gridView = new GridView(mContext);gridView.setNumColumns(7);gridView.setSelector(new ColorDrawable(Color.TRANSPARENT));gridView.setCacheColorHint(Color.TRANSPARENT);gridView.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);gridView.setGravity(Gravity.CENTER);eachPageEmojis = new String[28];//總共216個表情字符,索引變化為:0-26,27-53,54-80,81-107,108-134,135-161,162-188,189-215System.arraycopy(mEmojis, i * 27, eachPageEmojis, 0, 27);eachPageEmojis[27] = "del";//第28是刪除按鈕,用特殊字符串表示gridView.setAdapter(new EmojiGvAdapter(mContext, eachPageEmojis));//點擊表情監(jiān)聽gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {//獲取選中的表情字符String emoji = (String) parent.getAdapter().getItem(position);if (null != mEmojiClickListener) {mEmojiClickListener.onClick(emoji);}}});pagers.add(gridView);}}return pagers;}/** * 關(guān)聯(lián)指示器點 * * @param viewPager * @param pointLayout */public void setupWithPagerPoint(ViewPager viewPager, final LinearLayout pointLayout) {//初始表情指示器int pageCount = getCount();for (int i = 0; i < pageCount; i++) {ImageView point = new ImageView(mContext);point.setImageResource(R.drawable.shape_vp_dot_unselected);LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(-2, -2);params.rightMargin = (int) mContext.getResources().getDimension(R.dimen.dp10);if (i == 0) {point.setImageResource(R.drawable.shape_vp_dot_selected);}pointLayout.addView(point, params);}viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {//切換指示器if (null != pointLayout && pointLayout.getChildCount() > 0) {for (int i = 0; i < pointLayout.getChildCount(); i++) {((ImageView) pointLayout.getChildAt(i)).setImageResource(R.drawable.shape_vp_dot_unselected);}((ImageView) pointLayout.getChildAt(position)).setImageResource(R.drawable.shape_vp_dot_selected);}}@Overridepublic void onPageScrollStateChanged(int state) {}});}/** * 表情點擊監(jiān)聽器 */public interface OnEmojiClickListener {void onClick(String emoji);}public void setOnEmojiClickListener(OnEmojiClickListener l) {this.mEmojiClickListener = l;} }

emoji GridView

public class EmojiGvAdapter extends BaseAdapter {private Context mContext;private String[] mEmojis;public EmojiGvAdapter(Context context, String[] eachPageEmojis) {this.mContext = context;this.mEmojis = eachPageEmojis;}@Overridepublic int getCount() {return null == mEmojis ? 0 : mEmojis.length;}@Overridepublic String getItem(int position) {return null == mEmojis ? "" : mEmojis[position];}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ViewHolder holder = null;if (null == convertView) {holder = new ViewHolder();convertView = View.inflate(mContext, R.layout.item_emoji, null);holder.emojiTv = (TextView) convertView.findViewById(R.id.tv_emoji);convertView.setTag(holder);} else {holder = (ViewHolder) convertView.getTag();}if (position == 27) {//第28個顯示刪除按鈕holder.emojiTv.setBackgroundResource(R.drawable.ic_emojis_delete);FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) holder.emojiTv.getLayoutParams();lp.bottomMargin = (int) mContext.getResources().getDimension(R.dimen.dp12);} else {holder.emojiTv.setText(getItem(position));}return convertView;}private static class ViewHolder {private TextView emojiTv;}}

commentView

A library to show emoji,voice, commentview for Android，使用的App有：薄荷

emojicon

A library to show emoji in TextView, EditText (like WhatsApp) for Android

總結(jié)

以上是生活随笔為你收集整理的Android自带的emoji表情的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。