之前写过一篇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 here2)自定义字体
SpannableString 可以给 TextView 设置自定义字体样式,并且可以指定某几个字,其实 SpannableString 几乎所有的属性可可以指定到具体某几个字。
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 可以动态地改变字体大小,并且支持绝对大小和相对大小两种模式。
绝对大小
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。
相对大小
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 可以动态给不同位置的文字设置不同颜色。
前景色
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
背景色
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。
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,没有参数。
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,没有参数。
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 实现起来就很简单了。
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: 开头,后面接要拨打的电话号码,点击后就会自动跳转拨打电话。
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。
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 herec.网址超链接
网址超链接是以 http:// 或 https:// 开头,后面接网址,点击后跳转浏览器 app,同样如果有多个浏览器,需要作出选择。
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。
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。
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。
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 here9)添加项目符号
关于这一点,客观地说用处不大,SpannableString 虽然支持设置项目符号,但是实际开发中基本不会用,如果是页面中的栏位,我们肯定会用小 icon 实现项目符号,如果是 H5,那就是 HTML 的标签实现。
BulletSpan 类用于构建项目符号,第一个参数是项目符号所占的宽度,第二个参数是项目符号的颜色。
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 了。
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
<?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,效果就实现了。
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 here3)给表情编码
我们在 assets 目录下新建一个文件 emotion.xml,我们把每一个表情定义为一个 emotion,有 code 和 name 两个属性,name 就是表情图片的文件名。
<?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 要简单些
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 here6)输入表情
哎,关键的地方来了,怎么把表情输入到 EditText 中呢?
我们这篇文章讲的是 SpannableString,那当然是用 SpannableString 做。
SpannableString 除了可以像前面那样把文字变大变小变长变色,还可以把一部分文字变成图片,承载图片的是 Drawable 对象,而实现这个效果的就是 ImageSpan。
看下基本使用方法
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() 得到的还是字符串。
弄懂了这个原理,再看下面代码就简单多了。
@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 中刷新聊天列表,最后清空输入框。
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 方法。
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 对应起来。
(此部分代码和之前是一样的)
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 的全部内容,感谢大家的支持,如有错误或不当之处还请指出。
网友评论