SpannableStringBuilder实现TextView华丽变身

程序员文章站 2022-06-09 20:17:05

...

前言

想要在TextView 的文本添加一些突出文字，然后点击可以进行跳转，首先想到的就是TextView拼接，但是考虑到换行后的显示又不是很合适，一番查询后发现了SpannableStringBuilder这个类，不仅可以实现想要的效果，还可以更加神奇，究竟怎么神奇呢，我们先看一下效果图：

每一行都只是一个TextView,既可以高亮显示文本，而且可以插入图片，并对部分内容设置点击事件，这就是SpannableStringBuilder可以达到的效果，接下来让我们详细看一下SpannableStringBuilder这个神奇的类及其使用方法。

简介

谷歌官方的解释是：

This is the class for text whose content and markup can both be changed.

翻译后就是：这是内容和标记都可以更改的文本的类。

简而言之就是：可以为我们的TextView所显示的String添加各种的样式，例如：颜色、字号、删除线、斜体，甚至是图片，从而到达突出显示的目的，而且可以同时添加单独的点击样式，实现不同的点击反馈。

SpannableStringBuilder有个相似类SpannableString，区别类似与StringBuilder、String，就是SpannableStringBuilder可以使用append方法拼接，而SpannableString不可，需要初始化时传入字符串。

方法详细

