Android-表情键盘的制作

IM 应用中必不可少的就是表情键盘，最近研究了一下，发现表情键盘还是蛮容易做的。
布局

布局文件主要有两个文件了，一个是要放在聊天对话框里的 ViewPager，一个是给 ViewPager 添加的 View。
很明显 ViewPager 是放在聊天布局的最底部，并且 visibility="gone"，当点击表情按钮的时候使 visibility="visible"。这个布局里我是把高度给写死了，因为如果不写死的话，在代码中好像布局会出现问题？在网上也看到大多数的人都是给写死的，当然也可以用 onGlobalLayout 的监听去动态配置尺寸。
第 2 个布局就是 ViewPager 中的 View，这里我使用 GridView，并设置 column=7。

配置 ViewPager 中的 View

搞好布局接下来就是 ViewPager 中的 View 了。毫无疑问，一个是 ViewPagerAdapter，一个是 GridViewAdapter，大体思路就是：计算表情包中的表情需要几个 page，分好之后对 GridView 实例进行加载数据，然后把一个一个 gridview 加载到 ViewPager 中去。
首先看看计算表情各种属性的代码，我放在 EmotionHelper 类中：

    int pages=emojiCodes.length/ONE_PAGE_SIZE+(emojiCodes.length%ONE_PAGE_SIZE==0? 0:1);
    for(int i=0;i<pages;i++){
        List<String> onePageEmojis = new ArrayList<>();
        int start=i*ONE_PAGE_SIZE;
        int end=start+Math.min(ONE_PAGE_SIZE,emojiCodes.length-start);
        for(int j=start;j<end;j++){
            onePageEmojis.add(emojiCodes[j]);
        }
        emogroups.add(onePageEmojis);
    }
​

emojiCodes 是表情相对应的字符串，page 是得到表情的页数，emogroups 是多个 page 的数组列表。这里已经完成了表情框各个数据的初始化了，接下来就是在 adapter 中利用字符串查找到对应的表情图片，完成加载。

ImageView 在 TextView 中的显示问题
最开始这个还想了我好一会，要在 TextView 中显示 ImageView 该怎么做？后来还上网找到了一个 Spannable 的东西，看英文解释就是可以把类似于 ImageView 的东西 attach 到 TextView 上吧。看代码如何生成可以显示 ImageView 的 SpannableString 吧：

   public static CharSequence replace(Context context, String text) {
    if (TextUtils.isEmpty(text)) {
        return text;
    }
    SpannableString spannableString = new SpannableString(text);
    Matcher matcher = pattern.matcher(text);
    while (matcher.find()) {
        String factText = matcher.group();
        String key = factText.substring(1, factText.length() - 1);
        if (contain(emojiCodes, factText)) {
            Bitmap bitmap = getDrawableBitmap(context, key);
            ImageSpan image = new ImageSpan(context, bitmap);
            int start = matcher.start();
            int end = matcher.end();
            spannableString.setSpan(image, start, end,
                    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        }
    }
    return spannableString;
   }
   
   
这里还了解了一下Pattern和matcher的知识，例如我这里的表情格式是这样的：":clap:"，对应的pattern就是

`pattern = Pattern.compile("\\:[a-z]*\\:");`

pattern.matcher就是基于text，利用这个pattern去寻找匹配字符串，faceText就是得到的表情对应的字符串值，之后将对应的bitmap初始化为ImageSpan放入spannableString中去。


 表情键盘做好之后，和软键盘的冲突没有很好的协调，下次有机会再好好研究吧。
​