美文网首页androidAndroid技术知识Android开发
Android初级进阶之自定义时钟(二)

Android初级进阶之自定义时钟(二)

作者: AndroidRookie | 来源:发表于2016-08-09 14:54 被阅读300次

    在上一篇Android初级进阶之自定义时钟(一)里面已经完成了时钟的静态绘制,是这个样子的:

    现在我们要做的是在上面的基础上继续完善,达到以下的效果。

    image

    前言

    果然,我还是不够格,还是要继续学习,继续积累。上一篇不是已经完成了页面的绘制咯,然后需要将时分秒的指针动起来,与系统时间对应,想了老半天:没有办法计算出指针的x2和y2坐标,于是什么勾股定理,三角函数统统上了一遍,结果还是不行。最后才发现,答案就在前面,我已经写出来了

    绘制刻度线与刻度值是最大的难点,在这里就是利用了Canvas为我们提供的rotate方法,顾名思义,就是旋转画布。我们以视图坐标系 x y 进行绘制,没绘制完成一次,旋转相应的角度就完成了刻度线的绘制。玩过PS的人应该好理解。
    

    明明都已经将刻度盘都画出来了,那么是不是只要将刻度盘的刻度的长度延伸,这不就是时分秒指针了吗?作孽啊!

    获取当前的时间

     int hour = Integer.parseInt(new SimpleDateFormat("HH").format(new Date()));
     int minute = Integer.parseInt(new SimpleDateFormat("mm").format(new Date()));
     int second = Integer.parseInt(new SimpleDateFormat("ss").format(new Date()));
    

    绘制指针

    绘制指针并不难,就和刻度一样,只不过是将长度变长了而已,这里面最关键的部分是求角度,不过这没什么难度的,以下是绘制指针的代码

       //------------------绘制时针
        canvas.save();//保存画布
        Paint paintHour = new Paint();
        paintHour.setStrokeWidth(15);//宽度
        paintHour.setColor(0xffff6600);//颜色 红色
        paintHour.setAntiAlias(true);//抗锯齿
        //当前小时百分比的度数  分钟在一个小时内的度数
        float hourDegree = (hour / 12f * 360) + (minute / 60f * 15/*一个小时是15度*/);
        int hourWidth = (int) (mCircleWidth / 2 * 0.5/*时钟半径的一半,也就是长度*/);
        canvas.rotate(hourDegree, mCircleWidth / 2, mCircleWidth / 2);//旋转角度
        canvas.drawLine(mCircleWidth / 2,
                mCircleWidth / 2 - hourWidth,
                mCircleWidth / 2,
                mCircleWidth / 2 + offset + 10/*offset + 10 是为了突出指针,不至于难看*/,
                paintHour);
        //当前画布与保存的画布合并
        canvas.restore();
        //------------------绘制时针
    
        //------------------绘制分针
        canvas.save();//保存画布
        Paint paintMinute = new Paint();
        paintMinute.setStrokeWidth(10);
        paintMinute.setAntiAlias(true);
        float minuteDegree = minute / 60f * 360;
        int minuteWidth = (int) (mCircleWidth / 2 * 0.7);
        canvas.rotate(minuteDegree, mCircleWidth / 2, mCircleWidth / 2);
        canvas.drawLine(mCircleWidth / 2,
                mCircleWidth / 2 - minuteWidth,
                mCircleWidth / 2,
                mCircleWidth / 2 + offset * 2,
                paintMinute);
        //当前画布与保存的画布合并
        canvas.restore();
        //------------------绘制分针
    
        //----------------------秒针
        Paint paintSecond = new Paint();
        paintSecond.setStrokeWidth(7);
        paintSecond.setAntiAlias(true);
        paintSecond.setColor(0xffff0000);
        canvas.save();
        float secondDegree = second / 60f * 360;//秒针  15秒的 度数
        canvas.rotate(secondDegree, mCircleWidth / 2, mCircleWidth / 2);
        int secondWidth = (int) (mCircleWidth / 2 * 0.9);//获得秒针的长度
        canvas.drawLine(mCircleWidth / 2,
                mCircleWidth / 2 - secondWidth,
                mCircleWidth / 2,
                mCircleWidth / 2 + offset * 3,
                paintSecond);
        //当前画布与保存的画布合并
        canvas.restore();
        //----------------------秒针
    
        //---------------------绘制秒针上面的圆圈
        canvas.save();
        Paint pinPaintCircle = new Paint();
        pinPaintCircle.setColor(0xffff0000);
        pinPaintCircle.setAntiAlias(true);
        canvas.drawCircle(mCircleWidth / 2, mCircleWidth / 2, offset, pinPaintCircle);
        canvas.restore();
        //---------------------绘制秒针上面的圆圈
    

    完了,这部分就是绘制指针,如何让指针动起来,也非常的简单,只需要绘制完成后调用postInvalidateDelayed(1000)方法延迟一秒后继续绘制就好了。就和前面的效果图一模一样啦。

    结语

    好记性不如烂笔头,这是一句是在的话。有很多东西,尤其是像我们搞技术的,技术不用,慢慢的就会忘记的。另外我的语言水平不怎么好和技术都不怎么好,如果我哪里说得不对,及时指出,我会虚心更正。

    其它

    随着慢慢的深入,我会将我的一些经验放出来的,希望共同进步。这个时钟暂时就到这里,不过我会在这个基础之上继续弄仪表盘。

    源码地址

    相关文章

      网友评论

      • Richard_Peng:时钟运行1分钟左右秒针会跳一个格,这个应该是加载view的过程中会占用些时间.怎么去减少这个误差让时钟能够更精确?

      本文标题: Android初级进阶之自定义时钟(二)

      本文链接:https://www.haomeiwen.com/subject/kbldsttx.html