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

简介: 在上一篇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)方法延迟一秒后继续绘制就好了。就和前面的效果图一模一样啦。

结语

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

其它

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

源码地址

目录
相关文章
|
1月前
|
Android开发 开发者
安卓应用开发中的自定义视图
【9月更文挑战第37天】在安卓开发的海洋中,自定义视图犹如一座座小岛,等待着勇敢的探索者去发现其独特之处。本文将带领你踏上这段旅程,从浅滩走向深海,逐步揭开自定义视图的神秘面纱。
41 3
|
1月前
|
数据可视化 Android开发 开发者
安卓应用开发中的自定义View组件
【10月更文挑战第5天】在安卓应用开发中,自定义View组件是提升用户交互体验的利器。本篇将深入探讨如何从零开始创建自定义View,包括设计理念、实现步骤以及性能优化技巧,帮助开发者打造流畅且富有创意的用户界面。
85 0
|
17天前
|
搜索推荐 前端开发 Android开发
安卓应用开发中的自定义视图实现
【10月更文挑战第30天】在安卓开发的海洋中,自定义视图是那抹不可或缺的亮色,它为应用界面的个性化和交互体验的提升提供了无限可能。本文将深入探讨如何在安卓平台创建自定义视图,并展示如何通过代码实现这一过程。我们将从基础出发,逐步引导你理解自定义视图的核心概念,然后通过一个实际的代码示例,详细讲解如何将理论应用于实践,最终实现一个美观且具有良好用户体验的自定义控件。无论你是想提高自己的开发技能,还是仅仅出于对安卓开发的兴趣,这篇文章都将为你提供价值。
|
18天前
|
Android开发 开发者 UED
安卓开发中自定义View的实现与性能优化
【10月更文挑战第28天】在安卓开发领域,自定义View是提升应用界面独特性和用户体验的重要手段。本文将深入探讨如何高效地创建和管理自定义View,以及如何通过代码和性能调优来确保流畅的交互体验。我们将一起学习自定义View的生命周期、绘图基础和事件处理,进而探索内存和布局优化技巧,最终实现既美观又高效的安卓界面。
28 5
|
1月前
|
XML 前端开发 Java
安卓应用开发中的自定义View组件
【10月更文挑战第5天】自定义View是安卓应用开发的一块基石,它为开发者提供了无限的可能。通过掌握其原理和实现方法,可以创造出既美观又实用的用户界面。本文将引导你了解自定义View的创建过程,包括绘制技巧、事件处理以及性能优化等关键步骤。
|
2月前
|
Android开发 开发者
安卓开发中的自定义视图:从入门到精通
【9月更文挑战第19天】在安卓开发的广阔天地中,自定义视图是一块充满魔力的土地。它不仅仅是代码的堆砌,更是艺术与科技的完美结合。通过掌握自定义视图,开发者能够打破常规,创造出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战应用,一步步展示如何用代码绘出心中的蓝图。无论你是初学者还是有经验的开发者,这篇文章都将为你打开一扇通往创意和效率的大门。让我们一起探索自定义视图的秘密,将你的应用打造成一件艺术品吧!
62 10
|
2月前
|
XML 编解码 Android开发
安卓开发中的自定义视图控件
【9月更文挑战第14天】在安卓开发中,自定义视图控件是一种高级技巧,它可以让开发者根据项目需求创建出独特的用户界面元素。本文将通过一个简单示例,引导你了解如何在安卓项目中实现自定义视图控件,包括创建自定义控件类、处理绘制逻辑以及响应用户交互。无论你是初学者还是有经验的开发者,这篇文章都会为你提供有价值的见解和技巧。
46 3
|
2月前
|
前端开发 Android开发 开发者
安卓应用开发中的自定义视图基础
【9月更文挑战第13天】在安卓开发的广阔天地中,自定义视图是一块神奇的画布,它允许开发者将想象力转化为用户界面的创新元素。本文将带你一探究竟,了解如何从零开始构建自定义视图,包括绘图基础、触摸事件处理,以及性能优化的实用技巧。无论你是想提升应用的视觉吸引力,还是追求更流畅的交互体验,这里都有你需要的金钥匙。
|
2月前
|
缓存 搜索推荐 Android开发
安卓应用开发中的自定义View组件实践
【9月更文挑战第10天】在安卓开发领域,自定义View是提升用户体验和实现界面个性化的重要手段。本文将通过一个实际案例,展示如何在安卓项目中创建和使用自定义View组件,包括设计思路、实现步骤以及可能遇到的问题和解决方案。文章不仅提供了代码示例,还深入探讨了自定义View的性能优化技巧,旨在帮助开发者更好地掌握这一技能。
|
2月前
|
前端开发 搜索推荐 Android开发
探索安卓开发中的自定义视图##
【9月更文挑战第6天】 在安卓应用开发的世界里,自定义视图如同绘画艺术中的色彩,它们为界面设计增添了无限可能。通过掌握自定义视图的绘制技巧,开发者能够创造出既符合品牌形象又提升用户体验的独特界面元素。本文将深入浅出地介绍如何从零开始构建一个自定义视图,包括基础框架搭建、关键绘图方法实现、事件处理机制以及性能优化策略。准备好让你的安卓应用与众不同了吗?让我们开始吧! ##
下一篇
无影云桌面