Android自带的emoji表情的使用
原文链接:http://www.itwendao.com/article/detail/53941.html
什么是emoji表情
emoji表情是一种表情符号,在代码中它现在其实是一组遵循Unicode的编码,即每一个表情符号都对应了一个Unicode编码。更进一步说,emoji表情实际上是一组Unicode编码与一组表情描述之间的对应。注意,这里所说的不是表情图片,而是表情描述。那么图片的实现是由谁来负责的呢?图片是由各个系统或者软件针对统一的表情描述来各自实现的,他们都遵循统一的Unicode编码规范。也就是说Unicode编码其所对应的表情描述是统一的,是所有人都要共同遵守的一套标准或者规范,而具体的表情图片则可能因平台的不同而产生差异。
首先你得先从网上收集一套emoji的Unicode编码,例如这个网站Emoji Unicode Tables
该网站上面给出了每个emoji表情的图片,描述,Unicode编码的对照表,点击表中每一项emoji可看到如下所示:
这里写图片描述
红色框框就是我们要的值.在java中的Unicode表示就是:”\ud83d\ude01”,该编码字符可以直接被Android的TextView和EditText控件识别成对应的emoji表情.
本次demo中展示了从 “\ud83d\ude00” - “\ud83c\udf7c”这216个emoji表情.
效果图如下:
这里写图片描述
关于emoji编码的存放和获取
由于有216个emoji编码字符串,因此我把它整理到一个json数组中,然后保存到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;
}
表情组设计
通过上面的效果图也可以看得出,216个emoji表情被分成了8组,每组27个emoji+1个删除按钮.
实现这个效果也很简单,就是通过ViewPager来展示每一组emoji,而每一组emoji里面又是一个GridView控件,里面的item就是一个个的TextView.
每一组emoji页面的创建代码如下:
/** * 获取所有表情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));//点击表情监听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" /><!--表情,输入框,发送--><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="发送"/></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;//表情按钮和发送按钮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();}/** * 设置ViewPager表情 */private void initViewPager() {EmojiVpAdapter adapter = new EmojiVpAdapter(this);mEmojiVp.setAdapter(adapter);//表情点击监听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);//关联指示器点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;//表情点击监听接口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));//点击表情监听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;}/** * 关联指示器点 * * @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) {}});}/** * 表情点击监听器 */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
Android自带的emoji表情的使用相关推荐
- 在Android系统中使用系统自带的emoji表情
一,对emoji表情的理解 emoji表情是一种表情符号,在代码中它现在其实是一组遵循Unicode的编码,即每一个表情符号都对应了一个Unicode编码.更进一步说,emoji表情实际上是一组Uni ...
- android 自带的表情,在Android系统中使用系统自带的emoji表情
一,对emoji表情的理解 emoji表情是一种表情符号,在代码中它现在其实是一组遵循Unicode的编码,即每一个表情符号都对应了一个Unicode编码.更进一步说,emoji表情实际上是一组Uni ...
- android编辑框禁用emoji表情和颜文字
//完美解决输入框中不能输入的非法字符InputFilter inputFilter=new InputFilter() { Pattern pattern = Pattern.compile(&qu ...
- android手机自带表情符号,android系统自带Emoji表情与表情描述互相转换
前言 Emoji表情几乎都是有表情描述的,如愤怒的表情会有[愤怒],这样的描述,这里就是举了个列子,至于是什么样的表现形势,这是可以自己定义的.那么这样,一个表情带一个表情描述的好处就是,当我们发送信 ...
- 移动前端手机输入法自带emoji表情字符处理
原文链接 : https://blog.csdn.net/binjly/article/details/47321043 今天,测试给我提了一个BUG,说移动端输入emoji表情无法提交.很早以前就有 ...
- android显示ios emoji表情符号,教程:在 Android 上也能用 iOS 新 Emoji 表情
那是一个阳光明媚的周末,我惬意的躺在床上用着我的 Android 机刷微博,看着网上那些段子手,心情无比的舒畅.直到我看见这么一条: 瞬间百万头羊驼从我心头奔过,他到底发了些什么!?为什么我看不见!! ...
- MySQL 字符串删除表情符_字符串中Emoji表情处理
吃了经验的亏,因为Emoji表情引起的项目bug被撸主遇到两次了,总有一些调皮的小朋友爱用表情来搞点事.第一次把当时那个表改为utf8mb4解决了,第二次说啥都不好使.网上找了半天,发现好多人不去实验 ...
- 字符串中Emoji表情处理
吃了经验的亏,因为Emoji表情引起的项目bug被撸主遇到两次了,总有一些调皮的小朋友爱用表情来搞点事.第一次把当时那个表改为utf8mb4解决了,第二次说啥都不好使.网上找了半天,发现好多人不去实验 ...
- 如何在idea里git提交代码时,能有emoji表情图片?emoji表情大全给大家奉上
前言 大家好,我是奇想派,一名努力分享,誓要成为编程达人的程序员. 有一天撸代码,然后git commit的时候,发现注释都太单调了,想让代码提交页面充满点表情色彩.于是乎就开始搜索idea插件里是否 ...
最新文章
- 异常:java.lang.IllegalArgumentException: Control character in cookie value or attribute.
- Eclipse Juno上带有GlassFish的JavaEE 7
- Java用链表写图书管理_C语言链表实现图书管理系统
- 【英语学习】【WOTD】decoct 释义/词源/示例
- linux mysql 内存监控_MySQL监控性能的一些方法总结
- shell表达语句中,各种符号的释义 用法
- solr的索引库配置
- 《数字图像处理 第三版》(冈萨雷斯)——第十章 图像分割
- python处理实时获取的数据
- Linux基础入门教程-超详细
- 511遇见易语言文本处理寻找文本
- 计算机英语背诵发音,英语26个字母的标准发音 26个字母背诵顺口溜
- 诸如(1234568) 0xFF这类
- 学习大数据-flink实时数据流处理
- 响应式织梦模板民宿景区旅游类网站
- 点云语义分割:PointNet训练S3DIS数据集
- 在ROIC的框架下精读巴菲特的新作
- 计算机中pdf怎么预览,如何在浏览器中开启PDF时默认显示Adobe Reader XI工具栏
- 【C++/数据结构】先序遍历+中序遍历构建二叉树
- backupPC安装与使用