SpannableString 你应该知道的那些效果显示

最新推荐文章于 2019-07-11 17:31:20 发布

writeapoemforyou

最新推荐文章于 2019-07-11 17:31:20 发布

阅读量352

点赞数

前言

上次看到一款学习的 App，有这样一个功能，在一个 TextView 中有一段英文，点击英文单词通过语音朗读出来。语音先不考虑，怎么去实现 TextView点击获取每个单词的内容的呢？

肯定是用SpannableString去实现的呗，不然你今天讲它干嘛。嘿嘿，我说的对不对？

答案是肯定的，由于惯性我们先来看看效果图：

我这里没有获取每个单词，而是获取的每段句子。效果图上也展示了一些其他的SpannableString效果，大多数可能你已经见过了。那么你肯定会问SpannableString是什么，SpannableString是一种字符串类型，可以通过使用其方法setSpan方法实现字符串各种形式风格的显示。

具体案例

setSpan方法预览：

<code class="hljs sql has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">setSpan(Object what, int <span class="hljs-operator" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">start</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">end</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> flags)</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

what ：文本格式，可以设置成前景色，背景色，下划线，中划线，模糊等
start ：字符串设置格式的起始下标
end ：字符串设置格式结束下标
flags ：标识

flags 常用的几种属性：

Spanned.SPAN_INCLUSIVE_EXCLUSIVE 从起始下标到结束下标，包括起始下标不包含结束坐标
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE 从起始下标到结束下标，但都不包括起始下标和结束下标
Spanned.SPAN_INCLUSIVE_INCLUSIVE 从起始下标到终了下标，同时包括起始下标和结束下标
Spanned.SPAN_EXCLUSIVE_INCLUSIVE 从起始下标到终了下标，包括结束下标不包含起始坐标

TextView点击获取部分内容

首先我们先来看TextView点击获取部分内容，对TextView设置Spannable，设置每段单词的响应方法getEachParagraph()

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> testText<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setText</span>(getResources()<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getString</span>(R<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.string</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.text</span>), TextView<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.BufferType</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.SPANNABLE</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
 getEachParagraph(testText)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
 testText<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setMovementMethod</span>(LinkMovementMethod<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getInstance</span>())<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

点击响应方法getEachParagraph()：

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//paragraph</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">getEachParagraph</span>(TextView textView) {
    Spannable spans = (Spannable) textView.getText();
    Integer[] indices = getIndices(
            textView.getText().toString().trim(), <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">','</span>);
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> start = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> end = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// recycle</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> i = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>; i <= indices.length; i++) {
        ClickableSpan clickSpan = getClickableSpan();
       <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//setspan</span>
        end = (i < indices.length ? indices[i] : spans.length());
        spans.setSpan(clickSpan, start, end,
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        start = end + <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>;
    }
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//改变选中文本的高亮颜色</span>
    textView.setHighlightColor(Color.BLUE);
}

<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//click</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> ClickableSpan <span class="hljs-title" style="box-sizing: border-box;">getClickableSpan</span>() {
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> ClickableSpan() {
        <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onClick</span>(View widget) {
            TextView tv = (TextView) widget;
            String s = tv
                    .getText()
                    .subSequence(tv.getSelectionStart(),
                            tv.getSelectionEnd()).toString();
            Log.e(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"onclick--:"</span>, s);
        }
        <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">updateDrawState</span>(TextPaint ds) {
            ds.setColor(Color.BLACK);
            ds.setUnderlineText(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>);
        }
    };
}

<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//array</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> Integer[] <span class="hljs-title" style="box-sizing: border-box;">getIndices</span>(String s, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">char</span> c) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> pos = s.indexOf(c, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);
        List<Integer> indices = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> ArrayList<Integer>();
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">while</span> (pos != -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>) {
            indices.add(pos);
            pos = s.indexOf(c, pos + <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>);
        }
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> (Integer[]) indices.toArray(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Integer[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>]);
    }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li></ul>

