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

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

img_f6495c91c1d725e70e782cfc8431b084.png

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

img_a7f45938f621d056e452a68e8eb27117.gif
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)方法延迟一秒后继续绘制就好了。就和前面的效果图一模一样啦。

结语

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

其它

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

源码地址

优秀的个人博客,低调大师

微信关注我们

原文链接:https://yq.aliyun.com/articles/641071

转载内容版权归作者及来源网站所有!

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

相关文章

发表评论

资源下载

更多资源
优质分享Android(本站安卓app)

优质分享Android(本站安卓app)

近一个月的开发和优化,本站点的第一个app全新上线。该app采用极致压缩,本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Apache Tomcat7、8、9(Java Web服务器)

Apache Tomcat7、8、9(Java Web服务器)

Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache、Sun 和其他一些公司及个人共同开发而成。因为Tomcat 技术先进、性能稳定,而且免费,因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可,成为目前比较流行的Web 应用服务器。

Eclipse(集成开发环境)

Eclipse(集成开发环境)

Eclipse 是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。幸运的是,Eclipse 附带了一个标准的插件集,包括Java开发工具(Java Development Kit,JDK)。

Sublime Text 一个代码编辑器

Sublime Text 一个代码编辑器

Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。