textview - SpannableString 文本的花式玩法

做 android 的 SpannableString 应该都知道，我想大家基本都用过，但是系统研究过的恐怕就不多了，一般大家都是用到时 baidu，google 一下的，哈哈，我也是这样的啦，这不占着今天有时间好好看一下，从各个方面再次体会一下优秀的 java API 用着是多么让人舒心，也是鞭策一下自己和优秀还有多少距离。

开头

SpannableString 从语义上是文本容器的意思，从效果看我们用 SpannableString 包裹指定文字之后可以是实现很多效果、样式，倒是没白搭起了这个名字，从这点也能再次体会到见名知意的境界

textview 可以接受 SpannableString 类型的文字，那么我们可以把 SpannableString 理解为字符串 String 的扩展类型

        var span10 = SpannableString(tx10.text)
        tx10.setText(span10)

典型的 SpannableString 应用逻辑为：


1. new 一个 SpannableString 对象，并传入初始文字
var span10 = SpannableString(tx10.text)

2. new 一个我们需要的文本效果对象，设置其中参数，这里是文字颜色效果
var backColorSpan = BackgroundColorSpan(Color.RED)

3. 通过 setSpan 方法把文本效果对象设置给 SpannableString  对象，指定起始结速位置
span2.setSpan(backColorSpan, tx01.text.indexOf("-") + 1, tx02.text.length, SpannableString.SPAN_INCLUSIVE_EXCLUSIVE)

5. 把 SpannableString  赋值给 textview
tx02.setText(span2)

好了，SpannableString 使用过程很好理解，重点是各种文本的 span 效果对用的写法，和 setSpan() 方法的理解

setSpan() 方法

setSpan() 方法有4个参数很重要

setSpan(Object what, int start, int end, int flags)

what - 文本效果
start - 文本效果起作用的起始下标
end - 结束下表
flags - 下标取值范围，有4个类型：
- Spanned.SPAN_INCLUSIVE_EXCLUSIVE - 包前不包后
- Spanned.SPAN_INCLUSIVE_INCLUSIVE - 包前也包后
- Spanned.SPAN_EXCLUSIVE_EXCLUSIVE - 不包前也不包后
- Spanned.SPAN_EXCLUSIVE_INCLUSIVE - 不包前但包后

关于 flags 我发现 SPAN_INCLUSIVE_INCLUSIVE 不起作用，和 SPAN_INCLUSIVE_EXCLUSIVE 的效果一样，都是包前不包后，所以干脆我就都用 SPAN_INCLUSIVE_EXCLUSIVE 得了

SpannableString 样式详解

我把样式都放在一起了，看着清楚些

Snip20180910_4.png

1. 前景色

什么是前景色，说白了改变文字指定位置颜色，对象类型是 ForegroundColorSpan

// 前景色
var span1 = SpannableString(tx01.text)
var forColorSpan = ForegroundColorSpan(Color.BLUE)
span1.setSpan(forColorSpan, tx01.text.indexOf("-") + 1, tx01.text.length,SpannableString.SPAN_INCLUSIVE_EXCLUSIVE)
tx01.setText(span1)

2. 背景色

注意背景色和前景色的区别，前景色改的是文字颜色，背景色改的是背景颜色，不会改文字颜色的，队形类型是 BackgroundColorSpan

// 背景色
var span2 = SpannableString(tx02.text)
var backColorSpan = BackgroundColorSpan(Color.RED)
span2.setSpan(backColorSpan, tx01.text.indexOf("-") + 1, tx02.text.length,SpannableString.SPAN_INCLUSIVE_EXCLUSIVE)
tx02.setText(span2)

这里有个自定义 BackgroundColorSpan 来实现效果的例子

利用SpannableString富文本方式设置圆角标签背景

2983970-c45ecdf7ffd29eb2.png

3. 修改文字大小，使用相对数值

什么是相对，就是指定位置的文字是其他文字的几倍，比如例子中的 1.6F，注意可以改大也可以改小，对象类型是 RelativeSizeSpan

