SpannableStringBuilder实现TextView华丽变身
前言
想要在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
不可,需要初始化时传入字符串。
方法详细
方法setSpan(Object 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,我也会继续补充其它有用的知识及例子在项目上。
欢迎点赞/评论,因为你们的赞同/鼓励是我写作的最大动力!
欢迎关注公众号:几圈年轮,查看更多有趣的技术、工具、闲言、资源。