Android圖文混排

這里說的圖文混排可能說的有點太專業(yè)?,其實在需求開發(fā)中可能會碰到的布局排版是這樣的:


TextView前面帶圖片標簽

如上圖:“普吉...”這個TextView前面帶上一個圖片的標簽描述,TextView的文字太多,換行之后,文字仍然要和圖標左對齊。這樣的布局效果用一個Imageview和TextView是不能實現(xiàn)的,所以思考到用一個TextView實現(xiàn)。要怎么實現(xiàn)TextView左側圖標呢?

android:drawableLeft="@drawable/ic_back"

我首先想到的是這樣實現(xiàn),可是是不行的!仔細想想是不是忽略了一點,原來是否經常有用到改變TextView某部分文本字體的大小或顏色的。

SpannableString 可擴展的字符串

好了,說了這么多,也是自己從遇到問題到解決的一些過程思考。下面就看怎么解決吧:

SpannableString spannableString = new SpannableString("圖片標簽普吉阿賽克...");
Drawable drawable = getResources().getDrawable(R.drawable.icon_lable);
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
ImageSpan span = new ImageSpan(drawable, ImageSpan.ALIGN_BOTTOM);
spannableString.setSpan(span, 0, 4, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
mNameTv.setText(spannableString);

SpannableString 支持setSpan方法

public void setSpan(Object what, int start, int end, int flags) {
        super.setSpan(what, start, end, flags);
    }
  • 第一個參數(shù)是Span對象,圖文顯示的其實就是用ImageSpan替換想要顯示的String。
  • 第二個參數(shù)是要替換字符串的開始下標。
  • 第三個參數(shù)是要替換字符串的結束下標。
  • 第四個參數(shù)是標示位。

使用SpannableString和ImageSpan就解決了上圖遇到的問題。當然圖標可以在文本的任何位置,只要知道start和end的下標即可。


擴展內容

上面說到SpannableString 支持setSpan,第一個參數(shù)是一個Object,像設置文本大小和顏色一樣還有其他的span:

/** 
* 超鏈接 
*/  
private void addUrlSpan() {  
    SpannableString spanString = new SpannableString("超鏈接");  
    URLSpan span = new URLSpan("tel:18889899898");  
    spanString.setSpan(span, 0, 3, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);  
    tv.append(spanString);  
}  
  
  
/** 
* 文字背景顏色 
*/  
private void addBackColorSpan() {  
    SpannableString spanString = new SpannableString("字體背景顏色");  
    BackgroundColorSpan span = new BackgroundColorSpan(Color.YELLOW);  
    spanString.setSpan(span, 0, 3, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);  
    tv.append(spanString);  
}  
  
  
/** 
* 文字顏色 
*/  
private void addForeColorSpan() {  
    SpannableString spanString = new SpannableString("字體顏色");  
    ForegroundColorSpan span = new ForegroundColorSpan(Color.BLUE);  
    spanString.setSpan(span, 0, 3, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);  
    tv.append(spanString);  
}  
  
  
/** 
* 字體大小 
*/  
private void addFontSpan() {  
    SpannableString spanString = new SpannableString("字體大小");  
    AbsoluteSizeSpan span = new AbsoluteSizeSpan(18);  
    spanString.setSpan(span, 0, 2, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);  
    tv.append(spanString);  
}  
  
  
/** 
* 粗體,斜體 
*/  
private void addStyleSpan() {  
    SpannableString spanString = new SpannableString("Hello World");  
    StyleSpan span = new StyleSpan(Typeface.BOLD_ITALIC);  
    spanString.setSpan(span, 0, 2, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);  
    tv.append(spanString);  
}  
  
  
/** 
* 刪除線 
*/  
private void addStrikeSpan() {  
    SpannableString spanString = new SpannableString("刪除線");  
    StrikethroughSpan span = new StrikethroughSpan();  
    spanString.setSpan(span, 0, 3, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);  
    tv.append(spanString);  
}  
  
/** 
* 下劃線 
*/  
private void addUnderLineSpan() {  
    SpannableString spanString = new SpannableString("下劃線");  
    UnderlineSpan span = new UnderlineSpan();  
    spanString.setSpan(span, 0, 3, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);  
    tv.append(spanString);  
}  
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 在使用TextView的時候,我們經常需要在TextView中進行圖文混排,比如在QQ中聊天的消息中的表情,底部t...
    Ruheng閱讀 34,125評論 3 127
  • 前言 工作找完了,已經干了兩個星期。雖然經常加班,不過相比之前的工作,現(xiàn)在過得更加充實、更有意義?,F(xiàn)在有點空閑時間...
    帶心情去旅行閱讀 73,815評論 42 237
  • Xcode8 更新好多新特性,其中就增加了好多以前需要安裝插件才能實現(xiàn)的功能。如下文要說到的 Color Lite...
    Tasuka閱讀 711評論 1 3
  • 出門在外,實在不知道吃什么,那就找個店吃餃子吧。再不好吃的餃子,熱氣騰騰的,總有一股家的味道。
    優(yōu)優(yōu)紅瓷閱讀 269評論 0 0
  • 靜榕clytze 假如,時光可以倒流,你愿意回到什么時刻? 假如,時光可以倒流,我愿意回到初中。 初中,或許是我人...
    簡以兮閱讀 451評論 1 3

友情鏈接更多精彩內容