Android RichText 讓Textview輕松的支持富文本（圖像ImageSpan、點擊效果等等類似QQ微信聊天）

更新時間：2016年01月26日 10:23:43 作者：丙丁

AndroidRichText幫助實現(xiàn)像QQ，微信一樣的，一個TextView里既有文字又有表情又有圖片的效果，采用插件化的框架，代碼簡單，可拓展性強(qiáng)

AndroidRichText幫助實現(xiàn)像QQ，微信一樣的，一個TextView里既有文字又有表情又有圖片的效果，采用插件化的框架，代碼簡單，可拓展性強(qiáng)。

基礎(chǔ)框架包只有四個java文件，

RichTextWrapper ：TextView的包裹類，實現(xiàn)支持富文本，通過new RichTextWrapper(TextView v)來構(gòu)造。

RTMovementMethod： 繼承自Android原生的LinkMovementMethod，重寫onTouchEvent方法，優(yōu)化了ClickSpan（點擊響應(yīng)的文字區(qū)域）的點擊響應(yīng)。

Resolver：一個接口，我們需要實現(xiàn)一種支持富文本類型時就只需要寫一個相應(yīng)的Resolver重寫它的resolve方法，在resolve方法里實現(xiàn)所要實現(xiàn)的富文本樣式。

RichTexts：一些公用方法、類、接口的集合。接下來簡單介紹一下如何使用這個框架：

//直接根據(jù)TextView new一個RichTextWrapper,之后所有的事情都可以用它完成；
RichTextWrapper richTextWrapper = new RichTextWrapper((TextView) findViewById(R.id.tv_main));
//比如QQ希望在TextView里同時有表情和圖片那么就可以相應(yīng)的寫兩個Resolver來實現(xiàn)分別的功能，直接在初始化時調(diào)用addResolver傳入就可以。
richTextWrapper.addResolver(ImageResolver.class，EmotionResolver.class);
//同時，我們?nèi)绻Ｍc擊圖片時有響應(yīng)事件，可以使用setOnRichTextListener來處理，參數(shù)要傳入對應(yīng)的Resolver，這里是ImageResolver，如果我們需要自定義的XXResolver處理的富文本效果實現(xiàn)響應(yīng)事件，那么久傳入XXResolver.class；
richTextWrapper.setOnRichTextListener(ImageResolver.class, new RichTexts.RichTextClickListener() {
@Override
public void onRichTextClick(TextView v, String content) {
//在這里可以進(jìn)行圖片的點擊事件處理
　　　　　//do something
}
});
//最后直接把文本set進(jìn)去就可以
richTextWrapper.setText(content)；

addResolver可以傳入任意個Resolver，讓TextView支持我們需要的富文本類型，如果需要取消支持某種富文本類型，只需要不傳入該Resolver比如上文中如果只需要支持表情，那么 richTextWrapper.addResolver(EmotionResolver.class);
不需要做太多代碼改動，比較靈活。

那么此外，大家可以看出來另一個關(guān)鍵的地方就是Resolver；Resolver是如何實現(xiàn)呢？這邊使用一個Demo來簡單示例：

public class ImageResolver implements Resolver {
public static final String IMG_MATCH_REGULAR = "\\[img](\\w+)\\[/img]";
public static Pattern PATTERN = Pattern.compile(IMG_MATCH_REGULAR);
//參數(shù)中的sp是該Textview的content，extra是方便我們使用的一個附加的數(shù)據(jù)，默認(rèn)是空的，我們?nèi)绻Ｍ麖耐饷鎮(zhèn)魅霐?shù)據(jù)到這里面可以通過richTextWrapper.putExtra()來實現(xiàn)
@Override
public void resolve(final TextView textView, final Spannable sp, SparseArray<Object> extra, final RichTexts.RichTextClickListener listener) {
Matcher matcher = PATTERN.matcher(sp);
final Context context = textView.getContext();
while(matcher.find()){
String content = matcher.group(1);
final RichTexts.TaggedInfo info = new RichTexts.TaggedInfo(matcher.start(),matcher.end(),content);
if(listener!=null) {
RichTexts.RichTextClickSpan span = new RichTexts.RichTextClickSpan(listener,info.content);
sp.setSpan(span, info.start, info.end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
}
RichTexts.StickerSpan testSpan = new RichTexts.StickerSpan(context, R.drawable.icon,100,100);
RichTexts.setImageSpan(sp, info, testSpan);
textView.postInvalidate();
}
}

上面的示例中，RichTextClickSpan是大家如果需要實現(xiàn)點擊效果必須要用到的，而StickerSpan則是實現(xiàn)圖像效果，以上一個可點擊的圖像的Resolver就實現(xiàn)了，當(dāng)然上文中是隨便傳入一個icon，真實情況，大家需要自己根據(jù)內(nèi)容以及所期待的效果自己再做些調(diào)整。

您可能感興趣的文章: