绝大多数情况我们用 TextView 只是单纯地显示一个文本;
但是简单的 TextView 也能千变万化显示出各种效果,这一切都要归功于 SpannableString;
今天我们就来讲解;
一、SpannableString介绍
SpannableString其实和String一样,都是一种字符串类型,同样TextView也可以直接设置SpannableString作为显示文本,不同的是SpannableString可以通过使用其方法setSpan方法实现字符串各种形式风格的显示,重要的是可以指定设置的区间,也就是为字符串指定下标区间内的子字符串设置格式;
setSpan(Object what, int start, int end, int flags)方法需要用户输入四个参数,what表示设置的格式是什么,可以是前景色、背景色也可以是可点击的文本等等,start表示需要设置格式的子字符串的起始下标,同理end表示终了下标,flags属性就有意思了,共有四种属性:
- Spanned.SPAN_INCLUSIVE_EXCLUSIVE 从起始下标到终了下标,包括起始下标
- Spanned.SPAN_INCLUSIVE_INCLUSIVE 从起始下标到终了下标,同时包括起始下标和终了下标
- Spanned.SPAN_EXCLUSIVE_EXCLUSIVE 从起始下标到终了下标,但都不包括起始下标和终了下标
- Spanned.SPAN_EXCLUSIVE_INCLUSIVE 从起始下标到终了下标,包括终了下标
SpannableString可以实现的效果
- BackgroundColorSpan 背景色;
- ClickableSpan 文本可点击,有点击事件;
- ForegroundColorSpan 文本颜色(前景色);
- MaskFilterSpan 修饰效果,如模糊(BlurMaskFilter)、浮雕(EmbossMaskFilter);
- MetricAffectingSpan 父类,一般不用;
- RasterizerSpan 光栅效果;
- StrikethroughSpan 删除线(中划线);
- SuggestionSpan 相当于占位符;
- UnderlineSpan 下划线;
- AbsoluteSizeSpan 绝对大小(文本字体);
- DynamicDrawableSpan 设置图片,基于文本基线或底部对齐;
- ImageSpan 图片;
- RelativeSizeSpan 相对大小(文本字体);
- ReplacementSpan 父类,一般不用;
- ScaleXSpan 基于x轴缩放;
- StyleSpan 字体样式:粗体、斜体等;
- SubscriptSpan 下标(数学公式会用到);
- SuperscriptSpan 上标(数学公式会用到);
- TextAppearanceSpan 文本外貌(包括字体、大小、样式和颜色);
- TypefaceSpan 文本字体;
- URLSpan 文本超链接;
二、效果实现
1、绝对大小
AbsoluteSizeSpan 就是构建绝对大小的类,它有两个参数,第一个表示字体大小,第二个表示是否使用 DIP,false 的话单位就是 px,true 的话单位就是 dp;
- SpannableString ss = new SpannableString(txAbsoluteSize.getText());
- ss.setSpan(new AbsoluteSizeSpan(12, true), 2, 4, SPAN_EXCLUSIVE_EXCLUSIVE);
- txAbsoluteSize.setText(ss);
2、相对大小
相对字体大小就简单一些了,只需要传入一个字体相对大小,比如我们传入了 1.5,中间两个字就变成了原始字体的 1.5 倍大;
- SpannableString ss = new SpannableString(txRelativeSize.getText());
- ss.setSpan(new RelativeSizeSpan(1.5f), 2, 4, SPAN_EXCLUSIVE_EXCLUSIVE);
- txRelativeSize.setText(ss);
3、前景色
- SpannableString ss = new SpannableString(txForegroundColor.getText());
- ss.setSpan(new ForegroundColorSpan(Color.BLUE), 0, txForegroundColor.getText().length(), SPAN_EXCLUSIVE_EXCLUSIVE);
- txForegroundColor.setText(ss);
4、背景色
- SpannableString ss = new SpannableString(txBackgroundColor.getText());
- ss.setSpan(new BackgroundColorSpan(Color.LTGRAY), 0,
- txBackgroundColor.getText().length(), SPAN_EXCLUSIVE_EXCLUSIVE);
- txBackgroundColor.setText(ss);
5、加粗和倾斜
粗体、斜体、粗斜体对应的常量是:Typeface.BOLD、Typeface.ITALIC、Typeface.BOLD_ITALIC
- SpannableString ss = new SpannableString(txBord.getText());
- ss.setSpan(new StyleSpan(Typeface.BOLD), 0, txBord.getText().length(),
- SPAN_EXCLUSIVE_EXCLUSIVE);
- txBord.setText(ss);
6、删除线
删除线用到的类是 StrikethroughSpan,没有参数;
- SpannableString ss = new SpannableString(txDeleteLine.getText());
- ss.setSpan(new StrikethroughSpan(), 0, txDeleteLine.getText().length(),
- SPAN_EXCLUSIVE_EXCLUSIVE);
- txDeleteLine.setText(ss);
7、点击事件添加ClickableSpan的使用
- SpannableString spannableString = new SpannableString("要点击的内容");
- spannableString.setSpan(new ForegroundColorSpan(getResources().getColor(R.color.theme_default)), 0, 6, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);//修改字体颜色
- ClickableSpan clickableSpan = new ClickableSpan() {//添加点击
- @Override
- public void onClick(View widget) {
- onMyCommentClick(widget);//点击事件
- }
- @Override
- public void updateDrawState(TextPaint ds) {
- //去除连接下划线
- ds.setColor(ds.linkColor);
- ds.setUnderlineText(false);
- }
- };
- spannableString.setSpan(clickableSpan, 0, 6, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
- txtView.setMovementMethod(LinkMovementMethod.getInstance());;//这句必须添加,否则点击没反应
- txtView.setText(spannableString);
8、下划线
下划线用到的类是 UnderlineSpan
- SpannableString ss = new SpannableString(txUnderLine.getText());
- ss.setSpan(new UnderlineSpan(), 0, txUnderLine.getText().length(),
- SPAN_EXCLUSIVE_EXCLUSIVE);
- txUnderLine.setText(ss);
9、插入图片或者表情
SpannableString 除了可以像前面那样把文字变大变小变长变色,还可以把一部分文字变成图片,承载图片的是 Drawable 对象,而实现这个效果的就是 ImageSpan;
- SpannableString ss = new SpannableString(str);
- ImageSpan span = new ImageSpan(drawable, ImageSpan.ALIGN_BOTTOM);
- ss.setSpan(span, 0, str.length(), SPAN_EXCLUSIVE_EXCLUSIVE);
10、文字的上标和下标
- SpannableString ss = new SpannableString(txSubSuperScript.getText());
- ss.setSpan(new SuperscriptSpan(), 2, 3, SPAN_EXCLUSIVE_EXCLUSIVE);
- ss.setSpan(new SubscriptSpan(), 5, 6, SPAN_EXCLUSIVE_EXCLUSIVE);
- txSubSuperScript.setText(ss);
11、超链接形式
SpannableString 支持 6 中超链接形式,分别是:电话超链接、邮件超链接、网址超链接、短信超链接、彩信超链接、地图超链接;
11.1.电话超链接
类:URLSpan,实际上6种超链接都是使用 URLSpan 构建的,只是构造函数传入的链接格式不一样, 电话超链接传入的是 tel: 开头,后面接要拨打的电话号码,点击后就会自动跳转拨打电话;
- SpannableString ss = new SpannableString(txTelUrl.getText());
- ss.setSpan(new URLSpan("tel:02512345678"), 0, txTelUrl.getText().length(),
- SPAN_EXCLUSIVE_EXCLUSIVE);
- txTelUrl.setText(ss);
- txTelUrl.setMovementMethod(LinkMovementMethod.getInstance());
11.2.邮件超链接
邮件超链接是以 mailto: 开头,后面接邮箱地址。点击后就会自动跳转邮件 app;
- SpannableString ss = new SpannableString(txMailUrl.getText());
- ss.setSpan(new URLSpan("mailto:xxx@google.com"), 0, txMailUrl.getText().length(),
- SPAN_EXCLUSIVE_EXCLUSIVE);
- txMailUrl.setText(ss);
- txMailUrl.setMovementMethod(LinkMovementMethod.getInstance());
11.3.网址超链接
网址超链接是以 http:// 或 https:// 开头,后面接网址,点击后跳转浏览器 app,同样如果有多个浏览器,需要作出选择;
- SpannableString ss = new SpannableString(txWebUrl.getText());
- ss.setSpan(new URLSpan("http://www.baidu.com"), 0, txWebUrl.getText().length(),
- SPAN_EXCLUSIVE_EXCLUSIVE);
- txWebUrl.setText(ss);
- txWebUrl.setMovementMethod(LinkMovementMethod.getInstance());
11.4.短信超链接
短信超链接是以 sms: 开头,后面接手机号码,点击后跳转系统短信 app;
- SpannableString ss = new SpannableString(txSmsUrl.getText());
- ss.setSpan(new URLSpan("sms:02512345678"), 0, txSmsUrl.getText().length(),
- SPAN_EXCLUSIVE_EXCLUSIVE);
- txSmsUrl.setText(ss);
- txSmsUrl.setMovementMethod(LinkMovementMethod.getInstance());
11.5.彩信超链接
彩信超链接是以 mms: 开头,后面接手机号码,点击跳转系统短信app;
- SpannableString ss = new SpannableString(txMmsUrl.getText());
- ss.setSpan(new URLSpan("mms:02512345678"), 0, txMmsUrl.getText().length(),
- SPAN_EXCLUSIVE_EXCLUSIVE);
- txMmsUrl.setText(ss);
- txMmsUrl.setMovementMethod(LinkMovementMethod.getInstance());
11.6.地图超链接
地图超链接以 geo: 开头,后面接经纬度,点击后跳转地图 app;
- SpannableString ss = new SpannableString(txGeoUrl.getText());
- ss.setSpan(new URLSpan("geo:30.123456,-50.024456"), 0,
- txGeoUrl.getText().length(), SPAN_EXCLUSIVE_EXCLUSIVE);
- txGeoUrl.setText(ss);
- txGeoUrl.setMovementMethod(LinkMovementMethod.getInstance());
12、添加项目符号
BulletSpan 类用于构建项目符号,第一个参数是项目符号所占的宽度,第二个参数是项目符号的颜色;
- SpannableString ss = new SpannableString(txBullte.getText());
- ss16.setSpan(new BulletSpan(20, Color.RED), 0, txBullte.getText().length(),
- SPAN_EXCLUSIVE_EXCLUSIVE);
- txBullte.setText(ss);
13、文字的横向和纵向拉伸
ScaleXSpan 类用于指定横向拉伸的比例,我们传 2.5 表示横向拉伸为原来的 2.5 倍;
有了横向拉伸,自然我们会想纵向拉伸,不好意思,不支持。因为纵向的高度就得用 textSize 设置;
- SpannableString ss = new SpannableString(txScaleX.getText());
- ss.setSpan(new ScaleXSpan(2.5f), 0, txScaleX.getText().length(),
- SPAN_EXCLUSIVE_EXCLUSIVE);
- txScaleX.setText(ss);
总结
EditText显示表情包也是SpannableString,后面我们可以做个表情包自定义控件;
一起学习加油;
本文转载自微信公众号「Android开发编程」