美文网首页
textview - SpannableString 文本的花式

textview - SpannableString 文本的花式

作者: 前行的乌龟 | 来源:发表于2018-09-10 19:38 被阅读80次

    做 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 来实现效果的例子

    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);
    

    参考资料:


    相关文章

      网友评论

          本文标题:textview - SpannableString 文本的花式

          本文链接:https://www.haomeiwen.com/subject/yyasgftx.html