一、前言
Android 自定义View是高级进阶不可或缺的内容,日常工作中,经常会遇到产品、UI设计出花里胡哨的界面。当系统自带的控件不能满足开发需求时,就只能自己动手撸一个效果。
本文就带自定义View初学者手动撸一个效果,通过自定义View实现钟表功能,每行代码都有注释,保证易懂,看不懂你留言打我!!!
二、实现效果
1、先看效果图
2、下载地址:点击下载
3、步骤分析
实现以上效果,主要分为四个步骤:
- 绘制外层表盘
- 绘制刻度线
- 绘制刻度数字
- 绘制指针
三、代码实现
1、绘制外层表盘
外层表盘就是一个空心圆,只要获取圆的x、y轴位置、圆的半径,使用Canvas.drawCircle()方法即可完成。
/**
* 绘制表盘
*/
private fun drawClock(canvas: Canvas, centerX: Float, centerY: Float) {
// 设置外层圆画笔宽度
mPaint.strokeWidth = mCircleWidth
// 设置画笔颜色
mPaint.color = Color.BLACK
// 设置画笔空心风格
mPaint.style = Paint.Style.STROKE
// 绘制圆方法
canvas.drawCircle(centerX, centerY, radius, mPaint)
}
2、绘制刻度线
绘制思路分析
看到效果图上密密麻麻刻度线后,先不要着急上手,屡清楚绘制思路。绘制刻度线一定要结合Canvas几何变换思路完成,千万不要局限于效果图的表面(如果对Canvas相关API不熟悉的朋友,建议先了解下)。
- 假设以12点钟为例,那么刻度线就是一条笔直的竖线,调用Canvas.drawLine()方法完成绘制。
- 如果每绘制完成一个刻度,把表盘逆时针/顺时针旋转一定角度,将下次需要绘制刻度线的位置旋转到12点钟位置,那么每次绘制刻度线的startX、startY、stopX、stopY一致(一致仅代表所有长刻度一致,所有短刻度一致)。
- 观察表盘共有60个刻度线(12长,48短),那么每次旋转角度degrees=360/60
听完以上分析,是否觉得绘制刻度线很简单,只要在60个刻度遍历判断长短,即可轻松出效果。
/**
* 绘制表盘刻度
*/
private fun drawClockScale(canvas: Canvas, centerX: Float, centerY: Float) {
for (index in 1..60) {
// 刻度绘制以12点钟为准,每次将表盘旋转6°,后续绘制都以12点钟为基准绘制
canvas.rotate(6F, centerX, centerY)
// 绘制长刻度线
if (index % 5 == 0) {
// 设置长刻度画笔宽度
mPaint.strokeWidth = 4.0F
// 绘制刻度线
canvas.drawLine(
centerX,
centerY - radius,
centerX,
centerY - radius + scaleMax,
mPaint
)
}
// 绘制短刻度线
else {
// 设置短刻度画笔宽度
mPaint.strokeWidth = 2.0F
canvas.drawLine(
centerX,
centerY - radius,
centerX,
centerY - radius + scaleMin,
mPaint
)
}
}
}
以上代码就完成了绘制刻度线的效果,下面插个题外话,第一次尝试在绘制刻度线的时候,表盘数字一并完成,后来发现数字如下图所示:
不知道有没有小伙伴遇到同样的问题,附上图表盘数字代码,
// 测量绘制数字
mPaint.strokeWidth = 1.0F
mPaint.style = Paint.Style.FILL
mPaint.getTextBounds((index / 5).toString(), 0, (index / 5).toString().length, mRect)
val width = mRect.width()
canvas.drawText(
(index / 5).toString(),
centerX - mRect.width() / 2,
(centerY - radius + scaleMax + mRect.height() + 8),
mPaint
)
3、绘制刻度数字
绘制数字方案已经更新,请向下查阅第四步骤!
由于第2步数字绘制有问题,所以采取了以下方式,个人觉得有些臃肿,如果有更简单的方式,请指教!
根据12个数字,使用三角函数关系分别计算出文本的坐标位置(x,y),然后完成文本绘制。其中3/6/9/12这四个数字比较简单,只需要在x轴或者y轴减去对应文本的宽或者高。其余数字计算方式,下面用图解方式举例:
以表盘数字2为例,因为表盘数字到圆心距离都是一样的(图上黑色斜线尺寸假设为h),
所以此时:x = hsin(60°) y = hcos(60°)
文本x轴位置 = centerX + x - 文本宽度
文本y轴位置 = centerY + y - 文本高度
/**
* 绘制表盘数字
*/
private fun drawClockNumber(canvas: Canvas, centerX: Float, centerY: Float) {
var x = 0.0F // 数字x坐标
var y = 0.0F // 数字y坐标
// 设置画笔宽度
mPaint.strokeWidth = 1.0F
// 设置画笔实心风格
mPaint.style = Paint.Style.FILL
// 数字距离表盘边界距离:半径-刻度线长度-数字距离刻度线间距
var tempSpace = radius