Android自定义View实现时钟功能

最近在练习自定义view, 想起之前面试的时候笔试有道题是写出自定义一个时钟的关键代码. 今天就来实现一下. 步骤依然是先分析, 再上代码.

实现效果

View分析

时钟主要分为五个部分:

1、中心点: 圆心位置
2、圆盘: 以中心点为圆心,drawCircle画个圆
3、刻度:

paint有个aip, setPathEffect可以根据path画特效, 那么刻度就可以根据圆的path画一个矩形path的特效, 并且这个api只会画特效, 不会画出圆.

/**
* shape: 特效的path, 这里传一个矩形
* advance: 两个特效path之间的间距, 即两个矩形的left间距
* phase: 特效起始位置的偏移
* style: 原始path拐弯的时候特效path的转换方式,这里用ROTATE跟着旋转即可
*/
PathDashPathEffect(Path shape, float advance, float phase,
                              Style style)

刻度又分两种, 粗一点刻度: 3、6、9、12, 和细一点的刻度. 两种特效又可以用SumPathEffect合起来画

SumPathEffect(PathEffect first, PathEffect second) 

4、时分秒指针

时分秒指针都是一个圆角矩形, 先把他们的位置计算出来, 然后旋转圆心去绘制不同角度的指针.

5、动画效果

TimerTask每隔一秒计算时间, 根据时间去换算当前时分秒指针的角度, 动态变量只有三个角度.

实现源码

//
// Created by skylar on 2022/4/19.
//
class ClockView : View {
    private var mTimer: Timer? = null
    private val mCirclePaint: Paint = Paint()
    private val mPointerPaint: Paint = Paint()
    private val mTextPaint: Paint = Paint()

    private val mCirclePath: Path = Path()
    private val mHourPath: Path = Path()
    private val mMinutePath: Path = Path()
    private val mSecondPath: Path = Path()

    private lateinit var mPathMeasure: PathMeasure
    private lateinit var mSumPathEffect: SumPathEffect

    private var mViewWidth = 0
    private var mViewHeight = 0
    private var mCircleWidth = 6f
    private var mRadius = 0f
    private var mRectRadius = 20f
    private var mHoursDegree = 0f
    private var mMinutesDegree = 0f
    private var mSecondsDegree = 0f
    private var mCurrentTimeInSecond = 0L