首先将TextView内容转换为Spannable对象；然后通过getIndices方法将文本内容通过字符c获取每段索引数组；然后为每段添加ClickableSpan；最后onClick方法里面获取每段内容。

前景色ForegroundColorSpan

前景色等同于setTextColor，具体实现如下：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">SpannableString spannableString = new SpannableString(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"设置文字的前景色"</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.parseColor</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#0099EE"</span>))<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setSpan</span>(colorSpan, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>, spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.length</span>(), Spanned<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.SPAN</span>_INCLUSIVE_INCLUSIVE)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
mTv<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setText</span>(spannableString)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

看看效果展示：

起始下标包含5，结束下标spannableString长度不包含。

背景色BackgroundColorSpan

背景色等同于setBackgroundColor，具体实现如下：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">SpannableString spannableString = new SpannableString(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"设置文字的背景色"</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
BackgroundColorSpan colorSpan = new BackgroundColorSpan(Color<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.parseColor</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#AC00FF30"</span>))<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setSpan</span>(colorSpan, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>, spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.length</span>(), Spanned<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.SPAN</span>_INCLUSIVE_EXCLUSIVE)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
mTv<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setText</span>(spannableString)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

效果图展示：

RelativeSizeSpan

先来看看效果图：

我还清晰的记得刚开始做项目那会，做出这样的效果图需要2个TextView，9月一个；22日一个，现在想想真憋屈，要是相对字体大小在文本中间我不是要3个TextView，那真的要崩溃。

接着看看具体实现：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> SpannableString spannableString = new SpannableString(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"9月22日"</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
 RelativeSizeSpan sizeSpan = new RelativeSizeSpan(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.0</span>f)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
 spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setSpan</span>(sizeSpan, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>, Spanned<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.SPAN</span>_INCLUSIVE_EXCLUSIVE)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
 mTv<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setText</span>(spannableString)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

中划线StrikethroughSpan

中划线用得比较多的就是过时的价格，看看它的具体实现：

方法一：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">SpannableString spannableString = new SpannableString(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"我是文本中划线"</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
StrikethroughSpan strikethroughSpan = new StrikethroughSpan()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setSpan</span>(strikethroughSpan, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>, spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.length</span>(), Spanned<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.SPAN</span>_INCLUSIVE_EXCLUSIVE)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
mTv<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setText</span>(spannableString)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

方法二：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">
  mTv<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getPaint</span>()<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setFlags</span>(Paint<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.STRIKE</span>_THRU_TEXT_FLAG | Paint<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.ANTI</span>_ALIAS_FLAG)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;  // 设置中划线并加清晰</span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

我们可以通过调用mTv.getPaint().setFlags(0); // 取消设置的的划线

效果图登场：

下滑线UnderlineSpan

实现下滑线也有两种方法，同上：

方法一：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">
SpannableString spannableString = new SpannableString(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"我是文本下划线"</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
UnderlineSpan underlineSpan = new UnderlineSpan()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setSpan</span>(underlineSpan, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>, spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.length</span>(), Spanned<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.SPAN</span>_INCLUSIVE_EXCLUSIVE)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
mTv<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setText</span>(spannableString)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

方法二：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">
 mTv<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getPaint</span>()<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setFlags</span>(Paint<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.UNDERLINE</span>_TEXT_FLAG)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">; //下划线</span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

效果图奉上：

上标SuperscriptSpan

上标加上前景色可以设计出未读消息效果，我们一起来看看它的实现：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">
SpannableString spannableString = new SpannableString(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"你有新消息了"</span> + <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"●"</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
SuperscriptSpan superscriptSpan = new SuperscriptSpan()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.parseColor</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#FF0000"</span>))<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setSpan</span>(colorSpan, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span>, spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.length</span>(), Spanned<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.SPAN</span>_INCLUSIVE_EXCLUSIVE)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setSpan</span>(superscriptSpan, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span>, spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.length</span>(), Spanned<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.SPAN</span>_INCLUSIVE_EXCLUSIVE)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
mTv<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setText</span>(spannableString)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

以前看看文本未读消息感觉很高大上，还在苦苦追寻是怎么实现的，其实它非常easy下标还可以用于数学公式。

效果图：

下标SubscriptSpan

当然有了上标就会出现下标：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">
SpannableString spannableString = new SpannableString(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"注释1"</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
SubscriptSpan subscriptSpan = new SubscriptSpan()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setSpan</span>(subscriptSpan, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>, spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.length</span>(), Spanned<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.SPAN</span>_INCLUSIVE_EXCLUSIVE)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
mTv<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setText</span>(spannableString)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

效果图：

设置风格（粗体、斜体）StyleSpan

直接上代码：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">
SpannableString spannableString = new SpannableString(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"为文字设置粗体,斜体风格"</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
StyleSpan styleSpan_B = new StyleSpan(Typeface<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.BOLD</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
StyleSpan styleSpan_I = new StyleSpan(Typeface<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.ITALIC</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setSpan</span>(styleSpan_B, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">7</span>, Spanned<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.SPAN</span>_INCLUSIVE_EXCLUSIVE)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setSpan</span>(styleSpan_I, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">8</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>, Spanned<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.SPAN</span>_INCLUSIVE_EXCLUSIVE)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
mTv<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setText</span>(spannableString)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

效果图贴上：

ImageSpan

做过IM相关需求的童鞋，都对这个不会陌生，它的身影在聊天App软件中随处可见：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">
SpannableString spannableString = new SpannableString(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"在文本中添加xx"</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
Drawable drawable = getResources()<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getDrawable</span>(R<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.drawable</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.mini</span>_face_nine)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
int drawHeight = drawable<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getMinimumHeight</span>()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
drawable<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setBounds</span>(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, drawHeight, drawHeight)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
ImageSpan imageSpan = new ImageSpan(drawable)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setSpan</span>(imageSpan, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">8</span>, Spanned<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.SPAN</span>_INCLUSIVE_EXCLUSIVE)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
mTv<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setText</span>(spannableString)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>

setBounds方法设置图片的边框大小，使图片与文本居中对齐。

效果图一览：

ClickableSpan

从名字上就可以知道和点击响应相关的：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">
SpannableString spannableString = new SpannableString(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"为文字设置点击事件"</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setSpan</span>(new ClickableSpan() {
    @Override
    public void onClick(View view) {
        Snackbar<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.make</span>(view, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"你点击了我"</span>, Snackbar<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.LENGTH</span>_SHORT)<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.show</span>()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
        Uri uri = Uri<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.parse</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"http://www.baidu.com"</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
        Intent intent = new Intent(Intent<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.ACTION</span>_VIEW, uri)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
        intent<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.putExtra</span>(Browser<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.EXTRA</span>_APPLICATION_ID, _mActivity<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getPackageName</span>())<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
        try {
            _mActivity<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.startActivity</span>(intent)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
        } catch (ActivityNotFoundException e) {
            Log<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.e</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"--ClickableSpan--"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Actvity was not found for intent, "</span> + intent<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.toString</span>())<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
        }
    }
    @Override
    public void updateDrawState(TextPaint ds) {
        ds<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setColor</span>(Color<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.parseColor</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#abc123"</span>))<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
        ds<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setUnderlineText</span>(true)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
    }
}, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>, spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.length</span>(), Spanned<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.SPAN</span>_INCLUSIVE_EXCLUSIVE)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
mTv<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setMovementMethod</span>(LinkMovementMethod<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getInstance</span>())<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
mTv<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setHighlightColor</span>(Color<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.parseColor</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#abc123"</span>))<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
mTv<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setText</span>(spannableString)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li></ul>

为文本设置点击事件并且跳转网址。

效果图：

URLSpan

URLSpan跳转网址：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">
SpannableString spannableString = new SpannableString(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"为文字设置超链接"</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
URLSpan urlSpan = new URLSpan(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"http://www.baidu.com/"</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setSpan</span>(urlSpan, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>, spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.length</span>(), Spanned<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.SPAN</span>_INCLUSIVE_EXCLUSIVE)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
mTv<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setMovementMethod</span>(LinkMovementMethod<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getInstance</span>())<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
mTv<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setHighlightColor</span>(Color<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.parseColor</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#ff0000"</span>))<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
mTv<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setText</span>(spannableString)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

效果图：

模糊BlurMaskFilter

比较简单的用法，直接上代码：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">
SpannableString spannableString = new SpannableString(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"为文字设置模糊"</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
MaskFilterSpan maskFilterSpan = new MaskFilterSpan(new BlurMaskFilter(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>, BlurMaskFilter<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.Blur</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.NORMAL</span>))<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setSpan</span>(maskFilterSpan, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>, spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.length</span>(), Spanned<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.SPAN</span>_INCLUSIVE_EXCLUSIVE)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>

mTv<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setText</span>(spannableString)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

构造方法：

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">
BlurMaskFilter(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> radius, Blur style)
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

radius 模糊半径
style 风格

style为枚举类型：

BlurMaskFilter.Blur.NORMAL 默认类型，模糊内外边界

BlurMaskFilter.Blur.INNER 内部模糊

BlurMaskFilter.Blur.OUTER 外部模糊

BlurMaskFilter.Blur.SOLID 在边界内绘制固体，模糊

浮雕EmbossMaskFilter

<code class="hljs cpp has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">
SpannableString spannableString = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> SpannableString(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"为文字设置浮雕"</span>);
MaskFilterSpan maskFilterSpan = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> MaskFilterSpan(
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> EmbossMaskFilter(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span>[]{<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>}, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5f</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1f</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1f</span>));
spannableString.setSpan(maskFilterSpan, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

构造方法：

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**
     * Create an emboss maskfilter
     *
     *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> direction  array of 3 scalars [x, y, z] specifying the direction of the light source
     *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> ambient    0...1 amount of ambient light
     *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> specular   coefficient for specular highlights (e.g. 8)
     *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> blurRadius amount to blur before applying lighting (e.g. 3)
     *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @return</span>           the emboss maskfilter
     */</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-title" style="box-sizing: border-box;">EmbossMaskFilter</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span>[] direction, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> ambient, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> specular, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> blurRadius) 
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>

//direction 是float数组，定义长度为3的数组标量[x,y,z]，来指定光源的方向
// ambient 取值在0到1之间，定义背景光或者说是周围光
// specular 定义镜面反射系数。
// blurRadius 模糊半径。

效果图：

光栅LayerRasterizer

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">
SpannableString spannableString = new SpannableString(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"为文字设置光栅"</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
LayerRasterizer layerRasterizer = new LayerRasterizer()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
layerRasterizer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.addLayer</span>(new Paint(Color<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.CYAN</span>), <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
RasterizerSpan rasterizerSpan = new RasterizerSpan(layerRasterizer)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setSpan</span>(rasterizerSpan, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>, spannableString<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.length</span>(), Spanned<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.SPAN</span>_INCLUSIVE_EXCLUSIVE)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
mTv<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setText</span>(spannableString)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

addLayer方法：

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">
addLayer(Paint paint, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> dx, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> dy) <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//dx,dy便宜位置</span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

效果图：

看了这么多效果，你应该知道的这些效果显示。

后续

String有StringBuilder用于字符串的拼接；那么SpannableString也有SpannableStringBuilder用于拼接SpannableString，可以把各种风格效果拼接在一起。

当然文中有什么描述错误，不当的地方，还请指出，欢迎关注后续博客交流，谢谢大家。

尽请关注

writeapoemforyou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpannableString 你应该知道的那些效果显示

前言上次看到一款学习的 App，有这样一个功能，在一个 TextView 中有一段英文，点击英文单词通过语音朗读出来。语音先不考虑，怎么去实现 TextView点击获取每个单词的内容的呢？肯定是用SpannableString去实现的呗，不然你今天讲它干嘛。嘿嘿，我说的对不对？答案是肯定的，由于惯性我们先来看看效果图：我这里没有获取每个单词，而是获取的每段句
复制链接

扫一扫