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

首先我們來看下這張效果圖,注意圖片中置頂這個圖片是如何實現的呢?當然你也可也設置他的點擊事件,比如帶有視頻或者其他類的,這里我們就不多做介紹了,看項目具體需求就好。

效果一
效果二

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

那么什么是SpannableString呢?

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

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

Spanned.SPAN_INCLUSIVE_EXCLUSIVE 從起始下標到末尾下標,包括起始下標,不包括后面
Spanned.SPAN_INCLUSIVE_INCLUSIVE 從起始下標到末尾下標,同時包括起始下標和末尾下標,前后包括
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE 從起始下標到末尾下標,但都不包括起始下標和末尾下標
Spanned.SPAN_EXCLUSIVE_INCLUSIVE 從起始下標到末尾下標,包括末尾下標

到此,那我們看看如何在代碼中實現這效果一呢?

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類參數,否則會出現在大屏手機上顯示不整齊的情況
            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類參數,否則會出現在大屏手機上顯示不整齊的情況

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

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

好了分析完了我們具體看看如何輕松實現這一效果吧!

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

            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這個參數是選中內容設置背景顏色等等,最后holder.content.setText(spannableString);將SpannableString的對象設置到你想要的地方即可實現這一效果。

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內容