之前写过一篇SpannableString的文章，最近搬出来统一放在简书上。
前言
TextView 可以说是 Android 中最简单、最常见的文字控件了，几乎每个页面都有 TextView 的身影，绝大多数情况我们用 TextView 只是单纯地显示一个文本，但是 TextView 的功能远远不止如此哦，简单的 TextView 也能千变万化显示出各种效果，这一切都要归功于 SpannableString。
TextView 和 SpannableString 一起使用具体有哪些神奇的地方呢？本场 Chat 将全面地介绍 SpannableString 的用法，让你的 TextView 不再简单。
SpannableString
在 Android 中，常规的字符串类就是 String 或者 Charsequence，String 用的最多，有些人可能对 Charsequence 都有点陌生，EditText 的 getText() 返回的就是 Charsequence 对象。但是今天我们要介绍的 SpannableString 就是另一种更强大的字符串类。
Spannable 是什么意思？英语词典上还真不太好查，我自己的理解的意思是：可测量、可塑造的，所以 SpannableString 就是一种可测量可塑造的字符串。
1）默认 TextView 样式
默认 TextView 样式我们再熟悉不过了，看下截图，没啥好说的。
enter image description here
2）自定义字体
SpannableString 可以给 TextView 设置自定义字体样式，并且可以指定某几个字，其实 SpannableString 几乎所有的属性可可以指定到具体某几个字。
代码语言：javascript复制SpannableString ss = new SpannableString(txCustomTypeface.getText());
ss.setSpan(new TypefaceSpan("sans-serif"), 2, 4, SPAN_EXCLUSIVE_EXCLUSIVE);
txCustomTypeface.setText(ss);这里用到了一个新的类：TypefaceSpan，它就是用来设置字体样式的，参数有 5 个可选值：default、default-bold、monospace、serif、sans-serif。后面的 2 和 4 是需要生效的起始位置和结束位置。
enter image description here
在这个例子中，我们把 2 - 4 的文字设置成了 sans-serif 样式，但是竟然看不出任何差别。不过也不必奇怪，这些字体样式之间的差异确实非常小，根据一篇专业的字体研究报告称，sans 字体适合正文内容文字，能长时间集中视觉注意力，而 sans-serif 适合标题文字，能快速抓住注意力，但不适宜长时间阅读。总之，这之间的差别是比较专业的，在这个例子中确实看不出多大区别。
3）绝对字体和相对字体
SpannableString 可以动态地改变字体大小，并且支持绝对大小和相对大小两种模式。
绝对大小
代码语言：javascript复制SpannableString ss = new SpannableString(txAbsoluteSize.getText());
ss.setSpan(new AbsoluteSizeSpan(12, true), 2, 4, SPAN_EXCLUSIVE_EXCLUSIVE);
txAbsoluteSize.setText(ss);
enter image description here
图中可以看到中间两个字变小了，AbsoluteSizeSpan 就是构建绝对大小的类，它有两个参数，第一个表示字体大小，第二个表示是否使用 DIP，false 的话单位就是 px，true 的话单位就是 dp。
相对大小
代码语言：javascript复制SpannableString ss = new SpannableString(txRelativeSize.getText());
ss.setSpan(new RelativeSizeSpan(1.5f), 2, 4, SPAN_EXCLUSIVE_EXCLUSIVE);
txRelativeSize.setText(ss);
enter image description here
相对字体大小就简单一些了，只需要传入一个字体相对大小，比如我们传入了 1.5，中间两个字就变成了原始字体的 1.5 倍大。
4）前景色和背景色
其实对于 TextView 来说，前景色就是 textColor，背景色就是 background。你可能会觉得那为什么要用 SpannableString 来做呢，直接用 textColor 和 background 不就可以了吗？但是 textColor 和 background 只能对 textView 整体生效，而 SpannableString 可以动态给不同位置的文字设置不同颜色。
前景色
代码语言：javascript复制SpannableString ss = new SpannableString(txForegroundColor.getText());
ss.setSpan(new ForegroundColorSpan(Color.BLUE), 0, txForegroundColor.getText().length(), SPAN_EXCLUSIVE_EXCLUSIVE);
txForegroundColor.setText(ss);
enter image description here
背景色
代码语言：javascript复制SpannableString ss = new SpannableString(txBackgroundColor.getText());
ss.setSpan(new BackgroundColorSpan(Color.LTGRAY), 0,
txBackgroundColor.getText().length(), SPAN_EXCLUSIVE_EXCLUSIVE);
txBackgroundColor.setText(ss);
enter image description here
5）字体的加粗和倾斜
这里和大多数编辑器一样，支持三种：粗体、斜体、粗斜体。
对应的常量是：Typeface.BOLD、Typeface.ITALIC、Typeface.BOLD_ITALIC。
代码语言：javascript复制SpannableString ss = new SpannableString(txBord.getText());
ss.setSpan(new StyleSpan(Typeface.BOLD), 0, txBord.getText().length(),
SPAN_EXCLUSIVE_EXCLUSIVE);
txBord.setText(ss);
enter image description here
6）删除线和下划线
删除线和下划线是两种常用文本标记符号，SpannableString 当然也是支持的。设置删除线和下划线很简单，只要指定起始位置和结束位置即可，下面直接看代码和效果图吧。
删除线
删除线用到的类是 StrikethroughSpan，没有参数。
代码语言：javascript复制SpannableString ss = new SpannableString(txDeleteLine.getText());
ss.setSpan(new StrikethroughSpan(), 0, txDeleteLine.getText().length(),
SPAN_EXCLUSIVE_EXCLUSIVE);
txDeleteLine.setText(ss);
enter image description here
下划线
下划线用到的类是 UnderlineSpan，没有参数。
代码语言：javascript复制SpannableString ss = new SpannableString(txUnderLine.getText());
ss.setSpan(new UnderlineSpan(), 0, txUnderLine.getText().length(),
SPAN_EXCLUSIVE_EXCLUSIVE);
txUnderLine.setText(ss);
enter image description here
7）文字的上标和下标
这个在实际开发中不常用，但是却很重要，因为万一遇到这种需求要自己实现的话还挺麻烦的。SpannableString 实现起来就很简单了。
代码语言：javascript复制SpannableString ss = new SpannableString(txSubSuperScript.getText());
ss.setSpan(new SuperscriptSpan(), 2, 3, SPAN_EXCLUSIVE_EXCLUSIVE);
ss.setSpan(new SubscriptSpan(), 5, 6, SPAN_EXCLUSIVE_EXCLUSIVE);
txSubSuperScript.setText(ss);
enter image description here
8）6 种超链接形式
我记得我实习那会遇到一个需求要实现一个 TextView 中超链接的功能，那时候我还不知道 SpannableString，想了各种办法，头都大了。
SpannableString 支持 6 中超链接形式，分别是： 电话超链接、邮件超链接、网址超链接、短信超链接、彩信超链接、地图超链接。
a.电话超链接
这里又涉及到了一个新的类：URLSpan，实际上6种超链接都是使用 URLSpan 构建的，只是构造函数传入的链接格式不一样， 电话超链接传入的是 tel: 开头，后面接要拨打的电话号码，点击后就会自动跳转拨打电话。
代码语言：javascript复制SpannableString ss = new SpannableString(txTelUrl.getText());
ss.setSpan(new URLSpan("tel:02512345678"), 0, txTelUrl.getText().length(),
SPAN_EXCLUSIVE_EXCLUSIVE);
txTelUrl.setText(ss);
txTelUrl.setMovementMethod(LinkMovementMethod.getInstance());
enter image description here
b.邮件超链接
邮件超链接是以 mailto: 开头，后面接邮箱地址。点击后就会自动跳转邮件 app。
代码语言：javascript复制SpannableString ss = new SpannableString(txMailUrl.getText());
ss.setSpan(new URLSpan("mailto:xxx@google.com"), 0, txMailUrl.getText().length(),
SPAN_EXCLUSIVE_EXCLUSIVE);
txMailUrl.setText(ss);
txMailUrl.setMovementMethod(LinkMovementMethod.getInstance());
enter image description here
如果你的手机里存在多个邮件 app，需要选择一个。
enter image description here
c.网址超链接
网址超链接是以 http:// 或 https:// 开头，后面接网址，点击后跳转浏览器 app，同样如果有多个浏览器，需要作出选择。
代码语言：javascript复制SpannableString ss = new SpannableString(txWebUrl.getText());
ss.setSpan(new URLSpan("http://www.baidu.com"), 0, txWebUrl.getText().length(),
SPAN_EXCLUSIVE_EXCLUSIVE);
txWebUrl.setText(ss);
txWebUrl.setMovementMethod(LinkMovementMethod.getInstance());
enter image description here
d.短信超链接
短信超链接是以 sms: 开头，后面接手机号码，点击后跳转系统短信 app。
代码语言：javascript复制SpannableString ss = new SpannableString(txSmsUrl.getText());
ss.setSpan(new URLSpan("sms:02512345678"), 0, txSmsUrl.getText().length(),
SPAN_EXCLUSIVE_EXCLUSIVE);
txSmsUrl.setText(ss);
txSmsUrl.setMovementMethod(LinkMovementMethod.getInstance());
enter image description here
e.彩信超链接
彩信超链接是以 mms: 开头，后面接手机号码，点击永阳跳转系统短信 app。
代码语言：javascript复制SpannableString ss = new SpannableString(txMmsUrl.getText());
ss.setSpan(new URLSpan("mms:02512345678"), 0, txMmsUrl.getText().length(),
SPAN_EXCLUSIVE_EXCLUSIVE);
txMmsUrl.setText(ss);
txMmsUrl.setMovementMethod(LinkMovementMethod.getInstance());
enter image description here
f.地图超链接
地图超链接以 geo: 开头，后面接经纬度，点击后跳转地图 app。
代码语言：javascript复制SpannableString ss = new SpannableString(txGeoUrl.getText());
ss.setSpan(new URLSpan("geo:30.123456,-50.024456"), 0,
txGeoUrl.getText().length(), SPAN_EXCLUSIVE_EXCLUSIVE);
txGeoUrl.setText(ss);
txGeoUrl.setMovementMethod(LinkMovementMethod.getInstance());
enter image description here
如果你的手机有多个地图 app，需要选择一个默认 app。
enter image description here
9）添加项目符号
关于这一点，客观地说用处不大，SpannableString 虽然支持设置项目符号，但是实际开发中基本不会用，如果是页面中的栏位，我们肯定会用小 icon 实现项目符号，如果是 H5，那就是 HTML 的标签实现。
BulletSpan 类用于构建项目符号，第一个参数是项目符号所占的宽度，第二个参数是项目符号的颜色。
代码语言：javascript复制SpannableString ss = new SpannableString(txBullte.getText());
ss16.setSpan(new BulletSpan(20, Color.RED), 0, txBullte.getText().length(),
SPAN_EXCLUSIVE_EXCLUSIVE);
txBullte.setText(ss);
enter image description here
10）文字的横向和纵向拉伸
一般我们要改变字体大小，都是设置 textSize 属性，这个属性是文字整体等比例放大缩小，那如果我只想文字横向拉伸呢？这时候就要用到 SpannableString 了。
代码语言：javascript复制SpannableString ss = new SpannableString(txScaleX.getText());
ss.setSpan(new ScaleXSpan(2.5f), 0, txScaleX.getText().length(),
SPAN_EXCLUSIVE_EXCLUSIVE);
txScaleX.setText(ss);
enter image description here
ScaleXSpan 类用于指定横向拉伸的比例，我们传 2.5 表示横向拉伸为原来的 2.5 倍。
有了横向拉伸，自然我们会想纵向拉伸，不好意思，不支持。因为纵向的高度就得用 textSize 设置。
11）ColorStateList
这个东西我很少发现有人用，可能是因为不知道有这个类，也可能是因为这个用起来太麻烦。但不代表这个东西没用。
大家有没有遇到过这样的场景，一个 Button，默认灰色背景，黑色文字，按下后，背景要变成黑色，这个需求很常见，但是你有可能遇到这样的场景。
enter image description here
本来文字就是黑色，按下后背景变成黑色，文字就看不见了，背景颜色和文字颜色的对比度太低了甚至为 0，导致文字不可见。
我们希望正常状态下背景灰色，文字黑色，按下状态背景变成黑色，文字变成白色。这时候就要用到 ColorStateList。
首先像以前一样定义一个 drawable，button_text.xml
代码语言：javascript复制<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
android:enterFadeDuration="300"
android:exitFadeDuration="300">
<item android:state_pressed="true" android:color="#ffffff"/>
<item android:color="#000000"/>
</selector>然后解析 xml，构建 ColorStateList 并设置给 textView，效果就实现了。
代码语言：javascript复制ColorStateList csl = null;
try {
=XmlResourceParser xrp = getResources().getXml(R.drawable.button_text);
csl = ColorStateList.createFromXml(getResources(), xrp);
} catch (XmlPullParserException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
btn.setTextColor(csl);
enter image description here
实战：表情文字
下面我们来做一个稍有难度的小项目：表情文字。 其效果就和常规的聊天软件一样，可以混合输入表情和文字，并且可以显示在聊天记录中。
enter image description here
看上去效果还不错，表情和文字稍微有点不对齐（偏下），还可以再优化下，后面代码分析也会说到。文字和表情可以混排，输入框中输入的表情和聊天列表中显示一致，基本功能都实现了。下面就来看下是怎么实现的吧。
1）分析
整个过程可以分成两步，第一步是让输入框 EditText 可以输入表情，第二步是把输入框输入的表情显示到 TextView 上。
2）准备表情资源
我在网上下载了一批常用的表情图片，放在 drawable - xxhdpi 目录下：
enter image description here
3）给表情编码
我们在 assets 目录下新建一个文件 emotion.xml，我们把每一个表情定义为一个 emotion，有 code 和 name 两个属性，name 就是表情图片的文件名。
代码语言：javascript复制<?xml version="1.0" encoding="utf-8"?>
<emotions>
<emotion>
<code><![CDATA[[em:1:]]]></code>
<name>f001</name>
</emotion>
<emotion>
<code><![CDATA[[em:2:]]]></code>
<name>f002</name>
</emotion>
<emotion>
<code><![CDATA[[em:3:]]]></code>
<name>f003</name>
</emotion>
<emotion>
<code><![CDATA[[em:4:]]]></code>
<name>f004</name>
</emotion>
<emotion>
<code><![CDATA[[em:5:]]]></code>
<name>f005</name>
</emotion>
<emotion>
<code><![CDATA[[em:6:]]]></code>
<name>f006</name>
</emotion>
<emotion>
<code><![CDATA[[em:7:]]]></code>
<name>f007</name>
</emotion>
<emotion>
<code><![CDATA[[em:8:]]]></code>
<name>f008</name>
</emotion>
<emotion>
<code><![CDATA[[em:9:]]]></code>
<name>f009</name>
</emotion>
<emotion>
<code><![CDATA[[em:10:]]]></code>
<name>f010</name>
</emotion>
<emotion>
<code><![CDATA[[em:11:]]]></code>
<name>f011</name>
</emotion>
<emotion>
<code><![CDATA[[em:12:]]]></code>
<name>f012</name>
</emotion>
<emotion>
<code><![CDATA[[em:13:]]]></code>
<name>f013</name>
</emotion>
<emotion>
<code><![CDATA[[em:14:]]]></code>
<name>f014</name>
</emotion>
<emotion>
<code><![CDATA[[em:15:]]]></code>
<name>f015</name>
</emotion>
<emotion>
<code><![CDATA[[em:16:]]]></code>
<name>f016</name>
</emotion>
<emotion>
<code><![CDATA[[em:17:]]]></code>
<name>f017</name>
</emotion>
<emotion>
<code><![CDATA[[em:18:]]]></code>
<name>f018</name>
</emotion>
<emotion>
<code><![CDATA[[em:19:]]]></code>
<name>f019</name>
</emotion>
<emotion>
<code><![CDATA[[em:20:]]]></code>
<name>f020</name>
</emotion>
<emotion>
<code><![CDATA[[em:21:]]]></code>
<name>f021</name>
</emotion>
<emotion>
<code><![CDATA[[em:22:]]]></code>
<name>f022</name>
</emotion>
<emotion>
<code><![CDATA[[em:23:]]]></code>
<name>f023</name>
</emotion>
<emotion>
<code><![CDATA[[em:24:]]]></code>
<name>f024</name>
</emotion>
</emotions>4）解析 emotion.xml
xml 只是配置，最终肯定要解析成 java bean，下面是我的解析过程。
当然你也可以用 json 编码 emotion，然后解析 json，可能会比解析 xml 要简单些
代码语言：javascript复制public static List<Emotion> getEmotions(InputStream inputStream) {
XmlPullParser parser = Xml.newPullParser();
int eventType = 0;
List<Emotion> emotions = null;
Emotion emotion = null;
try {
parser.setInput(inputStream, "UTF-8");
eventType = parser.getEventType();
while (eventType != XmlPullParser.END_DOCUMENT) {
switch (eventType) {
case XmlPullParser.START_DOCUMENT:
emotions = new ArrayList<Emotion>();
break;
case XmlPullParser.START_TAG:
if ("emotion".equals(parser.getName())) {
emotion = new Emotion();
} else if ("code".equals(parser.getName())) {
emotion.setCode(parser.nextText());
} else if ("name".equals(parser.getName())) {
emotion.setName(parser.nextText());
}
break;
case XmlPullParser.END_TAG:
if ("emotion".equals(parser.getName())) {
emotions.add(emotion);
emotion = null;
}
break;
default:
break;
}
eventType = parser.next();
}
} catch (Exception e) {
e.printStackTrace();
}
return emotions;
}5）显示表情
拿到了表情列表，显示出来就简单了，我们随便用 GridView 或者 RecyclerView 都可以，太基础了，这部分代码就不放出来了，直接看下效果图吧。
enter image description here
6）输入表情
哎，关键的地方来了，怎么把表情输入到 EditText 中呢？
我们这篇文章讲的是 SpannableString，那当然是用 SpannableString 做。
SpannableString 除了可以像前面那样把文字变大变小变长变色，还可以把一部分文字变成图片，承载图片的是 Drawable 对象，而实现这个效果的就是 ImageSpan。
看下基本使用方法
代码语言：javascript复制SpannableString ss = new SpannableString(str);
ImageSpan span = new ImageSpan(drawable, ImageSpan.ALIGN_BOTTOM);
ss.setSpan(span, 0, str.length(), SPAN_EXCLUSIVE_EXCLUSIVE);ImageSpan 的构造函数要传 2 个参数，drawable 对象和对齐方式，这里的对齐方式就是表情和文字的对齐方式，只有两个选项：
ALIGN_ BASELINE 和 ALIGN_ BOTTOM，我这里选择的是 ALIGN_BOTTOM，所以表情相对文字会偏下。
这样设置后，字符串 str 就和 drawable 对象对应上了，在显示时会显示 drawable，但是调用 editText.getText() 得到的还是字符串。
弄懂了这个原理，再看下面代码就简单多了。
代码语言：javascript复制@Override
public void onItemClick(AdapterView<?> p, View v, int position, long id) {
Emotion emotion = emotions.get(position);
int cursor = etInput.getSelectionStart();
Field f;
try {
f = (Field) R.drawable.class.getDeclaredField(emotion.getName());
int j = f.getInt(R.drawable.class);
Drawable d = getResources().getDrawable(j);
int textSize = (int)etInput.getTextSize();
d.setBounds(0, 0, textSize, textSize);
String str = null;
int pos = position 1;
if (pos < 10) {
str = "f00" pos;
} else if (pos < 100) {
str = "f0" pos;
} else {
str = "f" pos;
}
SpannableString ss = new SpannableString(str);
ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BOTTOM);
ss.setSpan(span, 0, str.length(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
etInput.getText().insert(cursor, ss);
} catch (Exception e) {
e.printStackTrace();
}
}上述代码可简单分析成以下步骤： （1）根据点击位置，获取到该位置的 Emotion 对象。 （2）根据 emotion 的 name，通过反射的方式获取到 Drawable 对象。 （3）根据 EditText 的 textSize 设置 drawable 的大小，为了看上去表情和文字是协调的，我直接把 drawable 的宽高设置成了textSize。 （4）构建 ImageSpan 和 SpannableString，把 drawable 和字符串 str 对应起来。 （5）把 SpannableString 插入到 EditText 当前光标位置。
这样解释是不是太简单了，可是代码确实很简单啊。至此，我们算是实现了第一步：在 EditText 中输入表情，接下来就要实现第二步，把输入的表情显示在聊天记录中。
7）把输入的表情显示在聊天列表
我们既然已经把表情输入到 EditText 了，显示到 TextView 还不简单，直接把 SpannableString 设置给 TextView 不就行了吗？
在 demo 中是可以，但是在实际项目中不行。实际项目中输入的内容是要转成 String 传输的，再发给客户端，客户端接收到消息后再解析显示。所以这就需要再执行一次构建 SpannableString 的操作，具体代码如下：
（1）首先获取 EditText 输入的内容，然后经过一个 getExpressionString 方法转成 SpannableString，然后添加到 adapter 中刷新聊天列表，最后清空输入框。
代码语言：javascript复制public void onSendClick() {
String receiveStr = etInput.getText().toString();
SpannableString ss= getExpressionString(this, receiveStr, textSize);
messages.add(ss);
adapter.notifyDataSetChanged();
lvMsg.setSelection(messages.size() - 1);
etInput.setText(null);
}（2）那么重点就是 getExpressionString 方法了，这个方法构建一个 SpannableString 和一个正则匹配模式，接着又调用了 dealExpression 方法。
代码语言：javascript复制public static final String PATTEN_STR = "f0[0-9]{2}|f10[0-7]";
public SpannableString getExpressionString(Context context, String str,
int textSize) {
SpannableString ss = new SpannableString(str);
Pattern sinaPatten = Pattern.compile(PATTEN_STR, Pattern.CASE_INSENSITIVE);
try {
dealExpression(context, ss, textSize, sinaPatten, 0);
} catch (Exception e) {
Log.e("dealExpression", e.getMessage());
}
return ss;
}（3）真正的重点来了，这个方法中利用正则匹配模式，找到输入内容中每一条符合正则的子字符串，也就是表情编码的字符串，然后像之前那样通过反射获取 Drawable，构建 SpannableString 把 Drawable 和 String 对应起来。
（此部分代码和之前是一样的）
代码语言：javascript复制public void dealExpression(Context context, SpannableString ss,
int textSize, Pattern patten, int start) throws Exception {
Matcher matcher = patten.matcher(ss);
while (matcher.find()) {
String key = matcher.group();
if (matcher.start() < start) {
continue;
}
Field field = R.drawable.class.getDeclaredField(key);
int resId = field.getInt(R.drawable.class);
if (resId != 0) {
Drawable d = context.getResources().getDrawable(resId);
d.setBounds(0, 0, textSize, textSize);
ImageSpan imageSpan = new ImageSpan(d);
int end = matcher.start() key.length();
ss.setSpan(imageSpan, matcher.start(), end,
Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
if (end < ss.length()) {
dealExpression(context, ss, textSize, patten, end);
}
break;
}
}
}看到这你明白了吗？整个过程就是操作 SpannableString 的过程，SpannableString 内部通过 ImageSpan 把字符串和 Drawable 对应起来，在显示的时候表现为 Drawable，在 getText 时表现为普通 String。
就是这么简单，以前可能觉得表情文字是很神奇的存在，现在是不是觉得就是纸老虎。
大工告成！至此，整个实现的逻辑就讲完了，但是我的工程中远不止这些，还有很多边缘性的功能，但核心的东西都讲了。
最后，我把完整的工程代码放出来，需要的朋友下载吧。 https://gitee.com/alexandor/EmotionText
好了，以上就是本期 Chat 的全部内容，感谢大家的支持，如有错误或不当之处还请指出。
