Android 支持表情功能

概述

1.原理和實現思路

2.表情圖片顯示

3.表情面板

4.表情的輸入框插入和刪除

5.表情添加腳本

Android中表情功能,一般都不是用ImageView去設置圖片實現的,
表情一般會嵌套在文本之中,那麼如何實現呢,這裡就介紹一下其中的原理,此外還有相關功能的實現思路和具體代碼

---

1.原理和思路

a.表情內容的數據格式
表情看上去是圖片,但是在數據傳輸的時候本質上是一個特殊文本
比如QQ表情就是一個 “/表情字母”的結構,比如害羞的表情就是/hx,呲牙就是/cy…
微博裡表情就是”[表情名字]”的接口,比如可愛的表情就是[可愛]等等…

b.特殊文本顯示圖片的原理
需要用到安卓中的SpannableString拓展性字符串相關知識
SpannableString可以讓一段字符串在顯示的時候,將其中某小段文字附著上其他內容,
附著的拓展內容可能是圖片,或者是文字格式,比如加粗斜體等

下面稍微展開介紹下SpannableString,會的可以跳過

常用的拓展內容包含有
BackgroundColorSpan 背景色
ClickableSpan 文本可點擊，有點擊事件
UnderlineSpan 下劃線
ImageSpan 圖片
StyleSpan 字體樣式：粗體、斜體等
URLSpan 文本超鏈接
此外還有刪除線,縮放大小等不同樣式的拓展

用法

SpannableString spannableString = new SpannableString(source);
ImageSpan span = new ImageSpan(context, bitmap);
spannableString.setSpan(span, start, start + emojiStr.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE );

解釋下用法
首先將原String文字包裝成拓展性文字SpannableString

再創建一個需要類型的Span對象,比如表情圖片就是ImageSpan,

然後利用SpannableString的setSpan方法,將span對象設置在對應位置,
start就是需要附著的內容的開始位置
end是需要附著的內容的開始位置
flag標志位,這裡是最常用的EXCLUSIVE_EXCLUSIVE的表示span拓展文本不包含前後,
此外還有INCLUSIVE是包含的意思

舉例說明下,原文字是”文章作者是大帥比”
那我創建個粗體拓展內容,並且要將其附著到作者二字上讓其變成粗體,
那開始位置就是2,即第三個字;結束位置就是4,即第五個
然後按照”包頭不包尾”原則,包含第三個字不包含第五個字,即處理的就是第三四倆字”作者”
flag我們將其設為EXCLUSIVE_INCLUSIVE即不包含前包含後

那最終顯示的文字就是
“文章作者是大帥比”
如果我們在附著內容及作者二字前面輸入內容時,由於是EXCLUSIVE不包含,所以不會跟著變化
“文章boredream作者是大帥比”
如果我們在附著內容及作者二字後面輸入內容時,由於是INCLUSIVE包含,新內容也會包含進效果
“文章作者boredream是大帥比”

c.特殊文字的匹配
知道要處理哪些特殊文本,怎麼處理,還有一步是怎麼把特殊文本從一段文字裡挑出來
即獲取到特殊本文的開始和結束位置,以及他的文字內容
這裡就要用到正則去進行匹配獲取了正則的規則就不細說了,下面介紹下表情這裡的正則匹配

---

2.表情圖片顯示

文字附著表情圖片很簡單,用SpannableString中的ImageSpan,
難點在於正則部分的獲取處理

首先是正則的寫法,根據需要自行編寫規則
這裡以微博表情為例

String regex = "\\[[\u4e00-\u9fa5\\w]+\\]";

簡單介紹下

最外面是方括號符號,要注意由於[]在正則中有特殊意義,
所以需要用斜槓\轉義一下(\本身也需要轉義所以是倆\)

中間\u4e00-\u9fa5表示中文,
\w表示下劃線的任意單詞字符
+ 代表一個或者多個
那麼這段正則就代表,匹配方括號內有一或多個文字和單詞字符的文本

然後去while循環匹配就可以了
用matcher.find獲取到匹配的開始位置,作為setSpan的start值,
用matcher.group方法獲取到匹配規則的具體表情文字,
end值則直接利用開始位置加上表情文字的長度即可

貼上代碼

public static SpannableString getEmotionContent( final Context context, final TextView tv, String source) {
     SpannableString spannableString = new SpannableString(source);
     Resources res = context.getResources();

     String regexEmotion = "\\[([\u4e00-\u9fa5\\w])+\\]" ;
     Pattern patternEmotion = Pattern. compile(regexEmotion);
     Matcher matcherEmotion = patternEmotion.matcher(spannableString);

      while (matcherEmotion.find()) {
            // 獲取匹配到的具體字符
           String key = matcherEmotion.group();
            // 匹配字符串的開始位置
            int start = matcherEmotion.start();
            // 利用表情名字獲取到對應的圖片
           Integer imgRes = EmotionUtils. getImgByName(key);
            if (imgRes != null) {
                 // 壓縮表情圖片
                 int size = ( int) tv.getTextSize();
                Bitmap bitmap = BitmapFactory.decodeResource(res, imgRes);
                Bitmap scaleBitmap = Bitmap.createScaledBitmap(bitmap, size, size, true);

                ImageSpan span = new ImageSpan(context, scaleBitmap);
                spannableString.setSpan(span, start, start + key.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE );
           }
     }
      return spannableString;
}

基本思路前面提過了,圖片處理的地方還要再說明下
表情如果直接獲取資源文件裡的圖片,可能會過大,所以方法參數裡傳入了需要顯示的文字控件,
然後利用文字大小去將表情圖片再壓縮一下

其中
EmotionUtils類就不介紹了,裡面就是一個map集合,key為表情名字,value為表情圖片的resId,
然後提供一個getImgByName的方法可以根據名字獲取圖片
鍵值對需要一個個添加比較麻煩,我們會在最後介紹一個表情添加的腳本,方便快速導入圖片資源

---

3.表情面板

結構就是ViewPager提供多頁滑動,每頁都是一個GridView顯示20個表情,末尾還有一個刪除按鈕
ViewPager和GridView的基本使用方法就不介紹了,這裡說明下其中的特殊處理

a.每個GridView的大小設置
GridView會顯示3行7列,共21個Item
為了讓Item能大小合適,最好的方法是利用動態計算的方式設置寬高,因為屏幕寬度各有不同
其他的一些大小計算也要注意用dp值轉換下獲取對應的px再使用，保證適配問題

思路是
獲取屏幕寬度,減去間隙距離,然後除以7算出每個Item需要的寬度,
然後再乘以3加上需要的間隙,算出表情面板的高度,利用算出來的值去創建設置面板大小

b.需要多少個GridView
一共有多少頁呢,雖然表情大部分情況下總數是固定的,
但是最好還是根據代碼的方式算出來需要多少頁,而非直接人去目測計算要多少個GridView

思路是
for循環全部的圖片名字,這裡利用map.keySet獲取全部的鍵集合
每次循環都把圖片名添加到一個集合中,
然後進行判斷,如果滿20個了就作為一組表情,新建一個GridView設置上去
最後把所有表情生成的一個個GridView放到一個總view集合中,利用ViewPager顯示

c.GridView末尾刪除鍵處理
適配器和點擊事件中,都利用position判斷,如果是最後一個就進行特殊的顯示和點擊處理

這幾部分的代碼比較亂,但是沒有什麼新知識點,都是一些邏輯方面的內容,就不貼出來了
最後附件裡會放出完整的demo代碼,可以下載查看

---

4.表情的輸入框插入和刪除

實質上還是對表情對應的文本數據進行操作,這裡最要注意的地方是輸入框中的光標問題
輸入框其實也是TextView的一種，顯示和之前介紹的方法一樣，
但是動態的添加和刪除就需要注意處理位置的問題了

a.手動設置光標
新添加一個表情，應該是在輸入框中當前光標的位置插入圖片，所以首先要知道光標的位置
獲取這裡可以用 et.setSelectionStart方法
還有一點,添加完表情以後,光標應該更新到新添加內容後面,
而設置光標位置就要用 et.setSelection(position)方法

