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

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

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

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

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

首先我們來看下這張效果圖，注意圖片中置頂這個圖片是如何實現(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)這一效果。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: