Android图文混排

这里说的图文混排可能说的有点太专业☺，其实在需求开发中可能会碰到的布局排版是这样的：

TextView前面带图片标签

如上图：“普吉...”这个TextView前面带上一个图片的标签描述，TextView的文字太多，换行之后，文字仍然要和图标左对齐。这样的布局效果用一个Imageview和TextView是不能实现的，所以思考到用一个TextView实现。要怎么实现TextView左侧图标呢？

android:drawableLeft="@drawable/ic_back"

我首先想到的是这样实现，可是是不行的！仔细想想是不是忽略了一点，原来是否经常有用到改变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);
    }

第一个参数是Span对象，图文显示的其实就是用ImageSpan替换想要显示的String。
第二个参数是要替换字符串的开始下标。
第三个参数是要替换字符串的结束下标。
第四个参数是标示位。

使用SpannableString和ImageSpan就解决了上图遇到的问题。当然图标可以在文本的任何位置，只要知道start和end的下标即可。

扩展内容

上面说到SpannableString 支持setSpan，第一个参数是一个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);  
}

Android图文混排

扩展内容

推荐阅读更多精彩内容