自定义UI 自制表盘

系列文章目录

1. 自定义UI 基础知识
2. 自定义UI 绘制饼图
3. 自定义UI 圆形头像
4. 自定义UI 自制表盘
5. 自定义UI 简易图文混排
6. 自定义UI 使用Camera做三维变换
7. 自定义UI 属性动画
8. 自定义UI 自定义布局

---

前言

这系列的文章主要是基于扔物线的HenCoderPlus课程的源码来分析学习。

---

• 扔物线课程源码：Dashboard.java
• Android官方文档：自定义绘制

创建绘制对象

我们需要创建一个画笔🖌Paint来绘制我们的表盘。

public class Dashboard extends View {
   
	// 画笔
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

    public Dashboard(Context context, @Nullable AttributeSet attrs) {
   
        super(context, attrs);
    }

    {
   
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(Utils.dp2px(3));
	}
}

设置布局位置

如果您的视图不需要对其大小进行特殊控制，您只需替换一个方法，即onSizeChanged()。系统会在首次为您的视图分配大小时调用onSizeChanged()，如果视图大小由于任何原因而改变，系统会再次调用该方法。请在onSizeChanged()中计算位置、尺寸以及其他与视图大小相关的任何值，而不要在每次绘制时都重新计算。

摘录自Andorid官方文档：处理布局事件

public class Dashboard extends View {
   
	// 画笔
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

    // 表盘圆心的位置
    private int ww;
    private int hh;

    public Dashboard(Context context, @Nullable AttributeSet attrs) {
   
        super(context, attrs);
    }

    {
   
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(Utils.dp2px(3));
	}

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
   
        super.onSizeChanged(w, h, oldw, oldh);
        ww = getWidth() / 2;
        hh = getHeight() / 2;
    }
}

自定义绘制内容

先上一下自制表盘的效果图吧：

表盘参数说明

参数	说明	备注
表盘圆心	(ww, hh)
表盘半径	150 dp
表盘指针长度	100 dp
刻度柱子规格	2 dp x 18 dp	实质上是一个矩形。
表盘刻度数	21 个
表盘起始角度	150°
表盘扫过的角度	240°

绘制表盘弧度

public class Dashboard extends View {
   
    // 表盘起始角度
    private static final int START_ANGLE = 150;
    // 表盘扫过的角度
    private static final int SWEEP_ANGLE = 240;

    // 表盘的半径
    private static final float RADIUS = Utils.dp2px(150);

    // 画笔
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

    // 表盘圆心的位置
    private int ww;
    private int hh;

	// 省略了部分重复的代码

    @Override
    protected void onDraw(Canvas canvas) {
   
        super.onDraw(canvas);

        float l = ww - RADIUS;
        float t = hh - RADIUS;
        float r = ww + RADIUS;
        float b = hh + RADIUS;
        // 画线
        canvas.drawArc(l, t, r, b, START_ANGLE, SWEEP_ANGLE, false, paint);
    }
}

绘制表盘刻度

这一章节使用的是android.graphics.Paint#setPathEffect方法。具体使用可见扔物线官方博客介绍2.5 setPathEffect(PathEffect effect)，这里就不赘述了。

---

准备刻度柱子

public class Dashboard extends View {
   
    // 虚线标签的宽度
    private static final float STAMP_WIDTH = Utils