系列文章目录
前言
这系列的文章主要是基于扔物线的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