从自定义时钟⏰了解draw流程
今天继续说绘制三部曲之最后一曲——draw。
从performDraw
同样，draw流程还是开始于ViewRootImpl的performDraw方法：
//ViewRootImpl.java
private void performDraw() {
boolean canUseAsync = draw(fullRedrawNeeded);
}
private boolean draw(boolean fullRedrawNeeded){
if (!dirty.isEmpty() || mIsAnimating || accessibilityFocusDirty) {
if (!drawSoftware(surface, mAttachInfo, xOffset, yOffset,
scalingRequired, dirty, surfaceInsets)) {
return false;
}
}
return useAsyncReport;
}
private boolean drawSoftware(Surface surface, AttachInfo attachInfo, int xoff, int yoff,
boolean scalingRequired, Rect dirty, Rect surfaceInsets) {
mView.draw(canvas);
return true;
}
在经过performDraw() -> draw() -> drawSoftware() 三连跳之后，会转到View类中的draw方法：
//View.java
public void draw(Canvas canvas) {
final int privateFlags = mPrivateFlags;
mPrivateFlags = (privateFlags & ~PFLAG_DIRTY_MASK) | PFLAG_DRAWN;
// Step 1, draw the background, if needed
drawBackground(canvas);
// Step 2, save the canvas' layers
canvas.saveUnclippedLayer..
// Step 3, draw the content
onDraw(canvas);
// Step 4, draw the children
dispatchDraw(canvas);
// Step 5, draw the fade effect and restore layers
canvas.drawRect..
// Step 6, draw decorations (foreground, scrollbars)
onDrawForeground(canvas);
}
在View.draw()方法中，就开始了一系列绘制方法：
- 1、绘制背景
- 2、保存图层信息
- 3、绘制内容（onDraw）
- 4、绘制children
- 5、绘制边缘
- 6、绘制装饰
其中，第三步也就是我们自定义View必用的onDraw方法，在该方法中，需要我们绘制View本身的内容。
到此，draw的整个流程也就结束了，可以看到，相比于mearsure（测量）和layout（布局）两个流程，draw的流程相对比较简单，因为它不会和父View或者子View产生过多的联系，只需要将自己的部分进行绘画即可。
接下来，我们就重点看看这个onDraw方法。怎么看？像上次一样，我们实现一个自定义View——时钟⏰View
自定义时钟View
构思
首先，给大家看看我们最终需要完成的效果图：
我们可以大致解析下，这个时钟包括几个部分：
- 1、外表盘
- 2、表盘刻度
- 3、中心点
- 4、时分秒三条线
大概就是这么个组成结构，为了方便，我们把很多属性都设置为固定值了，测量的部分（onMearsure）我们也省略了，直接使用固定值来确定view的宽高。
当然，实际情况下的自定义View需要把每个参数值比如颜色、大小、宽度等都设置为可配置的，然后写进style里面，而且对于测量方法也要进行重写，针对不同测量规格进行判断，今天我们就把重点放在onDraw上面，这些细节下次我们再单独一节进行讲解。
构造函数
身为一个自定义View，首先还是要写构造函数，我们知道自定义View一般需要四种构造函数，在kotlin中其实有一种比较简便的写法：
class JimuClockView @JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null,
defStyleAttr: Int = 0, defStyleRes: Int = 0
) : View(context, attrs, defStyleAttr, defStyleRes){
}
就是用到这个@JvmOverloads 注解。
由于kotlin中的方法参数可以设定默认值，而对于这种有默认值参数的方法利用@JvmOverloads注解就可以自动生成多个重载方法。
绘制时钟表盘和中心点
下面就开始进行onDraw方法里面的内容，首先就是表盘和中心点。
表盘是一个有宽度的圆，用到的方法就是Canvas.drawCircle(float cx, float cy, float radius, @NonNull Paint paint)
其中，（cx,cy）就是圆心点，而radius就是圆的半径，paint就是画笔。
而表盘和中心点都是通过drawCircle画的圆，只不过表盘是空心圆（STROKE），中心点是实心圆（FILL）。
init {
mPaint = Paint()
mPaint.style = Paint.Style.STROKE
mPaint.isAntiAlias = true
mPaint.strokeWidth = roundWidth.toFloat()
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
//中心点
val pointWidth = width / 2.0f
//绘制表盘
mPaint.strokeWidth = roundWidth.toFloat()
mPaint.style = Paint.Style.STROKE
mPaint.color = Color.BLACK
canvas.drawCircle(pointWidth, pointWidth, pointWidth - roundWidth, mPaint)
//绘制中心点
mPaint.style = Paint.Style.FILL
mPaint.color = Color.BLACK
canvas.drawCircle(pointWidth, pointWidth, 30f, mPaint)
}
搞定，效果图如下：
绘制表盘刻度
根据效果图可知，刻度是分为两种：
- 长刻度，代表小时，一圈12个长刻度。
- 短刻度，代表分钟，一圈60个短刻度。
对于刻度的绘画，用到的就是drawline方法，不同的刻度可以通过rotate旋转画布的坐标系来实现。
//刻度长度
var lineWidth = 0f
//刻度离边界高度
var startHeight = 30f
canvas.save()
for (i in 0 until 60) {
if (i % 5 == 0) {
lineWidth = 40f
mPaint.strokeWidth = 4f
mPaint.color = Color.BLACK
} else {
lineWidth = 30f
mPaint.strokeWidth = 2f
mPaint.color = Color.BLUE
}
//绘画刻度
canvas.drawLine(pointWidth, startHeight, pointWidth, startHeight+lineWidth, mPaint)
//旋转画布坐标系
canvas.rotate(6f, pointWidth, pointWidth)
}
canvas.restore()
大概逻辑就是通过循环画出短刻度，再每隔5单位画一次长刻度，还需要注意的一点是针对坐标系做的一些改变，需要在完成这部分绘制之后对画布的坐标系进行恢复。
比如上述的canvas.rotate方法，在这之前需要调用save保存画布的原始状态，最后在调用restore方法恢复画布，完整调用链如下：
canvas.save()
//...
canvas.rotate() / canvas.translate()
//...
canvas.restore()
最后运行看看效果：
绘制时分秒针
最后就是画出时分秒三种针。
根据效果图可以得知三种针的一些需要注意的点：
- 1、时分秒的长度是从短到长顺序,宽度是从粗到细顺序。
- 2、每个针从中心点指向对应时间点。
- 3、针并不是纯粹的线，而是圆角矩形，所以我们可以通过drawRoundRect方法来实现这个针的绘制。
- 4、和刻度一样，还是通过旋转画布的坐标系来完成绘制。
- 5、由于中心点要压住时分秒针，所以中心点的绘制移到最后。
然后就是获取对应时间点，我们可以通过Calendar类来获取，要注意的我们要获取的不是具体的时分秒，而是在圆盘中的角度，所以：
- 时针指向的点，对应的角度应该是
（小时+分钟/60）/12 * 360，例如10:30，对应的角度就是 10.5/12 * 360= 315度。
分针、秒针以此类比。
calendar = Calendar.getInstance()
val hour = calendar.get(Calendar.HOUR)
val minute = calendar.get(Calendar.MINUTE)
val second = calendar.get(Calendar.SECOND)
angleHour = hour + minute / 60f
angleMinute = minute + second / 60f
angleSecond = second
mPaint.style = Paint.Style.FILL
//绘制时针
canvas.save()
canvas.rotate(angleHour / 12.0f * 360.0f, pointWidth, pointWidth)
val mHourWidth = 20f
val rectHour = RectF(
pointWidth - mHourWidth / 2,
pointWidth * 0.5f,
pointWidth + mHourWidth / 2,
pointWidth
)
mPaint.color = Color.BLACK
canvas.drawRoundRect(rectHour, pointWidth, pointWidth, mPaint)
canvas.restore()
//绘制分针
canvas.save()
canvas.rotate(angleMinute / 60.0f * 360.0f, pointWidth, pointWidth)
val mMinuteWidth = 15f
val rectMinute = RectF(
pointWidth - mMinuteWidth / 2,
pointWidth * 0.4f,
pointWidth + mMinuteWidth / 2,
pointWidth
)
mPaint.color = Color.BLACK
canvas.drawRoundRect(rectMinute, pointWidth, pointWidth, mPaint)
canvas.restore()
//绘制秒针
canvas.save()
canvas.rotate(angleSecond / 60.0f * 360.0f, pointWidth, pointWidth)
val mSecondWidth = 10f
val rectSecond = RectF(
pointWidth - mSecondWidth / 2,
pointWidth * 0.2f,
pointWidth + mSecondWidth / 2,
pointWidth
)
mPaint.color = Color.RED
canvas.drawRoundRect(rectSecond, pointWidth, pointWidth, mPaint)
canvas.restore()
//绘制中心点
mPaint.style = Paint.Style.FILL
mPaint.color = Color.BLACK
canvas.drawCircle(pointWidth, pointWidth, 30f, mPaint)
效果图：
让⏰动起来～
最后，就是让它动起来，开启一个定时器，每隔一秒重新绘制即可。
init {
timerHandler = TimerHandler(this)
}
/**
* 定时器
*/
class TimerHandler(clockView: JimuClockView) : Handler() {
private val clockViewWeakReference: WeakReference<JimuClockView> = WeakReference(clockView)
override fun handleMessage(msg: Message) {
when (msg.what) {
0 -> {
val view = clockViewWeakReference.get()
if (view != null) {
view.getNowtime()
view.invalidate()
sendEmptyMessageDelayed(0, 1000)
}
}
}
}
}
/**
* 开启定时
*/
fun startTimer() {
timerHandler.removeMessages(0)
timerHandler.sendEmptyMessage(0)
}
/**
* 关闭定时
*/
private fun stopTimer() {
timerHandler.removeMessages(0)
}
override fun onVisibilityChanged(
changedView: View,
visibility: Int
) {
super.onVisibilityChanged(changedView, visibility)
if (visibility == VISIBLE) {
startTimer()
} else {
stopTimer()
}
}
效果图：
感谢大家的阅读，有一起学习的小伙伴可以关注下公众号—
码上积木❤️ 每日一个知识点，建立完整体系架构。