Android自帶emoji表情的使用方法詳解
什么是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-215 System.arraycopy(mEmojis, i * 27, eachPageEmojis, 0, 27); eachPageEmojis[27] = "del";//第28是刪除按鈕,用特殊字符串表示 gridView.setAdapter(new EmojiGvAdapter(mContext, eachPageEmojis)); //點擊表情監(jiān)聽 gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public 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;//表情ViewPager private FrameLayout mEmojiFl;//表情面板 private LinearLayout mVpPointLl;//表情ViewPager指示器 //輸入法和表情平滑切換的輔助類 private EmotionKeyboardSwitchHelper mEmotionKeyboardSwitchHelper; @Override protected 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() { @Override public 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() { @Override public 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); } @Override public 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(); } @Override public int getCount() { return null == mPagers ? 0 : mPagers.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { View view = mPagers.get(position); if (null != view) { container.addView(view); } return view; } @Override public 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-215 System.arraycopy(mEmojis, i * 27, eachPageEmojis, 0, 27); eachPageEmojis[27] = "del";//第28是刪除按鈕,用特殊字符串表示 gridView.setAdapter(new EmojiGvAdapter(mContext, eachPageEmojis)); //點擊表情監(jiān)聽 gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public 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() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public 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); } } @Override public 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; } @Override public int getCount() { return null == mEmojis ? 0 : mEmojis.length; } @Override public String getItem(int position) { return null == mEmojis ? "" : mEmojis[position]; } @Override public long getItemId(int position) { return position; } @Override public 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; } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于Android開發(fā)支持表情的實現(xiàn)詳解
- Android開發(fā)技巧之像QQ一樣輸入文字和表情圖像
- Android編程實現(xiàn)QQ表情的發(fā)送和接收完整實例(附源碼)
- 完整的Android表情功能處理方案
- Android編程開發(fā)實現(xiàn)TextView顯示表情圖像和文字的方法
- 詳解Android過濾emoji表情正則表達式
- android高仿微信表情輸入與鍵盤輸入代碼(詳細實現(xiàn)分析)
- Android EdText編輯框禁止輸入表情符號(使用正則表達式)
- Android輸入框添加emoje表情圖標的實現(xiàn)代碼
- Android實現(xiàn)表情功能
相關(guān)文章
解析離線安裝Eclipse的Android ADT開發(fā)插件的具體操作(圖文)
本篇文章是對離線安裝Eclipse的Android ADT開發(fā)插件的具體操作進行了詳細的分析介紹,需要的朋友參考下2013-05-05詳解用RxJava實現(xiàn)事件總線(Event Bus)
本篇文章主要介紹了用RxJava實現(xiàn)事件總線(Event Bus),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11Android小部件Widget開發(fā)過程中的坑和問題小結(jié)
這篇文章主要介紹了Android小部件Widget開發(fā)過程中的坑和問題小結(jié),本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09android 關(guān)于利用簽名的SHA1進行安全校驗的方法之一(推薦)
下面小編就為大家?guī)硪黄猘ndroid 關(guān)于利用簽名的SHA1進行安全校驗的方法之一(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-01-01Android 自定義View的構(gòu)造函數(shù)詳細介紹
這篇文章主要介紹了Android 自定義View的構(gòu)造函數(shù)詳細介紹的相關(guān)資料,這里對構(gòu)造函數(shù)進行了對比按需使用,需要的朋友可以參考下2016-12-12