TextView左右大小字中间空格效果实现

场景

最近开发的项目的一个页面中, 有一个效果如下图, 势必我是不想弄一个ViewGroup再包裹两个EdiText来实现,也不想去重写一个EditText来实现, 因为这些都不大合理, 最终我的解决方案是通过设置SpannableString来实现,其他什么都不动.

yes by keith

分析

这个效果有两个关键的问题:

1. 大小字如何实现?
2. 如何让字体跑到左右两边,中间空白?

方案

1. 通过SpannableString设置AbsoluteSizeSpan来实现大小字
2. 测量EditText中可写的宽度,左右文字的宽度,计算出中间空白的宽度,用空格字符来填充

具体实现

1. 在布局文件中定义一个EditText,跟平常的一样

// res/activity_main.xml
<EditText
    android:id="@+id/text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

2. 计算空格数量

// 获取TextView中使用的Paint,里面带有字体等信息
TextPaint paint1 = mEditText.getPaint();
// 小字的paint
TextPaint paint2 = new TextPaint();
// 设置小字的字体大小
paint2.setTextSize(26);

// TextView中的文字可写的宽度
int width = mEditText.getMeasuredWidth() - mEditText.getPaddingLeft() - mEditText.getPaddingRight();
// 大字的宽度
float width1 = paint1.measureText(hint1);
// 小字的宽度
float width2 = paint2.measureText(hint2);

// 空格字符的宽度,用paint2来测量精度高点
float spaceWidth = paint2.measureText(" ");
// 需要填充的空格数量
int spaceCount = (int) ((width - width1 - width2) / spaceWidth);

3. 拼接所有字符串

// 将所有字符串拼接起来
StringBuilder sb = new StringBuilder();
sb.append(hint1);
for (int i = 0; i < spaceCount; i++) {
    sb.append(' ');
}
sb.append(hint2);

4. 设置大小字样式

// 用spannableString来实现给字符串设置样式
SpannableString spannableString = new SpannableString(sb.toString());
// 创建文字span, 还可以加入其他的span一起用
AbsoluteSizeSpan span = new AbsoluteSizeSpan(26);
// 从空格开始到结束都是用26px的字体,这个要注意
spannableString.setSpan(span, hint1.length(), sb.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

完整代码如下

String hint1 = "请输入密码";
String hint2 = "密码为6-16位数字或字母";
// 获取TextView中使用的Paint,里面带有字体等信息
TextPaint paint1 = mEditText.getPaint();
// 小字的paint
TextPaint paint2 = new TextPaint();
// 设置小字的字体大小
paint2.setTextSize(26);
// TextView中的文字可写的宽度
int width = mEditText.getMeasuredWidth() - mEditText.getPaddingLeft() - mEditText.getPaddingRight();
// 大字的宽度
float width1 = paint1.measureText(hint1);
// 小字的宽度
float width2 = paint2.measureText(hint2);
// 空格字符的宽度,用paint2来测量精度高点
float spaceWidth = paint2.measureText(" ");
// 需要填充的空格数量
int spaceCount = (int) ((width - width1 - width2) / spaceWidth);
// 将所有字符串拼接起来
StringBuilder sb = new StringBuilder();
sb.append(hint1);
for (int i = 0; i < spaceCount; i++) {
    sb.append(' ');
}
sb.append(hint2);
// 用spannableString来实现给字符串设置样式
SpannableString spannableString = new SpannableString(sb.toString());
// 创建文字span, 还可以加入其他的span一起用
AbsoluteSizeSpan span = new AbsoluteSizeSpan(26);
// 从空格开始到结束都是用26px的字体,这个要注意
spannableString.setSpan(span, hint1.length(), sb.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
// 设置hint
mEditText.setHint(spannableString);

总结

解决方法中用到的知识点为TextPaint测量字体宽度和SpannableString设置文字样式,但是整体文字宽度的计算也是很关键的，因为不同系统可能会有误差,而这会完全影响效果,具体可以参考下面的Notice.

Notice

• 这段代码的执行要放到视图创建好了之后,不然mEditText的getMeasuredWidth()返回的结果将有问题,如果是在初始化就要设置的话,可以这样:

 mEditText.post(new Runnable() {
     @Override
     public void run() {
        // 将执行代码放到这里
        ...
     }
 });

• 貌似部分机型会出现计算误差,如下图:

error by keith

主要是因为默认背景和padding的时候,内部padding的计算有点问题,解决方法有两个,实现一种即可.

1. 设置paddingLeft和paddingRight
2. 设置背景

<EditText
    android:id="@+id/text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@null"
    android:paddingLeft="0dp"
    android:paddingRight="0dp" />