鸿洋 | 自由微信

查看原文

其他

TextView 图文混排 & 炫酷的段落级Span解析

2017-11-03

作者风从影

本文作者

作者：风从影

链接：

http://www.jianshu.com/p/72d31b7da85b

本文由作者授权发布。

1简介

在使用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的使用。

2Compound Drawable

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>

3Html Content

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里面的内容可以滑动，在下面的内容里面会讲解如何解决这个问题。

4Span方式

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：

5段落级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~

如果你有想学习的文章直接留言，我会整理征稿。如果你有好的文章想和大家分享欢迎投稿，直接向我投递文章链接即可。

ZZS

死板、呆萌、宅、不解人意…作为一名敲代码为生的程序员，你是不是被旁人贴过太多不属于你的标签？

1024程序员节这天，100offer给你一个撕掉标签的机会：关注100offer微信号，发送一段话／一张图／一段视频／一条语音…展示你除了敲代码以外的神技能，还有最高价值1024元的“程序员兴趣基金”等你拿！

bxrf的瓜

失信被执行人的孩子上学受影响吗？最高法明确：受限！

”FAN某”的离婚财产分割判决书（全文）

”FAN某”的离婚财产分割判决书（全文）

公益慈善｜“翼行天下一生守护”慈善项目捐赠仪式圆满举行！

TextView 图文混排 & 炫酷的段落级Span解析

您可能也对以下帖子感兴趣

bxrf的瓜

失信被执行人的孩子上学受影响吗？最高法明确：受限！

”FAN某”的离婚财产分割判决书（全文）

”FAN某”的离婚财产分割判决书（全文）

公益慈善｜“翼行天下 一生守护”慈善项目捐赠仪式圆满举行！

生成图片，分享到微信朋友圈

TextView 图文混排 & 炫酷的段落级Span解析

您可能也对以下帖子感兴趣

公益慈善｜“翼行天下一生守护”慈善项目捐赠仪式圆满举行！