做 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 自己去绘制图片实现居中效果，具体看：
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);
网友评论