    constructor(context: Context) : super(context)

    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)

    constructor(
        context: Context, attrs: AttributeSet?,
        defStyleAttr: Int
    ) : super(context, attrs, defStyleAttr)

    init {
        mCirclePaint.color = Color.BLACK
        mCirclePaint.isAntiAlias = true
        mCirclePaint.style = Paint.Style.STROKE
        mCirclePaint.strokeWidth = mCircleWidth

        mPointerPaint.color = Color.BLACK
        mPointerPaint.isAntiAlias = true
        mPointerPaint.style = Paint.Style.FILL

        mTextPaint.color = Color.BLACK
        mTextPaint.isAntiAlias = true
        mTextPaint.style = Paint.Style.FILL
        mTextPaint.textSize = 40f
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        mViewWidth = measuredWidth - paddingLeft - paddingRight
        mViewHeight = measuredHeight - paddingTop - paddingBottom

        mRadius = mViewWidth / 2 - mCircleWidth
        mCirclePath.addCircle(0f, 0f, mRadius, Path.Direction.CW)

        mPathMeasure = PathMeasure(mCirclePath, false)
        val minutesShapePath = Path()
        val quarterShapePath = Path()
        minutesShapePath.addRect(0f, 0f, mRadius * 0.01f, mRadius * 0.06f, Path.Direction.CW)
        quarterShapePath.addRect(0f, 0f, mRadius * 0.02f, mRadius * 0.06f, Path.Direction.CW)
        val minutesDashPathEffect = PathDashPathEffect(
            minutesShapePath,
            mPathMeasure.length / 60,
            0f,
            PathDashPathEffect.Style.ROTATE
        )
        val quarterDashPathEffect = PathDashPathEffect(
            quarterShapePath,
            mPathMeasure.length / 12,
            0f,
            PathDashPathEffect.Style.ROTATE
        )
        mSumPathEffect = SumPathEffect(minutesDashPathEffect, quarterDashPathEffect)

        val hourPointerHeight = mRadius * 0.5f
        val hourPointerWidth = mRadius * 0.07f
        val hourRect = RectF(
            -hourPointerWidth / 2,
            -hourPointerHeight * 0.7f,
            hourPointerWidth / 2,
            hourPointerHeight * 0.3f
        )
        mHourPath.addRoundRect(hourRect, mRectRadius, mRectRadius, Path.Direction.CW)

        val minutePointerHeight = mRadius * 0.7f
        val minutePointerWidth = mRadius * 0.05f
        val minuteRect = RectF(
            -minutePointerWidth / 2,
            -minutePointerHeight * 0.8f,
            minutePointerWidth / 2,
            minutePointerHeight * 0.2f
        )
        mMinutePath.addRoundRect(minuteRect, mRectRadius, mRectRadius, Path.Direction.CW)

        val secondPointerHeight = mRadius * 0.9f
        val secondPointerWidth = mRadius * 0.03f
        val secondRect = RectF(
            -secondPointerWidth / 2,
            -secondPointerHeight * 0.8f,
            secondPointerWidth / 2,
            secondPointerHeight * 0.2f
        )
        mSecondPath.addRoundRect(secondRect, mRectRadius, mRectRadius, Path.Direction.CW)

        startAnimator()
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        if (canvas == null) {
            return
        }
        canvas.translate((mViewWidth / 2).toFloat(), (mViewHeight / 2).toFloat())

        //画圆盘
        mCirclePaint.pathEffect = null
        canvas.drawPath(mCirclePath, mCirclePaint)

        //画刻度
        mCirclePaint.pathEffect = mSumPathEffect
        canvas.drawPath(mCirclePath, mCirclePaint)

        //时分秒指针
        mPointerPaint.color = Color.BLACK

        canvas.save()
        canvas.rotate(mHoursDegree)
        canvas.drawPath(mHourPath, mPointerPaint)
        canvas.restore()

        canvas.save()
        canvas.rotate(mMinutesDegree)
        canvas.drawPath(mMinutePath, mPointerPaint)
        canvas.restore()

        canvas.save()
        canvas.rotate(mSecondsDegree)
        canvas.drawPath(mSecondPath, mPointerPaint)
        canvas.restore()

        //画中心点
        mPointerPaint.color = Color.WHITE
        canvas.drawCircle(0f, 0f, mRadius * 0.02f, mPointerPaint)
    }

    private fun startAnimator() {
        val cal = Calendar.getInstance()
        val hour = cal.get(Calendar.HOUR)  //小时
        val minute = cal.get(Calendar.MINUTE)  //分
        val second = cal.get(Calendar.SECOND)  //秒
        mCurrentTimeInSecond = (hour * 60 * 60 + minute * 60 + second).toLong()

        if (mTimer == null) {
            mTimer = Timer()
        } else {
            mTimer?.cancel()
            mTimerTask.cancel()
        }
        mTimer?.schedule(mTimerTask, 0, 1000)
    }

    private var mTimerTask: TimerTask = object : TimerTask() {
        override fun run() {
            mCurrentTimeInSecond++
            computeDegree()
            invalidate()
        }
    }

    //12小时 00:00:00 ~ 12:00:00
    private fun computeDegree() {
        val secondsInOneRoll = 12 * 60 * 60
        val currentSeconds = mCurrentTimeInSecond % secondsInOneRoll

        var leftSeconds = currentSeconds
        val hours = currentSeconds / 60 / 60
        leftSeconds = currentSeconds - hours * 60 * 60
        val minutes = leftSeconds / 60
        leftSeconds -= minutes * 60
        val seconds = leftSeconds % 60

        mHoursDegree = hours * 30f
        mMinutesDegree = minutes * 6f
        mSecondsDegree = seconds * 6f

    }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2022-09-10

Android实现简单时钟View的方法

通过Canvas的平移与旋转简化绘图逻辑是一个非常有用的技巧,下面的时钟view就是利用这个方法完成的,省去了使用三角函数计算坐标的麻烦. package com.example.swt369.simpleclock; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.support.annotation.Nullable; i

Android多功能时钟开发案例(基础篇)

本文我们进入Android多功能时钟开发实战学习,具体的效果可以参考手机上的时钟,内容如下 首先我们来看一看布局文件layout_main.xml 整个布局: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/container" android:layout_width="match_parent" androi

Android多功能时钟开发案例(实战篇)

