Android實戰(zhàn)SpannableString多行圖文混排的應用

首先我們來看下這張效果圖娃磺，注意圖片中置頂這個圖片是如何實現(xiàn)的呢亡哄？當然你也可也設置他的點擊事件，比如帶有視頻或者其他類的枣抱，這里我們就不多做介紹了熔吗，看項目具體需求就好。

效果一

效果二

如果就涉及到一行的話我們只需要在文本后面加個imageview就行沃但，但是如果多行顯示的話這樣做就不太好了

那么什么是SpannableString呢磁滚？

SpannableString其實和String一樣，都是一種字符串類型宵晚，同樣TextView也可以直接設置SpannableString作為顯示文本垂攘，不同的是SpannableString可以通過使用其方法setSpan方法實現(xiàn)字符串各種形式風格的顯示,重要的是可以指定設置的區(qū)間，也就是為字符串指定下標區(qū)間內的子字符串設置格式淤刃。

setSpan(Object what, int start, int end, int flags)方法需要用戶輸入四個參數(shù)晒他，what表示設置的格式是什么，可以是前景色逸贾、背景色也可以是可點擊的文本等等陨仅，start表示需要設置格式的子字符串的起始下標津滞，同理end表示末尾下標，flags就是一種標識灼伤，共有以下四種屬性：

Spanned.SPAN_INCLUSIVE_EXCLUSIVE 從起始下標到末尾下標触徐，包括起始下標，不包括后面
Spanned.SPAN_INCLUSIVE_INCLUSIVE 從起始下標到末尾下標狐赡，同時包括起始下標和末尾下標撞鹉，前后包括
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE 從起始下標到末尾下標，但都不包括起始下標和末尾下標
Spanned.SPAN_EXCLUSIVE_INCLUSIVE 從起始下標到末尾下標颖侄，包括末尾下標

到此鸟雏，那我們看看如何在代碼中實現(xiàn)這效果一呢？

String title = MapUtil.getValueStr(datas.get(position), "Title");
            try {
                title = java.net.URLDecoder.decode(title, "utf-8");
            } catch (UnsupportedEncodingException e) {
                e.printStackTrace();
            }
            //圖文混排
            Drawable drawable = getResources().getDrawable(R.mipmap.icon_top);
            drawable.setBounds(0,0,drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());//這里后兩位不要填寫int類參數(shù)览祖，否則會出現(xiàn)在大屏手機上顯示不整齊的情況
            ImageSpan is = new ImageSpan(drawable);
            String space = " ";
            title = title + space;
            int strLength = title.length();
            SpannableString ss = new SpannableString(title);
            ss .setSpan(is,strLength-1, strLength, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);

            if ("1".equals(TopFlag)) { //置頂顯示
                viewHolder.title.setText(ss.subSequence(0,strLength));
            } else {
                viewHolder.title.setText(title);
            }

我們拿到接口返回的title后孝鹊，把我們需要的圖片通過 Drawable drawable = getResources().getDrawable(R.mipmap.icon_top);
drawable.setBounds(0,0,drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());//這里后兩位不要填寫int類參數(shù)，否則會出現(xiàn)在大屏手機上顯示不整齊的情況

拿到圖片后設置你想要的大小和位置即可輕松快速實現(xiàn)這一效果展蒂。

那么怎么實現(xiàn)效果2那種name和內容顏色區(qū)分開呢又活？有人會覺得，這不name寫個布局锰悼，內容寫個布局就ok了嗎皇钞？是的這樣寫沒錯能夠實現(xiàn)這個效果，但是松捉，你注意到這種評論文本他是一行結束跳轉開頭繼續(xù)顯示的，你那樣做的話肯定不行了馆里，只能夠集中顯示不會到開頭

好了分析完了我們具體看看如何輕松實現(xiàn)這一效果吧隘世！

` /**
*
*
* @author 創(chuàng)建人: kris_liutao
*
* @description 功能描述: 利用SpannableString將不同的文本類型拼接起來ForegroundColorSpan只能使用int類型參數(shù)
*
*/

            String name = (MapUtil.getValueStr(datas.get(position), "Name"));
            String resourName = (MapUtil.getValueStr(datas.get(position), "ReceiverName"));
            String msg = name +" 回復 "+resourName+" :"+ content;

            int fstart=msg.indexOf(name);
            int fend=fstart+name.length();

            int bstart=msg.indexOf(resourName);
            int bend=bstart+resourName.length();
            SpannableString spannableString = new SpannableString(msg);
            spannableString.setSpan(new ForegroundColorSpan(Color.parseColor("#21D04B") ),fstart,fend, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
            spannableString.setSpan(new ForegroundColorSpan(Color.parseColor("#21D04B") ),bstart,bend, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);

            holder.content.setText(spannableString);

注意看代碼部分
String name = (MapUtil.getValueStr(datas.get(position), "Name"));

String resourName = (MapUtil.getValueStr(datas.get(position), "ReceiverName"));

String content = MapUtil.getValueStr(datas.get(position), "Content");

這是我們接口返回的名字和內容，我們只需要設置名字的顏色的話那么通過
String resourName = (MapUtil.getValueStr(datas.get(position), "ReceiverName"));
String msg = name +" 回復 "+resourName+" :"+ content;

            int fstart=msg.indexOf(name);
            int fend=fstart+name.length();

拼接將name取出來鸠踪，得到name的length（）丙者，然后通過SpannableString創(chuàng)建新的對象
SpannableString spannableString = new SpannableString(msg);
spannableString.setSpan(new ForegroundColorSpan(Color.parseColor("#21D04B") ),fstart,fend, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);

ForegroundColorSpan這個設置的是字體的顏色，BackgroundColorSpan這個參數(shù)是選中內容設置背景顏色等等营密，最后holder.content.setText(spannableString);將SpannableString的對象設置到你想要的地方即可實現(xiàn)這一效果械媒。

CSDN移步：
CSDN http://blog.csdn.net/first_cooman