Android 支持表情功能

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
那麼也沒關系,你復制到項目中,如果圖片資源匹配不上的話也會報錯提示,進行對應修改即可