TextView 图文混排 & 炫酷的段落级Span解析
本文作者
作者：风从影
链接：
http://www.jianshu.com/p/72d31b7da85b
本文由作者授权发布。
在使用TextView的时候，我们经常需要在TextView中进行图文混排，比如在QQ中聊天的消息中就会展现表情，比如在微博中，用户发出的微博里面经常会带有各种小图标和链接。
Android官方对TextView的图文混排提供了支持，我们可以从以下三种方式实现TextView的图文混排：
1.在TextView的XML布局文件中添加Compound Drawable属性；
2.在对TextView设置字符串时，可以设置Html类型的字符串。Html.fromHtml()方法可以对Html的字符串进行处理，从而使得Html类型的内容满足TextView的要求。在给TextView设置Html类型的内容时，还可以传入一个ImageGetter，从而对Html类型内容中的图片进行处理；
3.对TextView设置内容的时候，可以传入CharSequence类型，而一些CharSequence类型可以利用CharacterStyle进行修饰，从而展现出丰富多彩的内容。CharacterStyle拥有很多子类（BackgroundColorSpan，ClickableSpan，ImageSpan，TypefaceSpan等），可以产生出各种各样的效果。
对于以上三种形式有着不同的使用场景：
一般情况下我们希望在字符串的上、下、左、右方向添加图片，这种需求简单明确，使用第1种方式就可以了。
有时候我们希望TextView中含有不同颜色的字体，这时候可以使用第二种方式，只需要在不同颜色的字体上设置相应的颜色即可。第二种方式也可以处理TextView中的链接情况，第2中方式还可以在TextView中显示图片。
第3种方式可以对TextView中的显示内容进行各种变换，可以对字体背景进行设置，可以对字体颜色进行设置，可以在内容中加入图片，可以进行的操作非常多，但是同时相应的处理也较为复杂。
下面将会对以上的三种方式分别进行讲述，希望能够让大家更好地掌握TextView的使用。
2.1 一般情况
一般情况下，我们只需要对TextView的上下左右设置固定的图片，这时候只需要像下面一样编写XML文件就可以实现了。
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/animation"
android:drawableLeft="@drawable/rotating_loading"
android:drawableRight="@drawable/animated_wifi"
android:drawableBottom="@drawable/animated_clock"/>2.2 图片动起来
将2.1中的左、右、下三个方向的drawable转为动画drawable，则可以实现在TextView中显示动画的效果。首先我们需要得到TextView四周的drawable，判断drawable是否实现了Animatable，如果实现了则启动相应的动画效果。
private void startAnimation(TextView textView) {
Drawable[] drawables = textView.getCompoundDrawables();
for (Drawable drawable : drawables) {
if (drawable != null && drawable instanceof Animatable) {
((Animatable) drawable).start();
}
}
}
三个动画的drawable:
<!-- res/drawable/rotating_loading.xml -->
<animated-rotate
android:pivotX="50%"
android:pivotY="50%"
android:drawable="@drawable/ic_loading"
android:duration="500" />
<!-- res/drawable/animated_wifi.xml -->
<animation-list>
<item android:drawable="@drawable/ic_wifi_0"
android:duration="250" />
<item android:drawable="@drawable/ic_wifi_1"
android:duration="250" />
<item android:drawable="@drawable/ic_wifi_2"
android:duration="250" />
<item android:drawable="@drawable/ic_wifi_3"
android:duration="250" />
</animation-list>
<!-- res/drawable/animated_clock.xml -->
<animated-vector android:drawable="@drawable/clock">
<target android:name="hours"
android:animation="@anim/hours_rotation" />
<target android:name="minutes"
android:animation="@anim/minutes_rotation" />
</animated-vector>
3.1 不同字体颜色
一些情况下，TextView中可能不同的文字有着不同的颜色，这个时候处理方式2是非常适用的。
<string name="different_color_text">
<Data>
<![CDATA[今日已有<font color="#f0717e">1/font>人签到，
日榜单排在第<font color="#f0717e">1</font>名]]>
</Data>
</string>
这个时候只需要直接对TextView设置上面的内容即可，展现效果如下所示：
3.2 图片和链接
在一些情况下，TextView中含有图片和链接，这时候使用处理方式2也是个不错的选择。
Html代码：
<h1>Hello World</h1>
Here is an
[站外图片上传中……(13)]<i>octopus</i>.<br>
And here is a
<a href="http://d.android.com">link</a>
android字符串：
<string name="from_html_text">
<![CDATA[
<h1>Hello World</h1>
Here is an
[站外图片上传中……(14)]<i>octopus</i>.<br>
And here is a
<a href="http://d.android.com">link</a>.
]]>
</string>
给TextView设置内容：
String html =
getString(R.string.from_html_text);
// 让链接可点击
textView.setMovementMethod(
LinkMovementMethod.getInstance());
// ResouroceImageGetter用来处理TextView中的图片
textView.setText(Html.fromHtml(html,
new ResouroceImageGetter(this), null));
ResouroceImageGetter的作用就是根据传过来的src返回drawable，它的代码如下：
private static class ResouroceImageGetter
implements Html.ImageGetter {
// Constructor takes a Context
public Drawable getDrawable(String source) {
int path = context.getResources()
.getIdentifier(source, "drawable", BuildConfig.APPLICATION_ID);
Drawable drawable = context.getResources().getDrawable(path);
drawable.setBounds(0, 0,
drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
return drawable;
}
}
通过上面的代码就完成了TextView中链接和图片的设置，展示效果如下面所示：
需要注意的是：要让TextView里面的链接生效，需要对TextView进行设置。
textView.setMovementMethod(LinkMovementMethod.getInstance());
但是上面的代码会造成当TextView设置最大行数失败，当超过最大行数的时候会造成TextView里面的内容可以滑动，在下面的内容里面会讲解如何解决这个问题。
4.1 整体机理
TextView可以通过下面的方法设置内容，一般情况下我们会给TextView设置String类型的内容，String类型是实现了CharSequence接口的。
setText(CharSequence text)在Google的android官方网站上我们可以得到CharSequence接口的相关内容。
在这里我们需要了解spaned和spanable，其实这两个都是接口，而且spanable是继承spaned。为了方便理解，这里先讲解spanable接口。
在spanable接口里面定义了下面两个抽象方法：
setSpan(Object what, int start, int end, int flags)，在这个方法中what通常指各种类型的span（ImageSpan、URLSpan、ClickableSpan等），该方法可以将spanable里面从start到end的内容替换为指定的span类型的内容。其中flags是指设定start和end的方式，在下面的内容中会讲到。
removeSpan(Object what)，在这个方法中what也是指各种类型的span，这个方法是在spanable中移除特定的span。
关于上面提到的flags通常使用的是以下4种：
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE(前后都不包括)；
Spanned.SPAN_INCLUSIVE_EXCLUSIVE(前面包括，后面不包括)；
Spanned.SPAN_EXCLUSIVE_INCLUSIVE(前面不包括，后面包括)；
Spanned.SPAN_INCLUSIVE_INCLUSIVE(前后都包括)。
一般来说通常使用的是Spanned.SPAN_INCLUSIVE_EXCLUSIVE，这是因为这样我们就可以比较轻松地使用String的length()方法来得到end的位置。
在spaned里面提供了下面5个抽象方法：
getSpanEnd(Object tag)，这个方法用来获取一个span的结束位置。
getSpanFlags(Object tag)，这个方法用来获取这个span设置的flag。
getSpanStart(Object tag)，这个方法用来获取一个span开始的位置。
getSpans(int start, int end, Class<T> type)，这个方法用来获取从start到end的位置上所有的特定类型的span，比如说我么希望找到某一段里面所有的ClickableSpan就可以使用这个方法。
nextSpanTransition(int start, int limit, Class type)，这个方法会在你指定的文本范围内，返回下一个你指定的Span类型的开始位置，依照这个方法，我们就可以逐层扫描指定的 Span ，而不用同时考虑其他类型的Span的影响，十分有用。
接下来讲述的是SpannableString和SpannableStringBuilder两个类，这两个类实现了Spannable接口，实现了接口里面定义的方法。SpannableString和SpannableStringBuilder的关系类似于String和StringBuilder的关系。
SpannableStringBuilder和StringBuilder一样实现了Appendable接口，从而可以往里面不断append内容。在使用Span实现TextView图文混排的过程中，一般来说我们都会使用SpannableString和SpannableStringBuilder中的一个。
所以对于使用Span方式实现TextView图文混排的整体流程是：
1.创建一个SpannableString或者SpannableStringBuilder对象；
2.利用setSpan(Object what, int start, int end, int flags)方法，将SpannableString或者SpannableStringBuilder对象的某些位置的内容替换为具体类型的Span；
3.利用TextView的setText(CharSequence text)方法将SpannableString或者
SpannableStringBuilder对象进行展示。
4.2 不同类型的Span
说明：下面的内容参考：
http://flavienlaurent.com/blog/2014/01/31/spans/
以下是Span的一些规则：
如果一个Span影响字符级的文本格式，则继承CharacterStyle；
如果一个Span影响段落层次的文本格式，则实现ParagraphStyle；
如果一个Span修改字符级别的文本外观，则实现UpdateAppearance；
如果一个Span修改字符级文本度量|大小，则实现UpdateLayout。
接下来看看强大的各种Span：
ParagraphStyle是一个接口，通过查看Android源码，我们发现这个接口里面什么方法也没有定义，因此，我们可以认为，这个接口无非是标识实现这个接口的Span为段落级别的Span。
在Android源码中又继续定义了几个接口实现了ParagraphStyle接口。
LeadingMarginSpan：用来处理像word中项目符号一样的接口；
AlignmentSpan：用来处理整个段落对其的接口；
LineBackgroundSpan：用来处理一行的背景的接口；
LineHeightSpan：用来处理一行高度的接口；
TabStopSpan：用来将字符串中的"\t"替换成相应的空行；
LeadingMarginSpan
LeadingMarginSpan用来控制整个段落左边或者右边显示某些特定效果，里面有两个接口方法。
public int getLeadingMargin(boolean first);
public void drawLeadingMargin(Canvas c, Paint p,
int x, int dir,
int top, int baseline, int bottom,
CharSequence text, int start, int end,
boolean first, Layout layout);
LeadingMarginSpan2还多规定了一个方法。
public int getLeadingMarginLineCount();
第一个方法first为是否为第一行，返回值为整个段落偏移的距离。
第二个方法可以在偏移的位置里面进行各种效果绘制。
第三个方法可以控制影响的行数。
下面通过三个LeadingMarginSpan的实现来具体说明。
BulletSpan
先来看BulletSpan实现的效果，效果如下图所示：
通过上面的图片可以看见整个段落右移了一段距离，然后在移动留下的空间处绘制了一个小圆点。
具体来看代码，BulletSpan代码如下所示：
public int getLeadingMargin(boolean first) {
return 2 * BULLET_RADIUS + mGapWidth;
}
public void drawLeadingMargin
(Canvas c, Paint p, int x, int dir,
int top, int baseline, int bottom,
CharSequence text, int start, int end,
boolean first, Layout l) {
if (((Spanned) text).getSpanStart(this) == start) {
Paint.Style style = p.getStyle();
int oldcolor = 0;
if (mWantColor) {
oldcolor = p.getColor();
p.setColor(mColor);
}
p.setStyle(Paint.Style.FILL);
if (c.isHardwareAccelerated()) {
if (sBulletPath == null) {
sBulletPath = new Path();
// Bullet is slightly better to avoid
// aliasing artifacts on mdpi devices.
sBulletPath.addCircle(0.0f, 0.0f,
1.2f * BULLET_RADIUS, Direction.CW);
}
c.save();
c.translate(x + dir * BULLET_RADIUS,
(top + bottom) / 2.0f);
c.drawPath(sBulletPath, p);
c.restore();
} else {
c.drawCircle(x + dir * BULLET_RADIUS,
(top + bottom) / 2.0f, BULLET_RADIUS, p);
}
if (mWantColor) {
p.setColor(oldcolor);
}
p.setStyle(style);
}
}
第一个方法无论是否是第一行都返回了偏移距离为2 * BULLET_RADIUS + mGapWidth，因此整个段落都移动了相应的距离。
第二个方法绘制了一个圆形，((Spanned) text).getSpanStart(this) == start判断了这一行的起始位置是否是整个Span的起始位置，如果是则绘制圆形，如果把这个判断去掉，那么每一行都将绘制小圆形。
QuoteSpan
先看实现的效果，实现的效果如下所示：
QuoteSpan代码如下所示：
public int getLeadingMargin(boolean first) {
return STRIPE_WIDTH + GAP_WIDTH;
}
public void drawLeadingMargin
(Canvas c, Paint p, int x, int dir,
int top, int baseline, int bottom,
CharSequence text, int start, int end,
boolean first, Layout layout) {
Paint.Style style = p.getStyle();
int color = p.getColor();
p.setStyle(Paint.Style.FILL);
p.setColor(mColor);
c.drawRect(x, top, x + dir * STRIPE_WIDTH, bottom, p);
p.setStyle(style);
p.setColor(color);
}
上面的代码就十分清晰了，每行都偏移相应距离，然后每行都绘制矩形，就连成了一条竖线。
TextRoundSpan
如果希望做到两端文字环绕图片的效果，其实可以考虑编写Span实现LeadingMarginSpan2。
具体做法其实比较简单，相对布局中放置ImageView和TextView，然后根据ImageView的大小计算TextView需要偏移的距离和行数，整个效果就可以实现，实现的效果如下所示：
float fontSpacing
= mTextView.getPaint().getFontSpacing();
lines = (int) (finalHeight/fontSpacing);
/**
* Build the layout with LeadingMarginSpan2
*/
TextRoundSpan span
= new TextRoundSpan(lines, finalWidth +10 );
class TextRoundSpan implements
LeadingMarginSpan.LeadingMarginSpan2 {
private int margin;
private int lines;
TextRoundSpan(int lines, int margin) {
this.margin = margin;
this.lines = lines;
}
/**
* Apply the margin
*
* @param first
* @return
*/
@Override
public int getLeadingMargin(boolean first) {
if (first) {
return margin;
} else {
return 0;
}
}
@Override
public void drawLeadingMargin(
Canvas c, Paint p, int x, int dir,
int top, int baseline, int bottom, CharSequence text,
int start, int end, boolean first, Layout layout) {}
@Override
public int getLeadingMarginLineCount() {
return lines;
}
};
其实分析上面可以得出当当前行数小于等于getLeadingMarginLineCount()，getLeadingMargin(boolean first)中first的值为true。
篇幅原因，后续还有一篇用来介绍，字符级Span和自定义Span~
如果你有想学习的文章直接留言，我会整理征稿。如果你有好的文章想和大家分享欢迎投稿，直接向我投递文章链接即可。
死板、呆萌、宅、不解人意…作为一名敲代码为生的程序员，你是不是被旁人贴过太多不属于你的标签？
1024程序员节这天，100offer给你一个撕掉标签的机会：关注100offer微信号，发送一段话／一张图／一段视频／一条语音…展示你除了敲代码以外的神技能，还有最高价值1024元的“程序员兴趣基金”等你拿！