快捷導(dǎo)航

詳解Android SpannableString多行圖文混排的應(yīng)用實(shí)戰(zhàn)

更新時(shí)間：2017年12月19日 09:35:02 作者：Kris_liu

本篇文章主要介紹了Android SpannableString多行圖文混排的應(yīng)用實(shí)戰(zhàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

TeXtView大家應(yīng)該都不陌生，文本展示控件嘛！就用TextView顯示普普通通的文本，OK，很簡(jiǎn)單，Android入門(mén)的都會(huì)，沒(méi)入門(mén)的在門(mén)縫外看兩眼也都會(huì)，哈哈，開(kāi)玩笑。那要是設(shè)計(jì)在開(kāi)發(fā)需求中要求類(lèi)似微信聊天表情一樣在TextView中插入表情圖片呢？有的小伙伴就會(huì)說(shuō)啦，“TextView添加圖片我會(huì)啊，不就是drawableLeft，drawableRight嘛！” 嗯 ~ 也行，算是一種方法，可這有一個(gè)限制，首先，圖片只能在TextView的兩端，其次，兩端都只能設(shè)置一張圖片。要是圖片要在文本中間呢？無(wú)能為力了吧，要是你會(huì)使用SpannableString，這個(gè)問(wèn)題也就不難解決了，簡(jiǎn)直是Just So So。

所以，不論你是否正在經(jīng)受以上問(wèn)題的困擾，亦或是還沒(méi)有經(jīng)歷到，請(qǐng)駐足仔細(xì)耐心的看完這篇簡(jiǎn)短的文章。不僅能夠輕松實(shí)現(xiàn)以上設(shè)計(jì)需求，更能收獲其他各種炫酷的效果，也許就能幫助你解決現(xiàn)在你所困擾的問(wèn)題。

首先我們來(lái)看下這張效果圖，注意圖片中置頂這個(gè)圖片是如何實(shí)現(xiàn)的呢？當(dāng)然你也可也設(shè)置他的點(diǎn)擊事件，比如帶有視頻或者其他類(lèi)的，這里我們就不多做介紹了，看項(xiàng)目具體需求就好。

效果圖

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

那么什么是SpannableString呢？

SpannableString其實(shí)和String一樣，都是一種字符串類(lèi)型，同樣TextView也可以直接設(shè)置SpannableString作為顯示文本，不同的是SpannableString可以通過(guò)使用其方法setSpan方法實(shí)現(xiàn)字符串各種形式風(fēng)格的顯示,重要的是可以指定設(shè)置的區(qū)間，也就是為字符串指定下標(biāo)區(qū)間內(nèi)的子字符串設(shè)置格式。

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

Spanned.SPAN_INCLUSIVE_EXCLUSIVE 從起始下標(biāo)到末尾下標(biāo)，包括起始下標(biāo)，不包括后面
Spanned.SPAN_INCLUSIVE_INCLUSIVE 從起始下標(biāo)到末尾下標(biāo)，同時(shí)包括起始下標(biāo)和末尾下標(biāo)，前后包括
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE 從起始下標(biāo)到末尾下標(biāo)，但都不包括起始下標(biāo)和末尾下標(biāo)
Spanned.SPAN_EXCLUSIVE_INCLUSIVE 從起始下標(biāo)到末尾下標(biāo)，包括末尾下標(biāo)

到此，那我們看看如何在代碼中實(shí)現(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());//這里后兩位不要填寫(xiě)int類(lèi)參數(shù)，否則會(huì)出現(xiàn)在大屏手機(jī)上顯示不整齊的情況
   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后，把我們需要的圖片通過(guò) Drawable drawable = getResources().getDrawable(R.mipmap.icon_top);
drawable.setBounds(0,0,drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());//這里后兩位不要填寫(xiě)int類(lèi)參數(shù)，否則會(huì)出現(xiàn)在大屏手機(jī)上顯示不整齊的情況

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: