场景
最近开发的项目的一个页面中, 有一个效果如下图, 势必我是不想弄一个ViewGroup再包裹两个EdiText来实现,也不想去重写一个EditText来实现, 因为这些都不大合理, 最终我的解决方案是通过设置SpannableString来实现,其他什么都不动.
yes by keith
分析
这个效果有两个关键的问题:
- 大小字如何实现?
- 如何让字体跑到左右两边,中间空白?
方案
- 通过SpannableString设置AbsoluteSizeSpan来实现大小字
- 测量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的计算有点问题,解决方法有两个,实现一种即可.
- 设置paddingLeft和paddingRight
- 设置背景
<EditText
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@null"
android:paddingLeft="0dp"
android:paddingRight="0dp" />
