使用android SpannableStringBuilder實現圖文混排，查看更多

標籤：des   android   style   blog   http   color   io   os   使用   

項目開發中需要實現這種效果

多餘兩行，兩行最後是省略符號，省略符號後面是下拉更多

之前用過的是Html.fromHtml去處理圖文混排的，僅僅是文字後圖片或者文字顏色字型什麼的，

但是這裡需要在最後文字的省略符號後面添加圖片。

直接上代碼吧，代碼注釋很多，慢慢研究

private void toggleEllipsize(final TextView tv,final String desc){if(desc == null){return;}tv.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {@Overridepublic void onGlobalLayout() {boolean isEllipsized = (tv.getTag()==null||tv.getTag().equals(false))?false:(Boolean)tv.getTag();if(isEllipsized){tv.setTag(false);tv.setText(desc);}else{tv.setTag(true);int paddingLeft = tv.getPaddingLeft();int paddingRight = tv.getPaddingRight();TextPaint paint = tv.getPaint();float moreText = tv.getTextSize()*3;float availableTextWidth = (tv.getWidth()-paddingLeft-paddingRight)*2-moreText;CharSequence ellipsizeStr = TextUtils.ellipsize(desc,paint,availableTextWidth,TextUtils.TruncateAt.END);if(ellipsizeStr.length()<desc.length()){/*String html = "<img src='game_info_lookmore'/>";CharSequence charSequence = Html.fromHtml(html, new ImageGetter() {@Overridepublic Drawable getDrawable(String source) {Drawable drawable = getResources().getDrawable(getResourceId(source));drawable.setBounds(0,0,drawable.getIntrinsicWidth()- DensityUtil.dip2px(GridGameInfoActivity.this, 3),drawable.getIntrinsicHeight()- DensityUtil.dip2px(GridGameInfoActivity.this, 1));return drawable;}}, null);ellipsizeStr = ellipsizeStr.toString() + charSequence.toString();*/CharSequence temp = ellipsizeStr+".";SpannableStringBuilder ssb = new SpannableStringBuilder(temp);Drawable dd = getResources().getDrawable(R.drawable.game_info_lookmore);dd.setBounds(0, 0, dd.getIntrinsicWidth(), dd.getIntrinsicHeight());ImageSpan is = new ImageSpan(dd, ImageSpan.ALIGN_BASELINE);ssb.setSpan(is, temp.length()-1, temp.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);//int yellow = getResources().getColor(R.color.red);//ssb.setSpan(new ForegroundColorSpan(yellow),ssb.length()-2,ssb.length(),Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);tv.setText(ssb);tv.setMovementMethod(LinkMovementMethod.getInstance());}else{tv.setText(desc);}}if(Build.VERSION.SDK_INT>=16){tv.getViewTreeObserver().removeOnGlobalLayoutListener(this);}else{tv.getViewTreeObserver().removeGlobalOnLayoutListener(this);}}});}

主要是通過SpannableStringBuilder把省略的文字和最後的圖片給拼接起來。也可以最後拼接的是文字，

不讓...更多

轉篇部落格：

Android spannableStringBuilder用法整理

spannableStringBuilder 用法詳解： SpannableString ss = new SpannableString("紅色打電話斜體刪除線綠色底線圖片:.");           //用顏色標記文本         ss.setSpan(new ForegroundColorSpan(Color.RED), 0, 2,                   //setSpan時需要指定的 flag,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE(前後都不包括).                 Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);         //用超連結標記文本         ss.setSpan(new URLSpan("tel:4155551212"), 2, 5,                   Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);         //用樣式標記文本（斜體）         ss.setSpan(new StyleSpan(Typeface.BOLD_ITALIC), 5, 7,                   Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);         //用刪除線標記文本         ss.setSpan(new StrikethroughSpan(), 7, 10,                   Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);         //用底線標記文本         ss.setSpan(new UnderlineSpan(), 10, 16,                   Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);         //用顏色標記         ss.setSpan(new ForegroundColorSpan(Color.GREEN), 10, 13,                   Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);         //擷取Drawable資源         Drawable d = getResources().getDrawable(R.drawable.icon);           d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());         //建立ImageSpan         ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);         //用ImageSpan替換文本         ss.setSpan(span, 18, 19, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);           txtInfo.setText(ss);         txtInfo.setMovementMethod(LinkMovementMethod.getInstance()); //實現文本的滾動  通常用於顯示文字，但有時候也需要在文字中夾雜一些圖片，比如QQ中就可以使用表情圖片，又比如需要的文字高亮顯示等等，如何在android中也做到這樣呢？ 記得android中有個android.text包，這裡提供了對文本的強大的處理功能。 添加圖片主要用SpannableString和ImageSpan類：      Drawable drawable = getResources().getDrawable(id);          drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());          //需要處理的文本，[smile]是需要被替代的文本          SpannableString spannable = new SpannableString(getText().toString()+"[smile]");          //要讓圖片替代指定的文字就要用ImageSpan          ImageSpan span = new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE);          //開始替換，注意第2和第3個參數表示從哪裡開始替換到哪裡替換結束（start和end）         //最後一個參數類似數學中的集合,[5,12)表示從5到12，包括5但不包括12          spannable.setSpan(span, getText().length(),getText().length()+"[smile]".length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);            setText(spannable);   將需要的文字高亮顯示：    public void highlight(int start,int end){          SpannableStringBuilder spannable=new SpannableStringBuilder(getText().toString());//用於可變字串          ForegroundColorSpan span=new ForegroundColorSpan(Color.RED);          spannable.setSpan(span, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);          setText(spannable);      }     加底線：    public void underline(int start,int end){          SpannableStringBuilder spannable=new SpannableStringBuilder(getText().toString());          CharacterStyle span=new UnderlineSpan();          spannable.setSpan(span, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);          setText(spannable);      }     組合運用：   SpannableStringBuilder spannable=new SpannableStringBuilder(getText().toString());          CharacterStyle span_1=new StyleSpan(android.graphics.Typeface.ITALIC);          CharacterStyle span_2=new ForegroundColorSpan(Color.RED);          spannable.setSpan(span_1, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);          spannable.setSpan(span_2, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);          setText(spannable);     案例：帶有\n分行符號的字串都可以用此方法顯示2種顏色       /**      * 帶有\n分行符號的字串都可以用此方法顯示2種顏色      * @param text      * @param color1      * @param color2      * @return      */      public SpannableStringBuilder highlight(String text,int color1,int color2,int fontSize){          SpannableStringBuilder spannable=new SpannableStringBuilder(text);//用於可變字串          CharacterStyle span_0=null,span_1=null,span_2;          int end=text.indexOf("\n");          if(end==-1){//如果沒有分行符號就使用第一種顏色顯示              span_0=new ForegroundColorSpan(color1);              spannable.setSpan(span_0, 0, text.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);          }else{              span_0=new ForegroundColorSpan(color1);              span_1=new ForegroundColorSpan(color2);              spannable.setSpan(span_0, 0, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);              spannable.setSpan(span_1, end+1, text.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);                            span_2=new AbsoluteSizeSpan(fontSize);//字型大小              spannable.setSpan(span_2, end+1, text.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);          }          return spannable;      }

有疑問可以留言，交流討論

複製去Google翻譯翻譯結果

使用android SpannableStringBuilder實現圖文混排，查看更多