自定义View之简易时钟

今天要实现的是自定义View实现一款简易时钟，主要就是练习如何进行自定义View，所以基本上没有什么美感可言。下面，我们就开始了。

要实现这款简易时钟，我们还是要先分析出它所包含的元素。就以上面的效果图来说，基本上包括了：最外圈大表盘以及内部中间两个小圆圈，刻度线，刻度文字，表针，数字时间以及上方作者名称。OK，一共就这么多的元素，下面我们就可以开始了。

第一步，绘制表盘以及最中间的两个小圆圈：

//半径
radius = mWidth / 2 - 20;
//坐标移动到中心位置
canvas.translate(mWidth / 2, mHeight / 2);
//绘制表盘
canvas.drawCircle(0, 0, radius, mOuterPaint);
//绘制中间的两个小圆圈
canvas.drawCircle(0, 0, radius / 32, mOuterPaint);
canvas.drawCircle(0, 0, radius / 64, mOuterPaint);

很简单，就是直接绘制三个圆，半径大小不一致罢了。

第二步，绘制刻度线：

//刻度线的高度
timeHeight = radius - 15;
// 绘制刻度线
for (int i = 0; i < 60; i++) {
    //整点刻度线
    if (i % 5 == 0) {
        canvas.drawLine(radius, 0, timeHeight - 15, 0, mTimePaint);
    } else {
        //普通刻度线
        canvas.drawLine(radius, 0, timeHeight, 0, mTimePaint);
    }
    //每一次循环，画布旋转 6 度
    //一个整点包含一小时，角度：360/12 = 30
    //一个整点包含5分钟，每分钟的角度：30/5 = 6
    canvas.rotate(360 / 60, 0, 0);
}

这里面用到了canvas.rotate(360 / 60, 0, 0)，rotate表示的是画布旋转，后面的参数是旋转中心点的x以及y坐标。这样，每次画布旋转6度，进行刻度的绘制。

第三步，绘制刻度线的文字：

//12次循环，绘制12次
for (int i = 1; i <= 12; i++) {
    Rect rect = new Rect();
    //绘制的刻度文字
    String text = i + "";
    //测量出文字的宽度
    float measureText = mTextPaint.measureText(text);
    mTextPaint.getTextBounds(text, 0, text.length(), rect);
    //刻度文字起始的 x 坐标  -10 是为了让文字和刻度之间留一些空隙
    float x = timeHeight - 10 - measureText;
    //得到文字宽的的 1/2
    float xText = measureText / 2;
    //得到的是文字的中间的高度值
    float y = (rect.bottom - rect.top) / 2;
    //这里是以 1 点为基准，利用三角函数计算得到全部的坐标值
    float dx = (float) ((x) * Math.sin(i * 30 * Math.PI / 180));
    float dy = (float) ((x) * Math.cos(i * 30 * Math.PI / 180));
    //绘制刻度文字，在 x 方向上 - 文字宽的的 1/2
    //在 基线方向上 + 文字的中间的高度值
    canvas.drawText(text, dx - xText, -dy + y, mTextPaint);
}

这样，就绘制出了刻度文字。其实，绘制刻度文字是可以利用rotate()，只不过这样利用画布旋转绘制出的文字有的是倒立的。似乎是我以3点为基准出现的问题。最后，没办法，就利用三角函数，以1点为基准绘制完成了。为何以1点为基准呢？因为循环从1开始啊。。。

第四步，绘制指针并让其动起来：

在绘制指针之前我们是要得到当前的时间的，然后，指针顺着当前时间运动。所以，先要获取当前时间：

        Calendar mCalendar = Calendar.getInstance();
        mTempHour = mCalendar.get(Calendar.HOUR);
        mTempMinute = mCalendar.get(Calendar.MINUTE);
        mTempSecond = mCalendar.get(Calendar.SECOND);
//                    Log.d(TAG, "handleMessage: " + tempSecond);
//                    Log.d(TAG, "refreshTime: " + tempHour + tempMinute + tempSecond);
        //计算出秒指针旋转的角度
        mSecondRotate = mTempSecond * 360 / 60;