上一篇为大家介绍的是Android多功能时钟开发基础内容,大家可以回顾一下,Android多功能时钟开发案例(基础篇) 接下来进入实战,快点来学习吧. 一.时钟 在布局文件中我们看到,界面上只有一个TextView,这个TextView的作用就是显示一个系统的当前时间,同时这个时间还是一秒一秒跳的,要实现一秒一秒的跳就需要我们每隔一秒就要刷新一下,同时我们这里还考虑了切换到另一个Tab的时候,这个时间就不跳动了,这样就会减少这个对系统的占用,考虑到了这点我们在这里用到了Handler,通过han

Android 仿日历翻页、仿htc时钟翻页、数字翻页切换效果

废话不多说,效果图: 自定义控件找自网络,使用相对简单,具体还没有来得及深入研究,只是先用笨方法大概实现了想要的效果,后续有空会仔细研究再更新文章, 本demo切换方法是用的笨方法,也就是由新数字和旧数字相比较来切换数字变换的,大致使用方法如下: //获取输入框中的数字 int newNumber = Integer.parseInt(etInput.getText().toString()); //获取个.十.百位数字 int nbai = newNumber / 100; int nshi

Android仿小米时钟效果

我在一个[博客] android高仿小米时钟(使用Camera和Matrix实现3D效果)上面看到了小米时钟实现.特别感兴趣.就认真的看了一遍.并自己敲了一遍.下面说下我自己的理解和我的一些改进的地方效果真的特别棒就发布了自己的时钟应用. 先上图(电脑没有gif截图软件.大家凑合看.哪个软件好也可以给我推荐下) 话不多说,首先自定义控件XimiClockView继承view  并做一些初始化的操作 看到的漂亮时钟图片我自己画的效果图(以后妈妈再也不用担心我迟到了) public XimiCloc

android实现widget时钟示例分享

一.在 AndroidManifest.xml文件中配置Widgets: 复制代码 代码如下: <manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.example.widget"    android:versionCode="1"    android:versionName="1.0" >   

Android自定义动态壁纸开发(时钟)

