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中无效**