Android 画一个 iPhone 样式的小时钟
起因
iPhone主界面的时钟几乎每天都会看到,某天突发奇想,用Android是否也可以画一个类似的呢?于是决定也尝试着画一个,顺便巩固下自绘控件的知识,请看图片
构思
做一件事情先要在脑海中想清楚,仔细观察了下iPhone的这个时钟(以画图的方式来考虑),其实很简单,大概分析如下:
背景是一个黑色的圆角矩形
表盘是一个白色的正圆,且半径稍小于背景圆角矩形宽一半
表盘中间是一个小正圆来显示指针的轴
表盘内圈为1-12的数字,且每个数字的角度间隔为30度(360/12=30)
时针、分钟、秒针分别是粗细、长度、颜色不同的线段,且从中心点放射出
相关Api
既然大概的思路有了,那么就要去思考接下来可能需要用到的Api
重写onMeasure函数,说明请移步测量初步
绘图Api的使用(画圆角矩形、圆、线段、文本)函数的说明请移步2D绘图初步
canvas.drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint)
canvas.drawCircle(float cx, float cy, float radius, @NonNull Paint paint)
canvas.drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint)
canvas.drawText(@NonNull String text, float x, float y, @NonNull Paint paint)
正弦和余弦(计算指针、表盘数字的终点坐标)
Math.sin(double d)
Math.cos(double d)
角度与弧度的换算(由于sin和cos函数需要的参数为“弧度”而不是“角度”,所以需要将角度转换为弧度)
Math.toRadians(double angdeg)
角度转换为弧度该怎么转换呢,我们知道1弧度的弧的长度=半径长度,并且圆周长(这里解释成全部弧长和360度更好理解)为2πr,也就是说360度的弧长为2πr,180度的弧长为πr,那弧度呢?,当然是πr/r=π啦,那假设60度呢?也就是π/(180/60),可以转换为π*60/180,也就是转换公式啦,当然系统为我们提供了直接转换的函数,我们就偷下懒啦,其实该函数内部算法也是用了