Android开发中SpannableString的富文本显示效果代码实现

1.简介

settext(charsequence text)中接收的是charsequence。而spannablestring和spannablestringbuilder是其实现类，是可以直接赋值的。并且两者的setspan()方法可以设置一些格式对象（例如字体大小、下划线、替换为图片等），这就可以实现富文本了。

spannable实现子类：spannablestring，spannablestringbuilder（可变，类似于stringbuilder）。

spannable中定义了抽象方法：setspan(object what, int start, int end, int flags)和removespan(object what)。这两个方法实现了对字符串的灵活编辑。

其中setspan()方法包含如下参数：

参数	参数说明
what	span样式
start	样式开始的索引
end	样式结束的索引
flags	样式作用的范围

flags常用的有四种

span_inclusive_inclusive	前后都包括，在指定范围前后插入新字符，都会应用新样式
span_exclusive_exclusive	前后都不包括，在指定范围前后插入新字符，两端样式无变化
span_inclusive_exclusive	前面包括，后面不包括
span_exclusive_inclusive	后面包括，前面不包括

通常在insert方式才生效，平时不生效，具体看：explain the meaning of span flags like span_exclusive_exclusive。

2.常用span类

常用类	说明
backgroundcolorspan	背景色样式，显然可以用来设定文本的背景色
foregroundcolorspan	字体颜色样式，用于改变字体颜色
stylespan	主要由正常、粗体、斜体和同时加粗倾斜四种样式
typefacespan	设置不同的字体
imagespan	图片样式，主要用于在文本中插入图片
urlspan	可以打开一个链接
underlinespan	下划线样式
strikethroughspan	删除线样式

spannablestring其实和string一样，都是一种字符串类型，spannablestring可以直接作为textview的显示文本，不同的是spannablestring可以通过使用其方法setspan方法实现字符串各种形式风格的显示,重要的是可以指定设置的区间，也就是为字符串指定下标区间内的子字符串设置格式。

setspan(object what, int start, int end, int flags)方法需要用户输入四个参数，what表示设置的格式是什么，可以是前景色、背景色也可以是可点击的文本等等，start表示需要设置格式的子字符串的起始下标，同理end表示终了下标，flags属性就有意思了，共有四种属性：

spanned.span_inclusive_exclusive从起始下标到终了下标，包括起始下标

spanned.span_inclusive_inclusive从起始下标到终了下标，同时包括起始下标和终了下标

spanned.span_exclusive_exclusive从起始下标到终了下标，但都不包括起始下标和终了下标

spanned.span_exclusive_inclusive从起始下标到终了下标，包括终了下标

spannablestring的setspan()方法可以同时使用多个，实现多种效果叠加。

下面我们一一解读几种span常用的格式:

foregroundcolorspan

foregroundcolorspan，为文本设置前景色，效果和textview的settextcolor()类似，实现方法如下：

spannablestring spannablestring = new spannablestring("设置文字的前景色为淡蓝色");
foregroundcolorspan colorspan = new foregroundcolorspan(color.parsecolor("#0099ee"));
spannablestring.setspan(colorspan, 9, spannablestring.length(), spanned.span_inclusive_exclusive); 
textview.settext(spannablestring);

设置的区间是9到字符串的最后，也就是图中“淡蓝色”三字。

backgroundcolorspan

backgroundcolorspan，为文本设置背景色，效果和textview的setbackground()类，实现方法如下：

spannablestring spannablestring = new spannablestring("设置文字的背景色为淡绿色");
backgroundcolorspan colorspan = new backgroundcolorspan(color.parsecolor("#ac00ff30"));
spannablestring.setspan(colorspan, 9, spannablestring.length(), spanned.span_inclusive_exclusive);
textview.settext(spannablestring);

relativesizespan

relativesizespan，设置文字相对大小，在textview原有的文字大小的基础上，相对设置文字大小，实现方法如下：

spannablestring spannablestring = new spannablestring("万丈高楼平地起");

relativesizespan sizespan01 = new relativesizespan(1.2f);
relativesizespan sizespan02 = new relativesizespan(1.4f);
relativesizespan sizespan03 = new relativesizespan(1.6f);
relativesizespan sizespan04 = new relativesizespan(1.8f);
relativesizespan sizespan05 = new relativesizespan(1.6f);
relativesizespan sizespan06 = new relativesizespan(1.4f);
relativesizespan sizespan07 = new relativesizespan(1.2f);

spannablestring.setspan(sizespan01, 0, 1, spanned.span_inclusive_exclusive);
spannablestring.setspan(sizespan02, 1, 2, spanned.span_inclusive_exclusive);
spannablestring.setspan(sizespan03, 2, 3, spanned.span_inclusive_exclusive);
spannablestring.setspan(sizespan04, 3, 4, spanned.span_inclusive_exclusive);
spannablestring.setspan(sizespan05, 4, 5, spanned.span_inclusive_exclusive);
spannablestring.setspan(sizespan06, 5, 6, spanned.span_inclusive_exclusive);
spannablestring.setspan(sizespan07, 6, 7, spanned.span_inclusive_exclusive);
textview.settext(spannablestring);

strikethroughspan

strikethroughspan，为文本设置中划线，也就是常说的删除线，实现方法如下：

spannablestring spannablestring = new spannablestring("为文字设置删除线");
strikethroughspan strikethroughspan = new strikethroughspan();
spannablestring.setspan(strikethroughspan, 5, spannablestring.length(), spanned.span_inclusive_exclusive);
textview.settext(spannablestring);

看到这有没有小激动，分分钟实现天猫打折优惠效果，有木有？

underlinespan

underlinespan，为文本设置下划线，具体实现方法如下：

spannablestring spannablestring = new spannablestring("为文字设置下划线");
underlinespan underlinespan = new underlinespan();
spannablestring.setspan(underlinespan, 5, spannablestring.length(), spanned.span_inclusive_exclusive);
textview.settext(spannablestring);

superscriptspan

superscriptspan，设置上标，具体实现方法如下：

spannablestring spannablestring = new spannablestring("为文字设置上标");
superscriptspan superscriptspan = new superscriptspan();
spannablestring.setspan(superscriptspan, 5, spannablestring.length(), spanned.span_inclusive_exclusive);
textview.settext(spannablestring);

从效果图可以看出，被设置为上标的文字大小和下面的文本文字大小一样，只要我们稍加修饰，结合relativesizespan设置小字体文本作为上标，分分钟实现指数公式有木有，再也不用2^2+3^2=13这样缺乏审美的数学公式了，是不是超实用？

subscriptspan

subscriptspan，设置下标，功能与设置上标类似，不做过多描述，具体实现方法如下：

spannablestring spannablestring = new spannablestring("为文字设置下标");
subscriptspan subscriptspan = new subscriptspan();
spannablestring.setspan(subscriptspan, 5, spannablestring.length(), spanned.span_inclusive_exclusive);
textview.settext(spannablestring);

stylespan

stylespan，为文字设置风格（粗体、斜体），和textview属性textstyle类似，实现方法如下：

spannablestring spannablestring = new spannablestring("为文字设置粗体、斜体风格");
stylespan stylespan_b  = new stylespan(typeface.bold);
stylespan stylespan_i  = new stylespan(typeface.italic);
spannablestring.setspan(stylespan_b, 5, 7, spanned.span_inclusive_exclusive);
spannablestring.setspan(stylespan_i, 8, 10, spanned.span_inclusive_exclusive);
textview.sethighlightcolor(color.parsecolor("#36969696"));
textview.settext(spannablestring);

imagespan

imagespan，设置文本图片，实现方法如下：

spannablestring spannablestring = new spannablestring("在文本中添加表情（表情）");
drawable drawable = getresources().getdrawable(r.mipmap.a9c);
drawable.setbounds(0, 0, 42, 42);
imagespan imagespan = new imagespan(drawable);
spannablestring.setspan(imagespan, 6, 8, spanned.span_inclusive_exclusive);
textview.settext(spannablestring);

这一个是不是很炫酷？再加一个解析算法，将文本中特定的文本转换成特定的表情图片，分分钟实现聊天表情显示效果有木有啊朋友们！

clickablespan

clickablespan，设置可点击的文本，设置这个属性的文本可以相应用户点击事件，至于点击事件用户可以自定义，就像效果图显示一样，用户可以实现点击跳转页面的效果，具体实现方法如下：

spannablestring spannablestring = new spannablestring("为文字设置点击事件");
myclickablespan clickablespan = new myclickablespan("https://www.jianshu.com/users/dbae9ac95c78");
spannablestring.setspan(clickablespan, 5, spannablestring.length(), spanned.span_inclusive_exclusive);
textview.setmovementmethod(linkmovementmethod.getinstance());
textview.sethighlightcolor(color.parsecolor("#36969696")); 
textview.settext(spannablestring);

/***************************************************************/

class myclickablespan extends clickablespan {

    private string content;

    public myclickablespan(string content) {
        this.content = content;
    }

    @override
    public void updatedrawstate(textpaint ds) {
        ds.setunderlinetext(false);
    }

    @override
    public void onclick(view widget) {
        intent intent = new intent(mainactivity.this, otheractivity.class);
        bundle bundle = new bundle();
        bundle.putstring("content", content);
        intent.putextra("bundle", bundle);
        startactivity(intent);
    }
}

代码中我们自定义myclickablespan类，继承至clickablespan，并重写其中一些方法。ds.setunderlinetext()控制是否让可点击文本显示下划线，很明显，在上面代码中我选择了false，不显示下滑写。onclick点击事件的具体实现方法写在其中。如上代码，我们重写clickablespan的onclick方法实现activity的跳转效果，并传递跳转数据。

注意：使用clickablespan的文本如果想真正实现点击作用，必须为textview设置setmovementmethod方法，否则没有点击相应，至于sethighlightcolor方法则是控制点击是的背景色。

urlspan

urlspan，设置超链接文本，其实聪明的小伙帮在讲到clickablespan的时候就能实现超链接文本的效果了，重写onclick点击事件就行，也确实看了urlspan的，urlspan就是继承自clickablespan，也和想象中一样，就是重写了父类的onclick事件，用自带打开链接，具体实现方法如下：

spannablestring spannablestring = new spannablestring("为文字设置超链接");
urlspan urlspan = new urlspan("https://www.jianshu.com/users/dbae9ac95c78");
spannablestring.setspan(urlspan, 5, spannablestring.length(), spanned.span_inclusive_exclusive);
textview.setmovementmethod(linkmovementmethod.getinstance());
textview.sethighlightcolor(color.parsecolor("#36969696"));
textview.settext(spannablestring);

urlspanonclick事件的源码如下：

@override
public void onclick(view widget) {
    uri uri = uri.parse(geturl());
    context context = widget.getcontext();
    intent intent = new intent(intent.action_view, uri);
    intent.putextra(browser.extra_application_id, context.getpackagename());
    try {
        context.startactivity(intent);
    } catch (activitynotfoundexception e) {
        log.w("urlspan", "actvity was not found for intent, " + intent.tostring());
    }
}

除此之外，还有maskfilterspan可以实现模糊和浮雕效果，rasterizerspan可以实现光栅效果，因为以上两个使用频率不高，而且效果也不是很明显，就不做详细说明，有兴趣的小伙伴不妨去试一试。

spannablestringbuilder

应该有不少开发的小伙伴知道stringbuilder，可以使用append()方法实现字符串拼接，非常方便。同样，spannablestring中也有spannablestringbuilder，顾名思义，就是实现对，spannablestring的一个拼接效果，同样是append()方法，可以实现各种风格效果的spannablestring拼接，非常实用。