最近做个项目,有个UI如图
github:https://github.com/ai2101039/YLDiscolorTextView
UI图
可能小伙伴第一时间想到,弄两个 textView,不过最近我痴迷onDraw,所以考虑自定义一个TextView,以达到最后的效果。
结果图
(绿色为baseLine)
也许有的小伙伴问,你这数字和汉字也没有底部对齐啊。
文字是以baseLine作为绘制基线,其Ascent、BaseLine、Descent 只与字号(如 14sp,16sp)和 文字字体(如 “微软雅黑”,“宋体”)相关。
这是小编用PS 做的。
代码
使用字号大的那段文字的baseline
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
TextPaint textPaint = beforeSize < afterSize ? afterPaint : beforePaint;
Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
float y = -fontMetrics.ascent;
canvas.drawText(beforeText, 0, y, beforePaint);
canvas.drawText(afterText, beforeWidth, y, afterPaint);
// baseLine
Paint paint = new Paint();
paint.setColor(resources.getColor(R.color._238E23));
paint.setStrokeWidth(1);
paint.setAntiAlias(true);
canvas.drawLine(0, y, beforeWidth + afterWidth, y, paint);
}