看到有些手机酷炫的动态壁纸,有没有好奇过他们是如何实现的,其实我们自己也可以实现. 先看效果 上图是动态壁纸钟的一个时钟. 我们先来看看 Livewallpaper(即动态墙纸)的实现,Android的动态墙纸并不是GIF图片,而是一个标准的Android应用程序,也就是APK.既然是应用程序,当然意味着天生具有GIF图片不具备的功能--能与用户发生交互,而且动态的背景变化绝不仅仅局限于GIF图片那般只能是固定的几张图片的循环播放.但是我们在这里没有加入与用户交互的动作,只是加入一个时钟(当然时

android高仿小米时钟(使用Camera和Matrix实现3D效果)

继续练习自定义View..毕竟熟才能生巧.一直觉得小米的时钟很精美,那这次就搞它~这次除了练习自定义View,还涉及到使用Camera和Matrix实现3D效果. 一个这样的效果,在绘制的时候最好选择一个方向一步一步的绘制,这里我选择由外到内.由深到浅的方向来绘制,代码步骤如下: 1.首先老一套~新建attrs.xml文件,编写自定义属性如时钟背景色.亮色(用于分针.秒针.渐变终止色).暗色(圆弧.刻度线.时针.渐变起始色),新建MiClockView继承View,重写构造方法,获取自定义属性值

Android获取设备CPU核数、时钟频率以及内存大小的方法

本文实例讲述了Android获取设备CPU核数.时钟频率以及内存大小的方法.分享给大家供大家参考,具体如下: 因项目需要,分析了一下 Facebook 的开源项目 - Device Year Class. Device Year Class 的主要功能是根据 CPU核数.时钟频率 以及 内存大小 对设备进行分级.代码很简单,只包含两个类: DeviceInfo -> 获取设备参数, YearClass -> 根据参数进行分级. 下表是 Facebook 公司提供的分级标准,其中 Year 栏表

Android编程基于自定义控件实现时钟功能的方法

本文实例讲述了Android编程基于自定义控件实现时钟功能的方法.分享给大家供大家参考,具体如下: 在学习安卓群英传自定义控件章节的时候,有一个例子是绘制时钟,在实现了书上的例子后就想看这个时钟能不能动起来. 这里选择延迟一秒发送消息重绘view来实现的动画,对外提供了开启时钟,关闭时钟的方法,当activity执行onResume方法的时候,执行startClock()方法,当移除view或activity执行onStop方法的时候可以执行stopClock()方法. 首先根据view的宽高来

Android编程简单实现拨号器功能的方法

本文实例讲述了Android编程简单实现拨号器功能的方法.分享给大家供大家参考,具体如下: 学习Android已经有2天时间了,没学习的时候觉得android可能很枯燥,但是学过之后我发觉其实这个比什么javaweb好玩多了.学习android可以见到一些很有趣的东西,这里呢也建议学习javaME的人不要在煎熬了,学习android吧.在写程序之前也需要知道android的工作原理 1.获取组件清单 2.登记或注册组件 3.将组件封装成意图 4.把意图交给意图处理器进行处理 5.把界面显示给用户

Android编程实现自定义ImageView圆图功能的方法

本文实例讲述了Android编程实现自定义ImageView圆图功能的方法.分享给大家供大家参考,具体如下: 首先很感谢开源项目Universal Image Loader图片加载框架.之前也看过一段时间框架源码,但是却没有时间进行知识点的总结. 今天项目遇到了需要实现圆头像的编辑显示,Universal就已经提供了这个显示RoundedBitmapDisplayer这个类实现了圆图功能.看它的代码可以发现是实现的Drawable public static class RoundedDrawa

Android编程基于自定义View实现绚丽的圆形进度条功能示例

本文实例讲述了Android编程基于自定义View实现绚丽的圆形进度条功能.分享给大家供大家参考,具体如下: 本文包含两个组件,首先上效果图: 1.ProgressBarView1(支持拖动): 2.ProgressBarView2(不同进度值显示不同颜色,不支持拖拽):   代码不多,注释也比较详细,全部贴上了: (一)ProgressBarView1: /** * 自定义绚丽的ProgressBar. */ public class ProgressBarView1 extends View

Android编程基于重力传感器实现横竖屏放向切换功能

本文实例讲述了Android编程基于重力传感器实现横竖屏放向切换功能.分享给大家供大家参考,具体如下: 最近项目中用到了vr视频播放,因为自己实现,同时要实现横竖屏自动切换屏幕,核心代码如下: package com.d1ev.touch.App.helper; import android.app.Activity; import android.content.pm.ActivityInfo; import android.util.Log; import android.view.Orie

Android编程实现的微信支付功能详解【附Demo源码下载】

本文实例讲述了Android编程实现的微信支付功能.分享给大家供大家参考,具体如下: 最近公司弄Ionic框架,项目中需要微信支付,无奈,把我调过去弄,期间也是几近崩溃,好在皇天不负有心人,在看别人的文档,终于是在项目中集成了微信支付,下面作为一个小白的我,想要把我的经验分享给大家,希望对大家有所帮助. 先给一个可用的demo吧(运行前先看txt文件) demo代码点击此处本站下载. 这个demo是基于eclipse开发的,博主也在Android Studio开发过微信支付,原理都是一样的,大家

Android编程基于距离传感器控制手机屏幕熄灭的方法详解

本文实例讲述了Android编程基于距离传感器控制手机屏幕熄灭的方法.分享给大家供大家参考,具体如下: 在现实生活中,打电话的时候手机挨着自己的头,屏幕会熄灭,这是为了不让自己的头按到什么手机键~ 这个功能可以使用距离传感器来实现 P-Sensor距离感应器,可以感应手机和人体距离.具体使用用途是在通话过程中打开P-Sensor,那么当手机屏幕贴近用户脸部时,就会自动感应出手机和人体距离是多少.当小于某一个值时,就会熄灭屏幕,不再接收用户触摸屏幕事件,从而有效的防止通话过程中误触摸事件的出现.

Android编程实现两点触控功能示例

本文实例讲述了Android编程实现两点触控功能.分享给大家供大家参考,具体如下: 下面是一个两点触控的案例代码: package com.zzj; import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; public class AndroidTestActivity extends Activity { private float x0, y0; private float

Android编程实现调用系统分享功能示例

本文实例讲述了Android编程实现调用系统分享功能.分享给大家供大家参考,具体如下: /** * 调用系统的分享功能 * Created by admin on 15-4-13. */ public class ShareActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentV

Android编程调用Camera和相册功能详解

本文实例讲述了Android编程调用Camera和相册功能.分享给大家供大家参考,具体如下: xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="