写点什么

自定义 View:文字的测量与绘制

用户头像
Changing Lin
关注
发布于: 刚刚
自定义View:文字的测量与绘制

1.知识点

  • 绘制一个圆环的方法:通过设置 Paint 的 StrokeWidth 和 Style 为 Paint.Style.STROKE 来绘制线条

  • 居中的纵向测量一:Paint.getTextBounds() 之后,使⽤ (bounds.top + bounds.bottom) / 2

  • 居中的纵向测量二:Paint.getFontMetrics() 之后,使⽤ (fontMetrics.ascend + fontMetrics.descend) / 2

  • 左对⻬:⽤ getTextBounds() 之后的 left 来计算

  • 多行文字的绘制:⽤ StaticLayout 或者 breakText() 来计算

2.原理


3.代码

public class SportView extends View {
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); Paint paintText = new Paint();
private static final float RADIUS = Util.dp2px(150); private static final float STROKE_WIDTH = Util.dp2px(20); private static final int CIRCLE_COLOR = Color.GRAY; private static final int ARC_COLOR = Color.RED; private static final int START_ANGLE = 270; private static final int SWEEP_ANGLE = 280;
public SportView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); }
@Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); }
Rect rect = new Rect(); private Paint.FontMetrics fontMetrics = new Paint.FontMetrics();
{ paint.setTextSize(Util.dp2px(90));// paint.setTypeface(Typeface.createFromAsset(getContext().getAssets(), "Quicksand-Regular.ttf")); paint.setTextAlign(Paint.Align.CENTER);
paint.getFontMetrics(fontMetrics); }
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas);
// 绘制圆环 paint.setColor(CIRCLE_COLOR); paint.setStrokeWidth(STROKE_WIDTH); paint.setStyle(Paint.Style.STROKE); canvas.drawCircle(getWidth()/2, getHeight()/2, RADIUS, paint);
// 绘制进度条 paint.setColor(ARC_COLOR); paint.setStyle(Paint.Style.STROKE); paint.setStrokeCap(Paint.Cap.ROUND); canvas.drawArc(getWidth()/2-RADIUS, getHeight()/2-RADIUS, getWidth()/2+RADIUS, getHeight()/2+RADIUS, START_ANGLE, SWEEP_ANGLE, false, paint);
// 绘制文字 paint.setStyle(Paint.Style.FILL);
String value = "ggghhh";// 方式一// paint.getTextBounds(value, 0, value.length(), rect);// float offset = (rect.bottom-rect.top)/2.0f;
// 方式二 float offset = (fontMetrics.ascent+fontMetrics.descent)/2.0f;
canvas.drawText(value, getWidth()/2, getHeight()/2 + offset, paint);
// StaticLayout }}
复制代码


发布于: 刚刚阅读数: 2
用户头像

Changing Lin

关注

获得机遇的手段远超于固有常规之上~ 2020.04.29 加入

我能做的,就是调整好自己的精神状态,以最佳的面貌去面对那些未曾经历过得事情,对生活充满热情和希望。

评论

发布
暂无评论
自定义View:文字的测量与绘制