b.調用系統按鈕事件自動處理
刪除就比較簡單了,這裡直接調用系統的 Delete 按鈕事件即可,
讓某個控件調用按鈕事件的方法為
et.displatchKeyEvent(new KeyEvent(action, code));
其中action就是動作,用ACTION_DOWN按下動作就可以了
而code為按鈕事件碼,刪除對應的就是KEYCODE_DEL

---

5.表情添加腳本

以上,知識點就全部介紹完畢了,最後是福利時間
表情少則幾十,多則甚至上百~ 一個一個的根據名字設置對應表情鍵值對會各種痛苦
這裡推薦編寫腳本進行處理,也就是寫段功能自動的生成所需代碼

這段就比較靈活了,需要根據不同需要編寫腳本,所以主要是提供個思路然後以微博為例編寫代碼

微博中表情是”[表情文字]”,而表情圖片名字則是”d_表情拼音”
(此外還有其他的名字樣式,比如h_或者emoji_等等,暫時不管,處理原理都差不多)

這裡要先說明一下前提,必須要按照一定規則來才能進行這種半自動化的處理,
如果表情干脆名字就是瞎起的,那就沒轍了,
如果是公司自己做應用的話,一定要讓美工切圖後導出的圖片文件名按照套路出牌

新浪微博中d_表情拼音這裡就都是中文對應的拼音而非英文,且中文都是和[表情文字]一致的,
比如害羞表情的文字就是[害羞],而圖片名字就是d_haixiu

那微博這裡處理就可以按照套路來了
1) 打開微博原版客戶端,把所有表情全部選中,然後發出來
2) 在日志裡獲取到這段圖片對應的文字數據
3) 用表情文字規則對這段文字進行循環匹配
4) 每次循環的時候都,把匹配的表情名字轉為拼音(pinyin4j等工具)
5) 把表情文字轉成的拼音再拼成圖片資源的名字(微博這裡就是加個”d_”前綴)
6) 拼接map.put的代碼
7) 循環完成後,打印出來全部的map.put代碼,然後復制到我們的表情工具類中使用

貼上代碼,腳本直接新建一個java的項目放在main函數裡運行就可以了

public static void weiboEmoji() {
     StringBuilder sb = new StringBuilder();

     String names = "[羞羞哒甜馨][萌神奧莉][帶著微博去旅行][愛紅包][拍照][馬到成功]→_→[呵呵][嘻嘻][哈哈][愛你][挖鼻屎][吃驚][暈][淚][饞嘴][抓狂][哼][可愛][怒][汗][害羞][睡覺][錢][偷笑][笑cry][doge][喵喵][酷][衰][閉嘴][鄙視][花心][鼓掌][悲傷][思考][生病][親親][怒罵][太開心]" +
                 "[懶得理你][右哼哼][左哼哼][噓][委屈][吐][可憐][打哈氣][擠眼][失望][頂][疑問][困][感冒][拜拜][黑線][陰險][打臉][傻眼][互粉][心][傷心][豬頭][熊貓][兔子]" ;

     String regexEmoji = "\\[([\u4e00-\u9fa5a-zA-Z0-9])+\\]" ;
     Pattern patternEmoji = Pattern. compile(regexEmoji);
     Matcher matcherEmoji = patternEmoji.matcher(names);

     CharacterParser parser = CharacterParser. getInstance();
      while (matcherEmoji.find()) { // 如果可以匹配到
           String key = matcherEmoji.group(); // 獲取匹配到的具體字符

           String pinyinName = "d_" + parser.getSpelling(key).replace("[" , "" ).replace("]" , "" );
           sb.append( "emojiMap.put(\"" + key + "\", R.drawable." + pinyinName + ");\n" );
     }
     System. out.println(sb.toString());
}

運行結果,從控制台復制代碼粘貼到項目裡的工具類中即可

可能有的表情文件名就是不按套路來,
比如新浪微博這裡的笑哭的表情,文字就是[笑cry],而圖片文件名是d_xiaoku
那麼也沒關系,你復制到項目中,如果圖片資源匹配不上的話也會報錯提示,進行對應修改即可