android實(shí)現(xiàn)gif圖與文字混排

dzone

我們在進(jìn)行qq聊天的時候發(fā)送表情，但這些表情都是并不是靜態(tài)的，更多的是動態(tài)圖，gif圖，那么如何在android客戶端顯示動態(tài)gif圖呢。

我們首先來看一下該開源項目的代碼。該開源項目主要是通過自定義一個Adapter-------chatAdapter，在ChatAdapter每一條的setText屬性中使用了自定義的方法convertNormalStringToSpannableString

convertNormalStringToSpannableString方法的返回值是SpannableString

　　我們首先來了解一下什么是SpannableString

　　TextView通常用來顯示普通文本，但是有時候需要對其中某些文本進(jìn)行樣式、事件方面的設(shè)置。Android系統(tǒng)通過SpannableString類來對指定文本進(jìn)行相關(guān)處理，也就是說我們想要實(shí)現(xiàn)文字加動態(tài)表情的實(shí)現(xiàn)就要通過SpannableString這個類來實(shí)現(xiàn)。

1. private SpannableString convertNormalStringToSpannableString(String message , final TextView tv) {
   
2.         SpannableString value = SpannableString.valueOf(message);
   
3.         Matcher localMatcher = EMOTION_URL.matcher(value);
   
4.         while (localMatcher.find()) {
   
5.             String str2 = localMatcher.group(0);
   
6.             int k = localMatcher.start();
   
7.             int m = localMatcher.end();
   
8.             if (m - k < 8) {
   
9.                 int face = fm.getFaceId(str2);
   
10.                 if(-1!=face){//wrapping with weakReference
    
11.                     WeakReference<AnimatedImageSpan> localImageSpanRef = new WeakReference<AnimatedImageSpan>(new AnimatedImageSpan(new AnimatedGifDrawable(cxt.getResources().openRawResource(face), new AnimatedGifDrawable.UpdateListener() {   
    
12.                         @Override
    
13.                         public void update() {//update the textview
    
14.                             tv.postInvalidate();
    
15.                         }
    
16.                     })));
    
17.                     value.setSpan(localImageSpanRef.get(), k, m, Spanned.SPAN_INCLUSIVE_INCLUSIVE);
    
18.                 }
    
19.             }
    
20.         }
    
21.         return value;
    
22.     }

復(fù)制代碼

首先將我們傳入的message轉(zhuǎn)化成SpannableString類，然后看一下傳入的值是否符合我們一開始寫好的正則表達(dá)式EMOTION_URL

1. private Pattern EMOTION_URL = Pattern.compile("\\[(\\S+?)\\]");

復(fù)制代碼

如果符合的話 我們?nèi)�group（0）

　　附：group是針對（）來說的，group（0）就是指的整個串，group（1）指的是第一個括號里的東西，group（2）指的第二個括號里的東西。

　　子表達(dá)式和起始位置和結(jié)束位置的差小于8，也就是符合我們的要求。調(diào)用FaceManager中的getFaceId方法

1. public int getFaceId(String faceStr){
   
2.         if(mFaceMap.containsKey(faceStr)){
   
3.             return mFaceMap.get(faceStr);
   
4.         }
   
5.         return -1;
   
6.     }

復(fù)制代碼

找到我們用Map進(jìn)行存儲的表情

　　如果表情存在的話利用一個弱引用（WeakReference）把自定義的AnimatedImageSpan進(jìn)行處理，使AnimatedImageSpan不那么的消耗內(nèi)存，在UpdateListener中利用postInvalidate刷新界面。最后把SpannableString的setSpan方法，三個參數(shù)分別是要放進(jìn)去的span ，起始位置，結(jié)束位置，flag標(biāo)志。

　　關(guān)于flag：

1. Spanned.SPAN_EXCLUSIVE_EXCLUSIVE， 這是在 setSpan 時需要指定的 flag，它是用來標(biāo)識在 Span 范圍內(nèi)的文本前后輸入新的字符時是否把它們也應(yīng)用這個效果。分別有 Spanned.SPAN_EXCLUSIVE_EXCLUSIVE(前后都不包括)、 Spanned.SPAN_INCLUSIVE_EXCLUSIVE(前面包括，后面不包括)、 Spanned.SPAN_EXCLUSIVE_INCLUSIVE(前面不包括，后面包括)、 Spanned.SPAN_INCLUSIVE_INCLUSIVE(前后都包括)。

復(fù)制代碼

最后將SpannableString返回，實(shí)現(xiàn)動態(tài)圖文混排。

　　關(guān)于自定義的AnimatedImageSpan如下：

1. public class AnimatedImageSpan extends DynamicDrawableSpan {
   
2. 
   
3.     private Drawable mDrawable;
   
4. 
   
5.     public AnimatedImageSpan(Drawable d) {
   
6.         super();
   
7.         mDrawable = d;
   
8.         // Use handler for 'ticks' to proceed to next frame
   
9.         final Handler mHandler = new Handler();
   
10.         mHandler.post(new Runnable() {
    
11.             public void run() {
    
12.                 ((AnimatedGifDrawable)mDrawable).nextFrame();
    
13.                 // Set next with a delay depending on the duration for this frame
    
14.                 mHandler.postDelayed(this, ((AnimatedGifDrawable)mDrawable).getFrameDuration());
    
15.             }
    
16.         });
    
17.     }
    
18.     @Override
    
19.     public Drawable getDrawable() {
    
20.         return ((AnimatedGifDrawable)mDrawable).getDrawable();
    
21.     }
    
22. 
    
23.     @Override
    
24.     public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
    
25.         Drawable d = getDrawable();
    
26.         Rect rect = d.getBounds();
    
27. 
    
28.         if (fm != null) {
    
29.             fm.ascent = -rect.bottom;
    
30.             fm.descent = 0;
    
31. 
    
32.             fm.top = fm.ascent;
    
33.             fm.bottom = 0;
    
34.         }
    
35. 
    
36.         return rect.right;
    
37.     }
    
38.     @Override
    
39.     public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
    
40.         Drawable b = getDrawable();
    
41.         canvas.save();
    
42. 
    
43.         int transY = bottom - b.getBounds().bottom;
    
44.         if (mVerticalAlignment == ALIGN_BASELINE) {
    
45.             transY -= paint.getFontMetricsInt().descent;
    
46.         }
    
47. 
    
48.         canvas.translate(x, transY);
    
49.         b.draw(canvas);
    
50.         canvas.restore();
    
51.     }
    
52. }

復(fù)制代碼