//                    Log.d(TAG, "handleMessage: " + mSecondRotate);
        //计算出分指针的旋转的角度
        mMinuteRotate = (float) (mTempMinute * 360 / 60 + mTempSecond * 0.1);
//                    Log.d(TAG, "handleMessage: "+tempMinute);
        //计算出时针需要旋转的角度
        mHourRotate = (float) (mTempHour * 30 + mTempMinute * 0.5);

这里利用了Calendar，得到当前的时间。然后，计算出各个指针需要旋转的角度。这里，注意，秒针走一秒，分针走当前秒数 0.1（6/60 = 0.1）度。而分针走0.1度，时针走当前分钟数 0.5（6*30/360 = 0.5）度。

canvas.save();
canvas.save();
canvas.rotate(hourRotate, 0, 0);
canvas.drawLine(0, 10, 0, -(radius - 160), mHourPoint);
canvas.restore();
canvas.save();
canvas.rotate(minuteRotate, 0, 0);
canvas.drawLine(0, 20, 0, -(radius - 120), mMinutePaint);
canvas.restore();
canvas.save();
canvas.rotate(secondRotate, 0, 0);
canvas.drawLine(0, 30, 0, -(radius - 80), mSecondPoint);
canvas.restore();
canvas.restore();

这里先用save()方法保存整个画布状态，在每次绘制指针前，再次保存画布状态。然后，在绘制指针前都旋转相应的角度。一次次旋转，看起来就像指针在动。之所以每次绘制指针前都保存画布是为了不让三个指针互相干扰。每一个指针都在一层独立的画布上。当然，这一步，一定要将指针绘制到12点的位置，3个指针都是。因为你算出的旋转角度就是从12点起，到12点结束，360度。

第五步，绘制数字时间：

Rect rect = new Rect();
//当前的时间
String time = mTempHour + " : " + mTempMinute + " : " + mTempSecond;
//测量文字
mNumberPaint.getTextBounds(time, 0, time.length(), rect);
//其实 x 坐标为 文字宽度的一半
int dx =rect.width() / 2;
//基准线就定为 半径的一半
int baseLine = radius / 2;
//绘制文字
canvas.drawText(time, dx, baseLine, mNumberPaint);

第六步，绘制作者名字：

Rect rect = new Rect();
//文字
String author = "By Kevin";
//测量文字
mNumberPaint.getTextBounds(author, 0, author.length(), rect);
//起始 x 坐标为文字的一半 ，为负值是在 左方 ，因为原点在屏幕中心
int dx = -rect.width() / 2;
//基准线就定为 半径的一半 ，为负值在 上方 ，因为原点在屏幕中心
int y = -radius / 2;
canvas.drawText(author, dx, y, mAuthorPaint);

这两步代码基本一样，只是方向相反，也是很简单。

最后，给出onDraw()中的代码：

 @Override
    protected void onDraw(Canvas canvas) {
        //半径
        radius = mWidth / 2 - 20;
        //刻度线的高度
        timeHeight = radius - 15;
        //坐标移动到中心位置
        canvas.translate(mWidth / 2, mHeight / 2);
        //绘制表盘
        canvas.drawCircle(0, 0, radius, mOuterPaint);
        //绘制中间的两个小圆圈
        canvas.drawCircle(0, 0, radius / 32, mOuterPaint);
        canvas.drawCircle(0, 0, radius / 64, mOuterPaint);
        //绘制作者名字
        drawAuthor(canvas);
//        mHandler.sendEmptyMessage(HANDLER_MSG);
        //延时1s绘制，会不停的执行onDraw()方法，从而实现指针的动态效果
        //这里利用Handler也是可以的
        postInvalidateDelayed(1000);
        //绘制刻度
        drawScale(canvas);
        //绘制刻度文字
        drawScaleText(canvas);
        //得到当前时间
        refreshTime();
        //绘制数字时间
        drawNumberTime(canvas);
        //绘制指针
        drawPoints(canvas, mHourRotate, mMinuteRotate, mSecondRotate);
    }

到此为止，就完成了这个简易时钟的绘制。

赏

谢谢你请我喝咖啡~~~

支付宝

微信