網(wǎng)站首頁 編程語言 正文
最近在練習(xí)自定義view, 想起之前面試的時候筆試有道題是寫出自定義一個時鐘的關(guān)鍵代碼. 今天就來實現(xiàn)一下. 步驟依然是先分析, 再上代碼.
實現(xiàn)效果
View分析
時鐘主要分為五個部分:
1、中心點: 圓心位置
2、圓盤: 以中心點為圓心,drawCircle畫個圓
3、刻度:
paint有個aip, setPathEffect可以根據(jù)path畫特效, 那么刻度就可以根據(jù)圓的path畫一個矩形path的特效, 并且這個api只會畫特效, 不會畫出圓.
/**
* shape: 特效的path, 這里傳一個矩形
* advance: 兩個特效path之間的間距, 即兩個矩形的left間距
* phase: 特效起始位置的偏移
* style: 原始path拐彎的時候特效path的轉(zhuǎn)換方式,這里用ROTATE跟著旋轉(zhuǎn)即可
*/
PathDashPathEffect(Path shape, float advance, float phase,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Style style)
刻度又分兩種, 粗一點刻度: 3、6、9、12, 和細一點的刻度. 兩種特效又可以用SumPathEffect合起來畫
SumPathEffect(PathEffect first, PathEffect second)?
4、時分秒指針
時分秒指針都是一個圓角矩形, 先把他們的位置計算出來, 然后旋轉(zhuǎn)圓心去繪制不同角度的指針.
5、動畫效果
TimerTask每隔一秒計算時間, 根據(jù)時間去換算當(dāng)前時分秒指針的角度, 動態(tài)變量只有三個角度.
實現(xiàn)源碼
//
// 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
? ? }
}
原文鏈接:https://blog.csdn.net/qq_29125669/article/details/124452399
相關(guān)推薦
- 2022-06-28 詳解Python中遞歸函數(shù)的原理與使用_python
- 2022-10-22 C#中的屬性解析(get、set、value)_C#教程
- 2023-01-01 echarts-xAxis-底部文字傾斜
- 2024-04-06 jeecg-boot使用QueryGenerator.initQueryWrapper怎么排序查詢
- 2022-05-29 python3中的類繼承你真的了解嗎_python
- 2022-07-23 詳解NumPy中的線性關(guān)系與數(shù)據(jù)修剪壓縮_python
- 2022-09-18 GO實現(xiàn)文件上傳操作_Golang
- 2023-01-15 C#實現(xiàn)虛擬鍵盤的實例詳解_C#教程
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支