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

[[430202]]

前言

TextView是 Android 中最简单、最常见的文字控件，几乎每个页面都有 TextView 的身影;

绝大多数情况我们用 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开发编程」