android 表情键盘

来源:互联网 发布:linux can socket编程 编辑:程序博客网 时间:2024/05/11 03:56

    作为一名菜鸟 最近看了一篇关于 软键盘表情键盘的文章 在这里想和大家分享一下 之前自己也一直想写这方面的 东西,但是看得这篇文章 很受启发 简单的 给大家讲解一下 表情软键盘的实现 过程


实现如下图中的效果 



a. 要用到这个表情软键盘我们需要单独去实现这个功能然后在需要用到的类里面 进行添加即可 具体使用:


<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <!--可以是listview -->    <ListView        android:id="@+id/listview"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        android:visibility="gone" />        <FrameLayout        android:id="@+id/fl_emotionview_main"        android:layout_width="match_parent"        android:layout_height="wrap_content" /></LinearLayout>
 

其中ListView的layout_height为0dp、layout_weight为1,这样这个ListView就会自动充满整个布局,这里ListView可以替换成任意控件,FrameLayout则为表情布局(只不过这里最终会被替换成整个表情布局),我们的目的就是在弹出软键盘时固定FrameLayout的高度,以便去除跳闪问题。FrameLayout的高度是由其上面的控件决定的也就是由ListView决定的,也就是说我们只要在软键盘弹出前固定ListView的内容高度即可。因此我们可以通过下面的方法来锁定ListView的高度,(mContentView就是我们所指的ListView,这些方法都封装在EmotionKeyboard.java类中)


代码里面绑定软键盘代码:


/** * 初始化表情面板 */public void initEmotionMainFragment(){    //构建传递参数    Bundle bundle = new Bundle();    //绑定主内容编辑框    bundle.putBoolean(EmotionMainFragment.BIND_TO_EDITTEXT,true);    //隐藏控件    bundle.putBoolean(EmotionMainFragment.HIDE_BAR_EDITTEXT_AND_BTN,false);    //替换fragment    //创建修改实例    emotionMainFragment =EmotionMainFragment.newInstance(EmotionMainFragment.class,bundle);    emotionMainFragment.bindToContentView(listview);    FragmentTransaction transaction =getSupportFragmentManager().beginTransaction();    // Replace whatever is in thefragment_container view with this fragment,    // and add the transaction to the backstack    transaction.replace(R.id.fl_emotionview_main,emotionMainFragment);    transaction.addToBackStack(null);    //提交修改    transaction.commit();}


b.软键盘实现思路 :


软键盘 我们可以自己通过一个布局去定义包括上面的表情的输入框,下面的表情布局,以及表情分类 选项卡;


表情输入框 可以根据自己的需要进行 布局

表情布局分析:显示的表情可以进行分类,通过点击 + 按钮图标 进行不同类表情的查看以及选择  那么具体实现呢 这里可以用到 水平不可滑动的 NohorizontalScrollerViewpager + Fragment 来实现表情页,底部+ 可以通过RecylerView 来实现  具体实现类 是 EmotionMainFragment 然后它里面 嵌套

的每一个表情Fragment 可以根据自己的需要实现 这里 我们第一个表情Fragment 是 EmotiomComplateFragment 这个类里面实现了表情一页一页可以进行左右滑动,所以会用到viewpager 然后每一页的表情我们可以通过girdview 去实现 然后通过滑动


viewpager 就可以看到每页里面通过girdview 展示的表情了 但是这个表情有一个表情的工具类

   EmotionUtils  里面建立不同的map 存放不同的表情
 那么在gridview中的EmotionGridViewAdapter 里面显示表情是通过key(表情文字) 来获取value(表情图片资源)从而进行表情展示 如下代码

String emotionName = emotionNames.get(position);iv_emotion.setImageResource(EmotionUtils.getImgByName(emotion_map_type,emotionName));

表情的显示讲解了那么表情布局怎么实现呢 每一页显示20个表情和 后面都有一个删除按钮  那么可以通过获取表情集合里面的表情个数如果是20个那就是一页,然后第21个

添加一个删除按钮 不足20个 也是一页 最后面添加一个删除按钮代码如下:


在EmotionComplateFragment 类中去实现表情页面功能

List<GridView> emotionViews = new ArrayList<>();List<String> emotionNames = new ArrayList<>();// 遍历所有的表情的key 将表情集合中的 表情一个一个获取for (String emojiName : EmotionUtils.getEmojiMap(emotion_map_type).keySet()) {    emotionNames.add(emojiName);    // 每20个表情作为一组,同时添加到ViewPager对应的view集合中    if (emotionNames.size() == 20) {        GridView gv = createEmotionGridView(emotionNames, screenWidth, spacing, itemWidth, gvHeight);        emotionViews.add(gv);        // 添加完一组表情,重新创建一个表情名字集合        emotionNames = new ArrayList<>();    }}//TODO 不足20// 判断最后是否有不足20个表情的剩余情况if (emotionNames.size() > 0) {    GridView gv = createEmotionGridView(emotionNames, screenWidth, spacing, itemWidth, gvHeight);    emotionViews.add(gv);}

















0 0
原创粉丝点击