TextView, 一个我们每天都会看到的控件,很简单,它是用来显示文字的。ok,那TextView的源码我们可以点击看一下,足足有一万行,说明其实它做的事情很多的,远比我们想象的多。
我们今天就聊一聊如何用TextView实现显示各种奇奇怪怪的样式,指定某些字加粗啊什么的。

Span简介
对于Span,我的第一印象是html中的span标签,其被用来组合文档中的行内元素。那么Android中的span呢,其实与html中也一个意思,也是用来控制TextView的显示的。
Android 有其自己的Span 框架,涉及的类遵循一下四个定义规则:
- 如果一个Span影响字符层次上的文字格式,那么它继承CharacterStyle类。
- 如果一个Span影响段落层次上的文字格式,那么它实现ParagraphStyle接口。
- 如果一个Span修改字符层次上的文字外观,那么它实现UpdateAppearance接口。
- 如果一个Span修改字符层次上的度量或者尺寸,那么它实现UpdateLayout接口。
- 我们自定义Span时并不需要直接继承或者实现这些类或者接口,而是实现其他更加具体的类。
Span类介绍
BulletSpan
BulletSpan影响段落层次文字的格式,它让你在段落开头添加一个黑圆点。
1 2 3 4
| BulletSpan span = new BulletSpan(15, Color.RED); SpannableString spannableString = new SpannableString(TEXT); spannableString.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); mTextView1.setText(spannableString);
|

QuoteSpan
QuoteSpan影响段落层次文字的格式,它可以在段落前边添加一个竖直的引用线。
1 2 3 4
| QuoteSpan span = new QuoteSpan(Color.RED); SpannableString spannableString = new SpannableString(TEXT); spannableString.setSpan(span, 0, 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); mTextView2.setText(spannableString);
|

AlignmentSpan
AlignSpan.Standard影响段落层次文字的格式,它允许你控制段落的对齐方式,有居中对齐,右侧对齐和左侧对齐。
1 2 3 4
| AlignmentSpan.Standard span = new AlignmentSpan.Standard(Layout.Alignment.ALIGN_CENTER); SpannableString spannableString = new SpannableString(TEXT); spannableString.setSpan(span, 0, 0, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); mTextView3.setText(spannableString);
|

UnderlineSpan
UnderlineSpan影响字符层次文字的格式,它可以在文字下方添加下划线。其内部实现其实就是使用Paint.setUnderlineText(true)实现的。
1 2 3 4
| UnderlineSpan span = new UnderlineSpan(); SpannableString spannableString = new SpannableString(TEXT); spannableString.setSpan(span, 0, spannableString.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); mTextView4.setText(spannableString);
|

StrikethroughSpan
StrikethroughSpan影响字符层次上的文字的格式,它允许你在文字上添加删除线。它内部使用Paint.setStrikeThruText(true))来实现。
1 2 3 4
| StrikethroughSpan span = new StrikethroughSpan(); SpannableString spannableString = new SpannableString(TEXT); spannableString.setSpan(span, 0, spannableString.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); mTextView5.setText(spannableString);
|

SubscriptSpan
SubscriptSpan影响字符层次上的文字的格式,它允许你把文字作为下标进行显示。
1 2 3 4
| SubscriptSpan span = new SubscriptSpan(); SpannableString spannableString = new SpannableString(TEXT); spannableString.setSpan(span, 0, spannableString.length() / 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); mTextView6.setText(spannableString);
|

SuperscriptSpan
影响字符层次上的文字的格式,它允许你把文字作为上标进行显示。
1 2 3 4
| SuperscriptSpan span = new SuperscriptSpan(); SpannableString spannableString = new SpannableString(CONTENT); spannableString.setSpan(span,0,spannableString.length()/2,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); mTvTextView.setText(spannableString);
|

BackgroundColorSpan
BackgroundColorSpan影响字符层次上的文字的格式,你可以使用它设置文字的背景颜色。
1 2 3 4
| BackgroundColorSpan span = new BackgroundColorSpan(Color.RED); SpannableString spannableString = new SpannableString(TEXT); spannableString.setSpan(span, 0, spannableString.length() / 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); mTextView7.setText(spannableString);
|

ForegroundColorSpan
ForegroundColorSpan影响字符层次上的文字的格式,你可以使用它设置文字的自己的颜色。
1 2 3 4
| ForegroundColorSpan span = new ForegroundColorSpan(Color.RED); SpannableString spannableString = new SpannableString(TEXT); spannableString.setSpan(span, 0, spannableString.length() / 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); mTextView8.setText(spannableString);
|

StyleSpan
StyleSpan影响字符层次上的文字的格式。它允许你设置文字的类型(bold, italic, normal)
1 2 3 4
| StyleSpan span = new StyleSpan(Typeface.BOLD); SpannableString spannableString = new SpannableString(TEXT); spannableString.setSpan(span, 0, spannableString.length() / 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); mTextView9.setText(spannableString);
|

TypefaceSpan
TypefaceSpan影响字符层次上的文字的格式。它允许你设置文字的字体族(monospace, serif等)
1 2 3 4
| TypefaceSpan span = new TypefaceSpan("serif"); SpannableString spannableString = new SpannableString(TEXT); spannableString.setSpan(span, 0, spannableString.length() / 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); mTextView10.setText(spannableString);
|

AbsoluteSizeSpan
AbsoluteSizeSpan影响字符层次上的文字的格式。它允许你设置文字的绝对字体大小。
1 2 3 4
| AbsoluteSizeSpan span = new AbsoluteSizeSpan(24, true); SpannableString spannableString = new SpannableString(TEXT); spannableString.setSpan(span, 0, spannableString.length() / 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); mTextView11.setText(spannableString);
|

RelativeSizeSpan
RelativeSizeSpan影响字符层次上的文字的格式。它允许你设置文字的相对字体大小。
1 2 3 4
| RelativeSizeSpan span = new RelativeSizeSpan(2.0f); SpannableString spannableString = new SpannableString(TEXT); spannableString.setSpan(span, 0, spannableString.length() / 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); mTextView11.setText(spannableString);
|

ScaleXSpan
ScaleXSpan`影响字符层次上的文字的格式。它让你让文字在x方向上进行缩放。
1 2 3 4
| ScaleXSpan span = new ScaleXSpan(2.0f); SpannableString spannableString = new SpannableString(TEXT); spannableString.setSpan(span, 0, spannableString.length() / 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); mTextView12.setText(spannableString);
|

寄语
写的匆忙,后续继续补充
谢谢大家阅读,如有帮助,来个喜欢或者关注吧!
本文作者:Anderson/Jerey_Jobs
博客地址 : 夏敏的博客/Anderson大码渣/Jerey_Jobs
简书地址 : Anderson大码渣
CSDN地址 : Jerey_Jobs的专栏
github地址 : Jerey_Jobs