效果图
直接看效果图
分析一波
就是控件下面的一行文本,用canvas画出来,而不是用TextView(当然你用TextView也是可以实现的,本文不做讨论)。
我们用canvas画文本的方法是drawText(@NonNull String text, float x, float y, @NonNull Paint paint),简单介绍一下这个方法穿的参数值,text:要画的文本,x:起点的x坐标,y:起点的纵坐标,paint:画笔。
不卖关子,用一个canvas.drawText()方法应该是无法实现的。所以必须用两个canvas.drawText(),一个画蓝色的文本部分,一个画红色的文本部分。
难点就是确定第二次画红色文本时候的起始坐标,也就是蓝色文本的长度。
/**
* Return the advance widths for the characters in the string.
*
* @param text The text to measure
* @param widths array to receive the advance widths of the characters.
* Must be at least a large as the text.
* 这个float数组 widths就是用来接收text字符串的长度的。
*
* @return the number of code units in the specified text.
*/
public int getTextWidths(String text, float[] widths) {
return getTextWidths(text, 0, text.length(), widths);
}
String tips = "您当前的最高额度为";
//起点X坐标
float startXDrawTip = spaceWidth;
//起点Y坐标
float startYDrawTip = yBitmap + bitmapFingerPress.getHeight() + 50;
//设置mPaint颜色 为蓝色
mPaint.setColor(getResources().getColor(R.color.colorPrimary));
//设置字体大小
mPaint.setTextSize(40);
//画蓝色部分文本
canvas.drawText(tips, startXDrawTip, startYDrawTip, mPaint);
//下面是关键,主要是获取画红色文本的起始坐标值,也就是获取蓝色文本的宽度。
//获取蓝色文本的宽度
mPaint.getTextWidths(tips, textWidths);
//蓝色文本的宽度 为 widths
float blueWidth = 0.0F;
for (int i = 0; i < textWidths.length; i++) {
blueWidth += textWidths[i];
}
//设置mpaint颜色 为红色
mPaint.setColor(getResources().getColor(R.color.colorAccent));
//计算出红色文本的起点X坐标,画红色文本
canvas.drawText("1000", startXDrawTip + blueWidth, startYDrawTip, mPaint);
其实难点就是如何获取用canvas.drawText()画出的文本的长度,到没有太大的技术含量,就当做一个记录吧。
这种方法的缺陷还是比较明显的。
1.没法自动换行
2.如果颜色五颜六色的话,会比较复杂
3.字体大小设置的时候有点问题,因为单位是像素
所以,如果遇到类似的问题,还是用TextView的SpannableStringBuilder来解决 比较好。
如有错误,欢迎指正!