TextView
中提供了
Html
类,专门用来方便
TextView
展示
Html
格式的内容展示,对于常见的标签都做了简单的适配。
目前
Html
中支持解析如下标签:
li
标签一起使用
ul
标签一起使用
Html.ImageGetter
才能正常展示图片
一般如果对文字进行展示,都是对需要强调的文字使用
<span>xxx</span>
进行包裹,当然也可以使用
<font>xxx</font>
。
但是前端真正使用的过程中,很少有使用
<font>
标签强调字体的。
如果我们想要展示一段文字,其中文本内容有通过
<span>
标签对文字大小和文字颜色、文字展示加粗权重
做了处理,根据上面列出来的标签,你一定会想到直接使用
Html.formHtml
进行展示了,因为支持标签中可以看到,android的
Html
标签是对
Span
做了支持的。
val result = "<span>攀钢钒钛所属行业为\n" +
"<span style=\"color:#333333; font-weight:bold; font-size:18px;\">其他采掘</span>;\n" +
"</span>\n" +
"<br/>\n" +
"<span>当日攀钢钒钛行情整体表现<span style=\"color:green; font-weight:bold;\">弱于</span>所属行业表现;</span>\n" +
"<br/>\n" +
"<span>攀钢钒钛所属概念中<span style=\"color:#333333; font-weight:bold; \">有色金属</span>表现相对优异;</span>\n" +
"<br/>\n" +
"<span>其涨跌幅在有色金属中位列<span style=\"color:#F43737; font-weight:bold; \">81</span>/<span style=\"color:black; font-weight:bold; \">122</span>。</span>"
tvTest.text = Html.fromHtml(result)
可是,结果真的会是我们想象的那样吗?
可以从上面的图看出来,文字的颜色生效了,但是文字的大小设置和权重设置都没有任何的效果。那么,android的Html
处理真的是支持完整的属性支持吗?这个时候,就需要
呆着这个疑问看源代码了。
public static Spanned fromHtml(String source, int flags, ImageGetter imageGetter,
TagHandler tagHandler) {
HtmlToSpannedConverter converter =
new HtmlToSpannedConverter(source, imageGetter, tagHandler, parser, flags);
return converter.convert();
可以看到实际的对于标签的处理操作,是使用HtmlToSpannedConverter#convert
方法进行的处理。
public Spanned convert() {
mReader.setContentHandler(this);
try {
mReader.parse(new InputSource(new StringReader(mSource)));
} catch (IOException e) {
// We are reading from a string. There should not be IO problems.
throw new RuntimeException(e);
} catch (SAXException e) {
// TagSoup doesn't throw parse exceptions.
throw new RuntimeException(e);
return mSpannableStringBuilder;
通过mReader.setContentHandler(this);
和mReader.parse(new InputSource(new StringReader(mSource)));
可以看到这块代码其实是使用Sax
解析方式,对html
进行解析(html其实可以理解为一种特殊的xml)。知道是Sax
解析之后,我们
只需要关心解析的过程中span
是否有对font-size
和font-weight
进行识别。
private void startCssStyle(Editable text, Attributes attributes) {
String style = attributes.getValue("", "style");
if (style != null) {
Matcher m = getForegroundColorPattern().matcher(style);
if (m.find()) {
int c = getHtmlColor(m.group(1));
if (c != -1) {
start(text, new Foreground(c | 0xFF000000));
m = getBackgroundColorPattern().matcher(style);
if (m.find()) {
int c = getHtmlColor(m.group(1));
if (c != -1) {
start(text, new Background(c | 0xFF000000));
m = getTextDecorationPattern().matcher(style);
if (m.find()) {
String textDecoration = m.group(1);
if (textDecoration.equalsIgnoreCase("line-through")) {
start(text, new Strikethrough());
可以看到首先获取了span
标签的style
属性,然后使用getForegroundColorPattern
和getBackgroundColorPattern
分别解析出来了前景色和背景色。
private static void start(Editable text, Object mark) {
int len = text.length();
text.setSpan(mark, len, len, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
Span
的方式设置到代码中。但是发现代码中并没有对font-size
和font-weight
进行处理。
问题至此找到了,通过对这段代码的分析,也能发现系统进行Html
标签支持的套路,那么剩下来的就是照🐱 画🐯的操作了。
Html
提供了一个接口Html.TagHandler
用来方便我们实现自己的标签
public class SpanExtTagHandler implements Html.TagHandler {
@Override
public void handleTag(boolean opening, String tag, Editable output,
XMLReader xmlReader) {
可以在handleTag
中设置很多事情,那么直接上代码。
public class SpanExtTagHandler implements Html.TagHandler {
private final String TAG = "CustomTagHandler";
private int startIndex = 0;
private int stopIndex = 0;
private ColorStateList mOriginColors;
private Context mContext;
public SpanExtTagHandler(Context context, ColorStateList originColors) {
mContext = context;
mOriginColors = originColors;
@Override
public void handleTag(boolean opening, String tag, Editable output,
XMLReader xmlReader) {
processAttributes(xmlReader);
if (tag.equalsIgnoreCase("spanExt")) {
if (opening) {
startSpan(tag, output, xmlReader);
} else {
endSpan(tag, output, xmlReader);
attributes.clear();
public void startSpan(String tag, Editable output, XMLReader xmlReader) {
startIndex = output.length();
public void endSpan(String tag, Editable output, XMLReader xmlReader) {
stopIndex = output.length();
String color = attributes.get("color");
String size = attributes.get("size");
String style = attributes.get("style");
if (!TextUtils.isEmpty(style)) {
analysisStyle(startIndex, stopIndex, output, style);
if (!TextUtils.isEmpty(size)) {
size = size.split("px")[0];
if (!TextUtils.isEmpty(color)) {
if (color.startsWith("@")) {
Resources res = Resources.getSystem();
String name = color.substring(1);
int colorRes = res.getIdentifier(name, "color", "android");
if (colorRes != 0) {
output.setSpan(new ForegroundColorSpan(colorRes), startIndex, stopIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
} else {
try {
output.setSpan(new ForegroundColorSpan(Color.parseColor(color)), startIndex, stopIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
} catch (Exception e) {
e.printStackTrace();
reductionFontColor(startIndex, stopIndex, output);
if (!TextUtils.isEmpty(size)) {
int fontSizePx = 16;
if (null != mContext) {
fontSizePx = DisplayUtil.sp2px(mContext, Integer.parseInt(size));
output.setSpan(new AbsoluteSizeSpan(fontSizePx), startIndex, stopIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
final HashMap<String, String> attributes = new HashMap<String, String>();
private void processAttributes(final XMLReader xmlReader) {
try {
Field elementField = xmlReader.getClass().getDeclaredField("theNewElement");
elementField.setAccessible(true);
Object element = elementField.get(xmlReader);
Field attsField = element.getClass().getDeclaredField("theAtts");
attsField.setAccessible(true);
Object atts = attsField.get(element);
Field dataField = atts.getClass().getDeclaredField("data");
dataField.setAccessible(true);
String[] data = (String[]) dataField.get(atts);
Field lengthField = atts.getClass().getDeclaredField("length");
lengthField.setAccessible(true);
int len = (Integer) lengthField.get(atts);
for (int i = 0; i < len; i++)
attributes.put(data[i * 5 + 1], data[i * 5 + 4]);
} catch (Exception e) {
e.printStackTrace();
* 还原为原来的颜色
private void reductionFontColor(int startIndex, int stopIndex, Editable editable) {
if (null != mOriginColors) {
editable.setSpan(new TextAppearanceSpan(null, 0, 0, mOriginColors, null),
startIndex, stopIndex,
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
} else {
editable.setSpan(new ForegroundColorSpan(0xff2b2b2b), startIndex, stopIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
* 解析style属性
private void analysisStyle(int startIndex, int stopIndex, Editable editable, String style) {
Log.e(TAG, "style:" + style);
String[] attrArray = style.split(";");
Map<String, String> attrMap = new HashMap<>();
if (null != attrArray) {
for (String attr : attrArray) {
String[] keyValueArray = attr.split(":");
if (null != keyValueArray && keyValueArray.length == 2) {
// 记住要去除前后空格
attrMap.put(keyValueArray[0].trim(), keyValueArray[1].trim());
Log.e(TAG, "attrMap:" + attrMap.toString());
String color = attrMap.get("color");
String fontSize = attrMap.get("font-size");
String fontWeight = attrMap.get("font-weight");
if (!TextUtils.isEmpty(fontWeight) && "bold".equalsIgnoreCase(fontWeight)) {
editable.setSpan(new StyleSpan(Typeface.BOLD), startIndex, stopIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
} else if (!TextUtils.isEmpty(fontWeight) && "italic".equalsIgnoreCase(fontWeight)) {
editable.setSpan(new StyleSpan(Typeface.ITALIC), startIndex, stopIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
if (!TextUtils.isEmpty(fontSize)) {
fontSize = fontSize.split("px")[0];
if (!TextUtils.isEmpty(color)) {
if (color.startsWith("@")) {
Resources res = Resources.getSystem();
String name = color.substring(1);
int colorRes = res.getIdentifier(name, "color", "android");
if (colorRes != 0) {
editable.setSpan(new ForegroundColorSpan(colorRes), startIndex, stopIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
} else {
try {
editable.setSpan(new ForegroundColorSpan(Color.parseColor(color)), startIndex, stopIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
} catch (Exception e) {
e.printStackTrace();
reductionFontColor(startIndex, stopIndex, editable);
if (!TextUtils.isEmpty(fontSize)) {
int fontSizePx = 16;
if (null != mContext) {
fontSizePx = DisplayUtil.sp2px(mContext, Integer.parseInt(fontSize));
editable.setSpan(new AbsoluteSizeSpan(fontSizePx), startIndex, stopIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
由于系统默认实现已经存在了span
标签,所以我们自己设置的标签如果也是span
的话,是不能生效的,这里我使用了自定义标签spanExt
。
接下来就可以看一下使用的效果了。
val result = "<spanExt>攀钢钒钛所属行业为\n" +
"<spanExt style=\"color:#333333; font-weight:bold; font-size:18px;\">其他采掘</spanExt>;\n" +
"</spanExt>\n" +
"<br/>\n" +
"<spanExt>当日攀钢钒钛行情整体表现<spanExt style=\"color:green; font-weight:bold;\">弱于</spanExt>所属行业表现;</spanExt>\n" +
"<br/>\n" +
"<spanExt>攀钢钒钛所属概念中<spanExt style=\"color:#333333; font-weight:bold; \">有色金属</spanExt>表现相对优异;</spanExt>\n" +
"<br/>\n" +
"<spanExt>其涨跌幅在有色金属中位列<spanExt style=\"color:#F43737; font-weight:bold; \">81</spanExt>/<spanExt style=\"color:black; font-weight:bold; \">122</spanExt>。</spanExt>"
tvTest.text =
Html.fromHtml(
result, null,
SpanExtTagHandler(
this@TextViewModuleActivity,
效果如下:
如果想要系统的了解,欢迎订阅我的TextView专题讲解,让你彻底读懂textView绘制原理,从源码角度理解谷歌设计思路。