Android自定义View实现时钟功能

 更新时间:2022年09月11日 12:16:04   作者:skylarliuu  
这篇文章主要为大家详细介绍了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

    }
}

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

相关文章

  • android Gallery组件实现的iPhone图片滑动效果实例

    android Gallery组件实现的iPhone图片滑动效果实例

    这篇文章主要介绍了android Gallery组件实现的iPhone图片滑动效果实例,即相册内的图片实现可左右滑动的效果,需要的朋友可以参考下
    2014-07-07
  • Android仿水波纹流量球进度条控制器

    Android仿水波纹流量球进度条控制器

    这篇文章主要介绍了Android仿水波纹流量球进度条控制器的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • Android 开发程序锁应用简单实例

    Android 开发程序锁应用简单实例

    这篇文章主要介绍了Android 开发程序锁应用简单实例的相关资料,需要的朋友可以参考下
    2016-10-10
  • Android实现局部图片滑动指引效果示例

    Android实现局部图片滑动指引效果示例

    现在滑动效果用的比较多,尤其是在手机端上面,本文介绍了Android实现局部图片滑动指引效果示例,现在就分享给大家,也给大家做个参考。
    2016-10-10
  • Android  AbsoluteLayout和RelativeLayout布局详解

    Android AbsoluteLayout和RelativeLayout布局详解

    本文主要讲解Android AbsoluteLayout和RelativeLayout布局,这里整理了相关资料,并附示例代码和效果图,有兴趣的小伙伴可以参考下
    2016-08-08
  • android仿微信表情雨下落效果的实现方法

    android仿微信表情雨下落效果的实现方法

    这篇文章主要给大家介绍了关于android仿微信表情雨下落效果的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-09-09
  • Android实现照片墙效果的实例代码

    Android实现照片墙效果的实例代码

    Android实现照片墙效果的设计思路其实也非常简单,用一个GridView控件当作“墙”,然后随着GridView的滚动将一张张照片贴在“墙”上,这些照片可以是手机本地中存储的,也可以是从网上下载的
    2018-05-05
  • Android使用http实现注册登录功能

    Android使用http实现注册登录功能

    这篇文章主要为大家详细介绍了Android使用http实现注册登录功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • android自定义环形对比图效果

    android自定义环形对比图效果

    这篇文章主要为大家详细介绍了android自定义环形对比图,外环有类似进度条的旋转动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • Android使用MulticastSocket实现多点广播图片

    Android使用MulticastSocket实现多点广播图片

    这篇文章主要为大家详细介绍了Android使用MulticastSocket实现多点广播图片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01

最新评论