方法ct what, int start, int end, int flags)`，用指定的对象标记指定的文本范围。

参数说明：

what ：String不同的Span，即不同的样式，包括以下可用类：

BackgroundColorSpan : 文本背景色
ForegroundColorSpan : 文本颜色
MaskFilterSpan : 修饰效果，如模糊(BlurMaskFilter)，浮雕
RasterizerSpan : 光栅效果
StrikethroughSpan : 删除线
SuggestionSpan : 相当于占位符
UnderlineSpan : 下划线
AbsoluteSizeSpan : 文本字体（绝对大小）
DynamicDrawableSpan : 设置图片，基于文本基线或底部对齐。
ImageSpan : 图片
RelativeSizeSpan : 相对大小（文本字体）
ScaleXSpan : 基于x轴缩放
StyleSpan : 字体样式：粗体、斜体等
SubscriptSpan : 下标（数学公式会用到）
SuperscriptSpan : 上标（数学公式会用到）
TextAppearanceSpan : 文本外貌（包括字体、大小、样式和颜色）
TypefaceSpan : 文本字体
URLSpan : 文本超链接
ClickableSpan : 点击事件

start ：标识String中Span 样式的开始位置；
end ：标识String中Span样式的结束位置；
flags：用于控制行为，如同开闭区间，通常设置为0或Spanned中定义的常量，常用的有

Spannable.SPAN_EXCLUSIVE_EXCLUSIVE：前后都不包括；
Spannable.SPAN_EXCLUSIVE_INCLUSIVE：前面不包括，后面包括；
Spannable.SPAN_INCLUSIVE_EXCLUSIVE：前面包括，后面不包括；
Spannable.SPAN_INCLUSIVE_INCLUSIVE：前后都包括。

更多flag参数可以点击查看Android开发文档SpannableStringBuilder。

使用例子

首先定义并初始化一个TextView控件，创建SpannableStringBuilder，传入需要显示的字符串内容，设置SpannableString参数内容，通过setText方法显示出来。

（1）字体颜色设置ForegroundColorSpan

SpannableStringBuilder spanString01 = new SpannableStringBuilder("风急天高猿啸哀");
ForegroundColorSpan foregroundColorSpan = new ForegroundColorSpan(Color.RED);
spanString01.setSpan(foregroundColorSpan, 4, 7, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
mTvAdvanced01.setText(spanString01);

（2）字体背景颜色BackgroundColorSpan

SpannableStringBuilder spanString02 = new SpannableStringBuilder("渚清沙白鸟飞回");
BackgroundColorSpan backgroundColorSpan = new BackgroundColorSpan(Color.YELLOW);
spanString02.setSpan(backgroundColorSpan, 4, 7, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
mTvAdvanced02.setText(spanString02);

（3）字体大小AbsoluteSizeSpan

SpannableStringBuilder spanString03 = new SpannableStringBuilder("无边落木萧萧下");
AbsoluteSizeSpan absoluteSizeSpan = new AbsoluteSizeSpan(30);
spanString03.setSpan(absoluteSizeSpan, 4, 7, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
mTvAdvanced03.setText(spanString03);

（4）粗体、斜体StyleSpan

SpannableStringBuilder spanString04 = new SpannableStringBuilder("不尽长江滚滚来");
StyleSpan styleSpan = new StyleSpan(Typeface.BOLD_ITALIC);
spanString04.setSpan(styleSpan, 4, 7, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
mTvAdvanced04.setText(spanString04);

（5）删除线StrikethroughSpan

SpannableStringBuilder spanString05 = new SpannableStringBuilder("万里悲秋常作客");
StrikethroughSpan strikethroughSpan = new StrikethroughSpan();
spanString05.setSpan(strikethroughSpan, 4, 7, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
mTvAdvanced05.setText(spanString05);

（6）下划线UnderlineSpan

SpannableStringBuilder spanString06 = new SpannableStringBuilder("百年多病独登台");
UnderlineSpan underlineSpan = new UnderlineSpan();
spanString06.setSpan(underlineSpan, 4, 7, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
mTvAdvanced06.setText(spanString06);

（7）图片ImageSpan

SpannableStringBuilder spanString07 = new SpannableStringBuilder("艰难苦恨繁霜鬓");
ImageSpan span = new ImageSpan(this, R.drawable.ic_text);
spanString07.setSpan(span, 4, 5, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
mTvAdvanced07.setText(spanString07);

（8）点击事件ClickableSpan

SpannableStringBuilder spanString08 = new SpannableStringBuilder("潦倒新停浊酒杯");
ClickableSpan clickableSpan = new ClickableSpan() {
    @Override
    public void onClick(@NonNull View widget) {
        Toast.makeText(AdvancedTextViewActivity.this, "杜甫", Toast.LENGTH_SHORT).show();
    }
};
spanString08.setSpan(clickableSpan, 4, 7, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
mTvAdvanced08.setText(spanString08);
mTvAdvanced08.setMovementMethod(LinkMovementMethod.getInstance());

（9）SpannableStringBuilder组合使用

SpannableStringBuilder spanString09 = new SpannableStringBuilder();
spanString09.append("杜甫 ,字子美，自号少陵野老，后人称为'诗圣'。");
//图片
ImageSpan imageSpan = new ImageSpan(this, R.drawable.ic_author);
spanString09.setSpan(imageSpan, 2, 4, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
//点击事件
ClickableSpan cbSpan = new ClickableSpan() {
    @Override
    public void onClick(@NonNull View widget) {
        Toast.makeText(AdvancedTextViewActivity.this, "杜甫", Toast.LENGTH_SHORT).show();
    }
};
spanString09.setSpan(cbSpan, 2, 4, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
//文字颜色
ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.WHITE);
spanString09.setSpan(colorSpan, 10, 14, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
//文字背景颜色
BackgroundColorSpan bgColorSpan = new BackgroundColorSpan(Color.BLUE);
spanString09.setSpan(bgColorSpan, 10, 14, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
mTvAdvanced09.setText(spanString09);
mTvAdvanced09.setMovementMethod(LinkMovementMethod.getInstance());

关于SpannableStringBuilder的介绍及使用就到这里了，我也已经把例子上传了到了Github开发记录
，欢迎点击查阅及Star，我也会继续补充其它有用的知识及例子在项目上。

欢迎点赞/评论，因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注公众号：几圈年轮，查看更多有趣的技术、工具、闲言、资源。
SpannableStringBuilder实现TextView华丽变身