// 相对文字大小
var span3 = SpannableString(tx03.text)
var relaSzieSpan = RelativeSizeSpan(1.6F)
span3.setSpan(relaSzieSpan, tx03.text.indexOf("-") + 1, tx03.text.length,SpannableString.SPAN_INCLUSIVE_EXCLUSIVE)
tx03.setText(span3)

4. 修改文字大小，使用绝对数值

绝对数值就是我们不再指定文字大小倍数了，而是用具体的数了，比如 26sp，当然我们需要转换单位，把 sp 转成 int，对象类型是 AbsoluteSizeSpan

// 绝对文字大小
var span31 = SpannableString(tx031.text)
val value: Int = (this@SpannableStringActivity.resources.displayMetrics.scaledDensity * 26 + 0.5f).toInt()
var absSizeSpan = AbsoluteSizeSpan(value)
span31.setSpan(absSizeSpan, tx031.text.indexOf("-") + 1, tx031.text.length,SpannableString.SPAN_INCLUSIVE_EXCLUSIVE)
tx031.setText(span31)

5. 删除线

删除线也叫中划线，没什么特别的，对象类型是 StrikethroughSpan，就是这么名字真特么难记......

// 删除线
var span4 = SpannableString(tx04.text)
var strSpan = StrikethroughSpan()
span4.setSpan(strSpan, tx04.text.indexOf("-") + 1, tx04.text.length,SpannableString.SPAN_INCLUSIVE_EXCLUSIVE)
tx04.setText(span4)

6. 下划线

下划线是很常见的需求了，对象类型是 UnderlineSpan，这个名字就比中划线的好记

// 下划线
var span5 = SpannableString(tx05.text)
var underSpan = UnderlineSpan()
span5.setSpan(underSpan, tx05.text.indexOf("-") + 1, tx05.text.length,SpannableString.SPAN_INCLUSIVE_EXCLUSIVE)
tx05.setText(span5)

7. 上标

SpannableString 支持设置多个 span ，所以这里相应的缩小了上标的大小，对象类型是 SuperscriptSpan，又是一个不好记的名字，蛋疼......

// 上标
var span6 = SpannableString(tx06.text)
var supSpan = SuperscriptSpan()
span6.setSpan(supSpan, tx06.text.indexOf("-") + 1, tx06.text.length,SpannableString.SPAN_INCLUSIVE_EXCLUSIVE)
var sizeSpan6 = RelativeSizeSpan(0.5f)
span6.setSpan(sizeSpan6, tx06.text.indexOf("-") + 1, tx06.text.length,SpannableString.SPAN_INCLUSIVE_EXCLUSIVE)
tx06.setText(span6)

8. 上标

这里我遇到问题了，下标显示不全的问题，我就是缩小了下表相应的大小也没用，不知道为啥，好在平时下标也用不到，真要是碰到了，我缩小字体大小代替下，对象类型是 SubscriptSpan，继续吐槽，不说我不舒服斯基，上标下标，这2单词怎么这么难记

// 下标
var span7 = SpannableString(tx07.text)
var subSpan = SubscriptSpan()
span7.setSpan(subSpan, tx07.text.indexOf("-") + 1, tx07.text.length,SpannableString.SPAN_INCLUSIVE_EXCLUSIVE)
tx07.setText(span7)

9. 斜体、粗体

这个没啥说的了，Typeface 里还有一个斜粗体效果，对象类型是 StyleSpan

// 斜体、粗体
var span8 = SpannableString(tx08.text)
var stypeSpan1 = StyleSpan(Typeface.BOLD)
var stypeSpan2 = StyleSpan(Typeface.ITALIC)
span8.setSpan(stypeSpan1, tx08.text.indexOf("-") + 1, tx08.text.indexOf("、"),SpannableString.SPAN_INCLUSIVE_EXCLUSIVE)
span8.setSpan(stypeSpan2, tx08.text.indexOf("、") + 1, tx08.text.length,SpannableString.SPAN_INCLUSIVE_EXCLUSIVE)
tx08.setText(span8)

10. 图片

图片这里要重点说下，和我们预想的一样，图片不是插入进来的，和 textview 有本质区别。SpannableString 的图片是替代的指定位置，指定个数的问题，图片的宽要是超过替代文字的宽度，那么图片就会遮挡后面文字，所以这里必须注意，例子里面我临时插入了 4个k，才把图片显示全的

