会变色的TextView

近几年来,网络直播可以说是非常火热。网红也是遍地花开,其中不少主播在 PC 端做直播,也有很多主播用手机来直播。主播和观众经常需要互动交流,所以文字交流必不可少。在公司的 APP 中有类似如下图的聊天文字效果。一条聊天信息中,发送者名字的颜色是会随机改变,而内容信息是固定一个颜色。

你认为先实现这方法很简单,使用两个 TextView 控件就可以搞定完事。左边的 TextView 放置名字,右边的 TextView 放置内容。这种方法是可以实现,那有没有更好的方法呢?答案是肯定的。本文的主角就是 SpannableString 。

1

介绍 SpannableString

SpannableString 继承于 SpannableStringInternal,同时实现了 CharSequence, GetChars, Spannable 这几个接口。它的作用是能够改变字符串的字体颜色,设置字符串的字体样式,为字符串添加下划线等。

2

使用 SpannableString

SpannableString 用法可以分为三部走: 首先实例化一个 SpannableString 对象,然后为其设置样式,最后将 spanStirng 填充到 TextView 中。具体可以看下面的代码:

spanString 最主要也是我们最常用的方法 setSpan(Object what, int start, int end, int flags)。它需要传入四个参数,这四个参数作用的分别是:

what 为想要设置的样式类。 start 为样式生效的起始位置。因为 SpannableString 是实现了 CharSequence 接口,所以是按照字符来计算的。 end 为样式生效的结束位置。 flags 为标记,标记样式生效的范围。

what 有以下这些类:

样式类

效果说明

ForegroundColorSpan

文本颜色(前景色)

BackgroundColorSpan

背景色

ClickableSpan

设置文本可点击

DynamicDrawableSpan

设置图片,基于文本基线或底部对齐

MaskFilterSpan

修饰效果,如模糊(BlurMaskFilter)、浮雕(EmbossMaskFilter)

MetricAffectingSpan

父类,一般不用

RasterizerSpan

光栅效果

StrikethroughSpan

删除线(中划线)

SuggestionSpan

相当于占位符

UnderlineSpan

下划线

AbsoluteSizeSpan

绝对大小(文本字体)

ImageSpan

图片

RelativeSizeSpan

相对大小(文本字体)

ReplacementSpan

父类,一般不用

ScaleXSpan

基于 x 轴缩放

StyleSpan

字体样式:粗体、斜体等

SubscriptSpan

下标(数学公式会用到)

SuperscriptSpan

上标(数学公式会用到)

TextAppearanceSpan

文本外貌(包括字体、大小、样式和颜色)

TypefaceSpan

文本字体

URLSpan

文本超链接

flags 也有四个参数,分别是:

1) Spannable.SPAN_EXCLUSIVE_EXCLUSIVE:前后都不包括,即在指定范围的前面和后面插入新字符都不会应用新样式 2) Spannable.SPAN_EXCLUSIVE_INCLUSIVE:前面不包括,后面包括。即仅在范围字符的后面插入新字符时会应用新样式 3) Spannable.SPAN_INCLUSIVE_EXCLUSIVE:前面包括,后面不包括。 4) Spannable.SPAN_INCLUSIVE_INCLUSIVE:前后都包括。

3

代码实现

这么多消息,当然需要一个列表来呈现。我选择 RecycleView 来显示数据,它的 item 布局中放置一个 TextView。

在 Adapter 的绑定视图的方法中,使用 SpannableString 为要显示的字符串设置效果

小贴士

因微信不支持站内链接, 请点击【阅读原文】阅读完整的代码

作者:猴哥,公众号:极客猴。爱好读书,喜欢钻研技术,梦想成为文艺青年的IT Boy。

- END -

原文发布于微信公众号 - 极客猴(Geek_monkey)

原文发表时间:2017-05-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏木子昭的博客

块元素, 内联元素, 内联块元素块元素(默认为父级宽度的100%,支持全部样式):内联元素(不支持宽高, 不支持margin上下, 不支持padding上下)内联块元素(从其它元素转换而来, disp

块元素(默认为父级宽度的100%,支持全部样式): body h1 , h2, h3, h4, h5, h6 p div li (条目) ul(定义无序列表, ...

37460
来自专栏Coco的专栏

浅析inline-block--使用inline-block创建布局

20470
来自专栏Pythonista

Golang之(for)用法

地鼠每次选好了一块地,打洞,坚持半个月发现地下有块石头,然后他就想绕路了。。。殊不知绕路只会让它离成果越来越远

17940
来自专栏听雨堂

在Mapx中设置单个图元的样式

        前几天研究了一下,感觉都快忘了。虽然去啃帮助仍然可以把这些东西啃出来,但有点烦。把记忆的东西零星整理一下: Mapx4不支持具体到图元的样式的指...

19670
来自专栏前端说吧

CSS-垂直|水平居中问题的解决方法总结

60560
来自专栏菜鸟计划

css渲染(二) 文本

一、文本样式 首行缩进  text-indent   首行缩进是将段落的第一行缩进,这是常用的文本格式化效果。一般地,中文写作时开头空两格。[注意]该属性可以...

36670
来自专栏柠檬先生

css3 3d变换和动画——回顾

1.transform-style 属性指定嵌套原始是怎样在三维空间中呈现。   语法:transform-style: flat | preserve-3d ...

20670
来自专栏HTML5学堂

详析获取标签

在前几期的文章当中,我们学习了JS的基础语法,它是我们学习其它知识点的重要前提。小编也与大家分享了JS逻辑与DOM的相结合,并带着大家去实现了一些简单的页面交互...

32990
来自专栏不会写文章的程序员不是好厨师

全栈第一步-CSS基础前言CSS基础总结

作为一名后端狗,也有一个全栈梦。前端工程师第一步,CSS的基础得打好。本文仅用于记录上周学习CSS的过程,文中对于CSS知识点可能存在理解错误之处。

9820
来自专栏coding for love

CSS入门5-选择器

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

9530

扫码关注云+社区

领取腾讯云代金券