TextView显示富文本方式总结
Android开发的过程中，经常需要用到富文本的展示。这里就总结一下，如何使用TextView展示富文本内容。个人非常喜欢使用。如果有其它更好的展示方法，请来者在留言中告诉我，互相学习，共同进步
TextView 展示富文本的依赖基础
SpannableString
用于富文本修饰的文本类，实现 CharSequence接口，内容不可修改，可以被TextView直接加载。SpannableString 调用setSpan方法设置富文本修饰方法
public void setSpan (Object what,
int start,
int end,
int flags)
- what : 修饰方法，必须实现ParcelableSpan接口
- start : 修饰起始字符的位置，以0开始
- end : 修饰结束字符的位置
- flags : Spanned标识符取值见下表
| 取值 | 含义 |
|---|---|
| SPAN_EXCLUSIVE_EXCLUSIVE | 起始结束均排除 |
| SPAN_EXCLUSIVE_INCLUSIVE | 起始位置排除，结束位置包含 |
| SPAN_INCLUSIVE_EXCLUSIVE | 起始位置包含，结束位置排除 |
| SPAN_INCLUSIVE_INCLUSIVE | 起始结束均包含 |
ParcelableSpan
用于实现修饰方法的接口，继承自Parcelable，所有富文本修饰类全部实现此接口
修饰示例
字体颜色和字体背景色（ForegroundColorSpan、BackgroundColorSpan）
| API | 作用 |
|---|---|
| ForegroundColorSpan | 设置字体的颜色 |
| BackgroundColorSpan | 设置字体背景的颜色 |
SpannableString demoSpannable = new SpannableString("设置字体为红色。背景色为蓝色。");
// 设置字体颜色
ForegroundColorSpan foregroundColorSpan = new ForegroundColorSpan(Color.parseColor("#FF0000"));
demoSpannable.setSpan(foregroundColorSpan, 5, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
// 设置背景颜色
BackgroundColorSpan backgroundColorSpan = new BackgroundColorSpan(Color.parseColor("#6666FF"));
demoSpannable.setSpan(backgroundColorSpan, 12, 14, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
// TextView设置内容
mColorTextView.setText(demoSpannable);
显示效果如图：
###字体大小的变化
| API | 作用 |
|---|---|
| AbsoluteSizeSpan | 设置字体的大小，构造函数包含字体大小和是否使用dip两个参数(见示例) |
| RelativeSizeSpan | 设置字体的大小比例，以默认字体大小为基准,参数为浮点倍数（见示例） |
| ScaleXSpan | 设置字体在宽度上的缩放比例，参数为浮点倍数（见示例） |
示例代码
SpannableString sizeDemoSpannable = new SpannableString("设置字体大中小两倍三倍一半宽度拉伸两倍");
// 设置字体为30dp
AbsoluteSizeSpan bigSizeSpan = new AbsoluteSizeSpan(30, true);
sizeDemoSpannable.setSpan(bigSizeSpan, 4, 5, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
// 设置字体为15dp
AbsoluteSizeSpan midSizeSpan = new AbsoluteSizeSpan(15, true);
sizeDemoSpannable.setSpan(midSizeSpan, 5, 6, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
// 设置字体为10dp
AbsoluteSizeSpan smallSizeSpan = new AbsoluteSizeSpan(10, true);
sizeDemoSpannable.setSpan(smallSizeSpan, 6, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
// 设置字体放大两倍
RelativeSizeSpan doubleSizeSpan = new RelativeSizeSpan(2.0f);
sizeDemoSpannable.setSpan(doubleSizeSpan, 7, 9, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
// 设置字体放大三倍
RelativeSizeSpan thirdSizeSpan = new RelativeSizeSpan(3.0f);
sizeDemoSpannable.setSpan(thirdSizeSpan, 9, 11, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
// 设置字体是原来的0.5倍
RelativeSizeSpan halfSizeSpan = new RelativeSizeSpan(0.5f);
sizeDemoSpannable.setSpan(halfSizeSpan, 11, 13, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
// 设置字体宽度放大两百
ScaleXSpan scaleXSpan = new ScaleXSpan(2.0f);
sizeDemoSpannable.setSpan(scaleXSpan, 13, 19, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
// TextView加载
mSizeTextView.setText(sizeDemoSpannable);
显示效果
文字停靠
| API | 作用 |
|---|---|
| AlignmentSpan | 设置停靠位置，参数为Layout.Alignment参数 |
- ALIGN_NORMAL:正常停靠
- ALIGN_CENTER:靠中间
- ALIGN_OPPOSITE:靠右（中文习惯，对某些从右向左的语言为靠左）
代码示例
SpannableString alignDemoSpannable = new SpannableString("设置文字靠右");
AlignmentSpan.Standard centerSpan = new AlignmentSpan.Standard(Layout.Alignment.ALIGN_OPPOSITE);
alignDemoSpannable.setSpan(centerSpan, 0, alignDemoSpannable.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE);
mAlignTextView.setText(alignDemoSpannable);
显示效果
*** 在我设置的过程中，发现仅对整体设置有效**
字体样式
| API | 作用 |
|---|---|
| StrikethroughSpan | 添加删除线，无参数 |
| UnderlineSpan | 添加下划线，无参数 |
| SuperscriptSpan | 将文字改为上标显示，无参数 |
| SubscriptSpan | 将文字改为下标显示，无参数 |
| StyleSpan | 设置文字字体，参数为Typeface |
示例代码
SpannableString styleDemoSpannable = new SpannableString("设置删除线下划线上标下标粗体斜体");
// 删除线
StrikethroughSpan strikethroughSpan = new StrikethroughSpan();
styleDemoSpannable.setSpan(strikethroughSpan, 2, 5, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
// 下划线
UnderlineSpan underlineSpan = new UnderlineSpan();
styleDemoSpannable.setSpan(underlineSpan, 5, 8, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
// 上标
SuperscriptSpan superscriptSpan = new SuperscriptSpan();
styleDemoSpannable.setSpan(superscriptSpan, 8, 10, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
// 下标
SubscriptSpan subscriptSpan = new SubscriptSpan();
styleDemoSpannable.setSpan(subscriptSpan, 10, 12, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
// 粗体
StyleSpan boldStyleSpan = new StyleSpan(Typeface.BOLD);
styleDemoSpannable.setSpan(boldStyleSpan, 12, 14, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
// 斜体
StyleSpan italicStyleSpan = new StyleSpan(Typeface.ITALIC);
styleDemoSpannable.setSpan(italicStyleSpan, 14, 16, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
// TextView加载
mStyleTextView.setText(styleDemoSpannable);
显示效果
图片或表情
| API | 作用 |
|---|---|
| ImageSpan | 将文字替换为图片，参数为drawable |
示例代码
SpannableString imojiDemoSpannable = new SpannableString("设置显示一个IMOJI表情");
Drawable drawable = getResources().getDrawable(R.mipmap.imoji, null);
drawable.setBounds(0, 0, 72, 72);
ImageSpan imojiSpan = new ImageSpan(drawable);
imojiDemoSpannable.setSpan(imojiSpan, 6, 11, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mImojiTextView.setText(imojiDemoSpannable);
显示效果
点击事件与超链接
| API | 作用 |
|---|---|
| ClickableSpan | 设置文字可点击，要处理事件需要重写此类，实现onClick接口 |
| URLSpan | 设置文字为超链接，参数为超链接地址，可以重写onClick函数来处理点击事件 |
示例代码
SpannableString eventDemoSpannable = new SpannableString("设置这里可以点击，这里超链接到百度");
// 设置点击处理
ClickableSpan clickDemoSpan = new ClickableSpan() {
@Override
public void onClick(View view) {
Toast.makeText(MainActivity.this, "这里被点击了一下", Toast.LENGTH_SHORT).show();
}
};
eventDemoSpannable.setSpan(clickDemoSpan, 4, 8, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
// 设置URL处理
URLSpan linkDemoSpan = new URLSpan("http://www.baidu.com"){
@Override
public void onClick(View widget){
Toast.makeText(MainActivity.this, "超链接：www.baidu.com", Toast.LENGTH_SHORT).show();
}
};
eventDemoSpannable.setSpan(linkDemoSpan, 11, 17, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mEventTextView.setMovementMethod(LinkMovementMethod.getInstance());
mEventTextView.setText(eventDemoSpannable);
显示效果
*** TextView一定要设置setMovementMethod，否则事件不会触发 **
推荐字符（SuggestionSpan）
| API | 作用 |
|---|---|
| SuggestionSpan | 设置推荐字符串，在编辑时，可以自动弹出提示供选择 |
示例代码
mDemoTextView = (EditText) findViewById(R.id.tv_main_demo);
SpannableString spannableString = new SpannableString("设置可修改字符串");
String[] suggestGroup = {"支付串", "知乎串", "致富串", "羊肉串"};
SuggestionSpan suggestionSpan = new SuggestionSpan(this, suggestGroup, SuggestionSpan.FLAG_EASY_CORRECT);
spannableString.setSpan(suggestionSpan, 5, 8, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mDemoTextView.setText(spannableString);
显示效果
*** 尽在可编辑的控件中有效，如EditText，在TextView中无效**