还有一点，不论图片资源是 vector，还是 drawable ，必须显式的指定图片大小才行，要不 SpannableString 显示不出图片来

// 图片
var value9 = StringBuilder(tx09.text)
val drawable = resources.getDrawable(R.mipmap.ic_launcher)
drawable.setBounds(0, 0, 80, 80)
var imageSpan = ImageSpan(drawable)

value9.insert(value9.indexOf("-") + 1, "kkkk")
var span9 = SpannableString(value9)
span9.setSpan(imageSpan, value9.indexOf("k"), value9.indexOf("k") + 4,SpannableString.SPAN_INCLUSIVE_EXCLUSIVE)
tx09.setText(span9)

对于大图，我们会面临图片居中的问题，ImageSpan 是文字基线对齐的，所以要让图片居中我们需要继承 ImageSpan 自己去绘制图片实现居中效果，具体看：

Android富文本实现图文混排

android 传统实现自定义 Emoji 表情的方法：

Android 千变万化 TextView：神奇的 SpannableString

11. 可点击区域

可点击区域默认带下划线，使用系统主题颜色。思路是让文本关联一个点击事件对象，注意必须写 setMovementMethod() 方法，要不不起作用

// 可点击区域
var span10 = SpannableString(tx10.text)
span10.setSpan(MyClickSpan(), tx10.text.indexOf("-") + 1, tx10.text.length,SpannableString.SPAN_INCLUSIVE_EXCLUSIVE)
tx10.setMovementMethod(LinkMovementMethod.getInstance())
tx10.setText(span10)

    inner class MyClickSpan : ClickableSpan() {

        override fun updateDrawState(ds: TextPaint) {
            // 不显示下划线
            ds.isUnderlineText = false
        }

        override fun onClick(widget: View?) {
            var intent: Intent = Intent(this@SpannableStringActivity, ClickSpanActivity::class.java)
            this@SpannableStringActivity.startActivity(intent)
        }

    }

找到一篇使用正则找电话，改颜色，加拨打电话的例子，挺好的：

安卓实现订单跟踪中含手机号码的文字设置颜色和设置单独的点击事件

12. 超链接

看过上面的可点击区域，这个超链接就能理解了吧，注意 http:// 协议必须写啊，URLSpan 使用的系统自带的浏览器

// 超链接
var span11 = SpannableString(tx11.text)
var urlSpan = URLSpan("http://www.sina.com")
span11.setSpan(urlSpan, tx11.text.indexOf("-") + 1, tx11.text.length,SpannableString.SPAN_INCLUSIVE_EXCLUSIVE)
tx11.setMovementMethod(LinkMovementMethod.getInstance())
tx11.setText(span11)

13 文字缩进

这个上面的图没有，大家看下面的图。这里用到的是 LeadingMarginSpan.Standard 这个类

SpannableString spannableString = new SpannableString("文字内容");
// 0 第一行缩进像素，30 非第一行缩进像素
LeadingMarginSpan.Standard span= new LeadingMarginSpan.Standard(0, 30);
spannableString.setSpan(span, 0, spannableString.length(),SpannableString.SPAN_INCLUSIVE_INCLUSIVE);
textview.setText(spannableString);

14 颜色选择器

Textview 上的颜色选择器我们不仅可以设置背景色的，文字颜色一样可以设置，这个就是：ColorStateList

4625917-0f99eec051983179.png

<?xml version="1.0" encoding="utf-8"?>
<selector 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:enterFadeDuration="300" 
    android:exitFadeDuration="300">

    <item android:state_pressed="true" android:color="#ffffff"/>
    <item android:color="#000000"/>
</selector>

ColorStateList csl = null;
try {
    =XmlResourceParser xrp = getResources().getXml(R.drawable.button_text);
    csl = ColorStateList.createFromXml(getResources(), xrp);
} catch (XmlPullParserException e) {
    e.printStackTrace();
} catch (IOException e) {
    e.printStackTrace();
}
btn.setTextColor(csl);

参考资料：

用SpannableString打造绚丽多彩的文本显示效果