Android基础控件——TextView的自定义，实现圈圈进度条的倒计时

2023-12-15 20:59
文章标签 基础 实现 android 自定义 倒计时 控件 进度条 textview 圈圈

本文主要是介绍Android基础控件——TextView的自定义，实现圈圈进度条的倒计时，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

在开发中，正常的进度条都是用ProgressBar实现的，但是遇到需要文本的进度条和光滑动画的进度条时，用ProgressBar实现起来就有点吃力，这里可以通过TextView+ValueAnimator的方式来实现

本例子中实现效果如下

在这里插入图片描述

实现思路

  • 继承AppCompatTextView
  • 通过drawRoundRect的方式画内圈椭圆
  • 通过drawPath+PathMeasure+ValueAnimator的方式画外圈的倒计时椭圆

实现分析

1、快速使用

在xml直接使用

<com.example.uitest.RoundRectCountDown.RoundRectCountDownandroid:id="@+id/pb"android:layout_width="80dp"android:layout_height="36dp"android:layout_centerInParent="true"android:gravity="center"android:text="0.0s"android:textColor="#04B4E3"android:textSize="12sp" />

在代码启动倒计时

val pb = findViewById<RoundRectCountDown>(R.id.pb)
pb.startAnimation(20, object : AnimatorListenerAdapter() {override fun onAnimationEnd(animation: Animator?) {}
})

2、初始化属性

定义想要的属性值，并初始化画笔

//圆角
private val ROUND = 20f
//倒计时外框宽度
private val STROKE_WIDTH = 4f//动画相关
private var mValueAnimator: ValueAnimator? = null
private var mAnimatorValue = 0f//内圈用Rect绘制椭圆，外圈用Path来绘制椭圆
private var mInSizeRectF = RectF()
private var mOutSizePath = Path()//相当于辅助外圈框用的工具类
private val mOutSizeTempPath = Path()
private val mOutSizePathMeasure = PathMeasure()
private var mOutSizePathLength = 0f//外圈和内圈的画笔
private val mOutSizePaint = Paint()
private val mInSizePaint = Paint()constructor(context: Context) : super(context)constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)init {initPaint()
}private fun initPaint() {mOutSizePaint.style = Paint.Style.STROKEmOutSizePaint.isAntiAlias = truemOutSizePaint.strokeWidth = STROKE_WIDTHmOutSizePaint.strokeCap = Paint.Cap.ROUNDmOutSizePaint.color = Color.parseColor("#04B4E3")mInSizePaint.style = Paint.Style.FILLmInSizePaint.isAntiAlias = truemInSizePaint.color = Color.parseColor("#0B101F")
}

在onLayout回调中能拿到宽高，从而去初始化对应的外圈椭圆，主要是定义外圈椭圆的长度和Path

override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {super.onLayout(changed, left, top, right, bottom)buildRectPath()
}private fun buildRectPath() {//定一个矩形，四个顶点分别在自身大小(0,0,width,height)的范围内往内缩一个框框的大小mInSizeRectF.set(STROKE_WIDTH, STROKE_WIDTH, width - STROKE_WIDTH, height - STROKE_WIDTH)//定义一个Path来形容椭圆mOutSizeTempPath.addRoundRect(mInSizeRectF, ROUND, ROUND, Path.Direction.CW)//定义一个PathMeasure来加载PathmOutSizePathMeasure.setPath(mOutSizeTempPath, true)//获取Path的长度mOutSizePathLength = mOutSizePathMeasure.length
}

3、绘制内圈和外圈

通过复写onDraw方法，绘制内圈椭圆和外圈椭圆，这里就是让外圈椭圆的起点不断接近终点，就完成了倒计时

override fun onDraw(canvas: Canvas?) {drawRoundRect(canvas)drawRoundRectStroke(canvas)super.onDraw(canvas)
}/*** 绘制椭圆内圈背景*/
private fun drawRoundRect(canvas: Canvas?) {canvas?.drawRoundRect(mInSizeRectF, ROUND, ROUND, mInSizePaint)
}/*** 绘制椭圆外圈条框*/
private fun drawRoundRectStroke(canvas: Canvas?) {mOutSizePath.reset()//获取当前外圈椭圆的起点，终点是整个外圈椭圆的长度val start = mOutSizePathLength * mAnimatorValue//通过起点和终点的连线，绘制出外圈椭圆的路径mOutSizePathMeasure.getSegment(start, mOutSizePathLength, mOutSizePath, true)canvas?.drawPath(mOutSizePath, mOutSizePaint)
}

4、开始和结束动画

启动动画后，获取0->1的动画的动画值，从而刷新界面

/*** 开始动画** 0->1 的动画*/
fun startAnimation(time: Int, listener: AnimatorListenerAdapter) {mValueAnimator = ValueAnimator.ofFloat(0f, 1f)mValueAnimator?.interpolator = LinearInterpolator()mValueAnimator?.addUpdateListener { it ->mAnimatorValue = it.animatedValue as Floatthis.text = "${time - (time * mAnimatorValue).toInt()}s"invalidate()}mValueAnimator?.addListener(listener)mValueAnimator?.duration = (time * 1000).toLong()mValueAnimator?.start()
}fun stopAnimation() {mValueAnimator?.cancel()
}

5、源码

package com.example.uitest.RoundRectCountDownimport android.animation.AnimatorListenerAdapter
import android.animation.ValueAnimator
import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.animation.LinearInterpolatorclass RoundRectCountDown : androidx.appcompat.widget.AppCompatTextView {//圆角private val ROUND = 20f//倒计时外框宽度private val STROKE_WIDTH = 4f//动画相关private var mValueAnimator: ValueAnimator? = nullprivate var mAnimatorValue = 0f//内圈用Rect绘制椭圆，外圈用Path来绘制椭圆private var mInSizeRectF = RectF()private var mOutSizePath = Path()//相当于辅助外圈框用的工具类private val mOutSizeTempPath = Path()private val mOutSizePathMeasure = PathMeasure()private var mOutSizePathLength = 0f//外圈和内圈的画笔private val mOutSizePaint = Paint()private val mInSizePaint = Paint()constructor(context: Context) : super(context)constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)init {initPaint()}private fun initPaint() {mOutSizePaint.style = Paint.Style.STROKEmOutSizePaint.isAntiAlias = truemOutSizePaint.strokeWidth = STROKE_WIDTHmOutSizePaint.strokeCap = Paint.Cap.ROUNDmOutSizePaint.color = Color.parseColor("#04B4E3")mInSizePaint.style = Paint.Style.FILLmInSizePaint.isAntiAlias = truemInSizePaint.color = Color.parseColor("#0B101F")}override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {super.onLayout(changed, left, top, right, bottom)buildRectPath()}private fun buildRectPath() {//定一个矩形，四个顶点分别在自身大小(0,0,width,height)的范围内往内缩一个框框的大小mInSizeRectF.set(STROKE_WIDTH, STROKE_WIDTH, width - STROKE_WIDTH, height - STROKE_WIDTH)//定义一个Path来形容椭圆mOutSizeTempPath.addRoundRect(mInSizeRectF, ROUND, ROUND, Path.Direction.CW)//定义一个PathMeasure来加载PathmOutSizePathMeasure.setPath(mOutSizeTempPath, true)//获取Path的长度mOutSizePathLength = mOutSizePathMeasure.length}override fun onDraw(canvas: Canvas?) {drawRoundRect(canvas)drawRoundRectStroke(canvas)super.onDraw(canvas)}/*** 绘制椭圆内圈背景*/private fun drawRoundRect(canvas: Canvas?) {canvas?.drawRoundRect(mInSizeRectF, ROUND, ROUND, mInSizePaint)}/*** 绘制椭圆外圈条框*/private fun drawRoundRectStroke(canvas: Canvas?) {mOutSizePath.reset()//获取当前外圈椭圆的起点，终点是整个外圈椭圆的长度val start = mOutSizePathLength * mAnimatorValue//通过起点和终点的连线，绘制出外圈椭圆的路径mOutSizePathMeasure.getSegment(start, mOutSizePathLength, mOutSizePath, true)canvas?.drawPath(mOutSizePath, mOutSizePaint)}/*** 开始动画** 0->1 的动画*/fun startAnimation(time: Int, listener: AnimatorListenerAdapter) {mValueAnimator = ValueAnimator.ofFloat(0f, 1f)mValueAnimator?.interpolator = LinearInterpolator()mValueAnimator?.addUpdateListener { it ->mAnimatorValue = it.animatedValue as Floatthis.text = "${time - (time * mAnimatorValue).toInt()}s"invalidate()}mValueAnimator?.addListener(listener)mValueAnimator?.duration = (time * 1000).toLong()mValueAnimator?.start()}fun stopAnimation() {mValueAnimator?.cancel()}
}

这篇关于Android基础控件——TextView的自定义，实现圈圈进度条的倒计时的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/497863。

相关文章

C++使用栈实现括号匹配的代码详解

C++使用栈实现括号匹配的代码详解

《C++使用栈实现括号匹配的代码详解》在编程中,括号匹配是一个常见问题,尤其是在处理数学表达式、编译器解析等任务时,栈是一种非常适合处理此类问题的数据结构,能够精确地管理括号的匹配问题,本文将通过C+... 目录引言问题描述代码讲解代码解析栈的状态表示测试总结引言在编程中，括号匹配是一个常见问题，尤其是在
阅读更多...
Java实现检查多个时间段是否有重合

Java实现检查多个时间段是否有重合

《Java实现检查多个时间段是否有重合》这篇文章主要为大家详细介绍了如何使用Java实现检查多个时间段是否有重合,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录流程概述步骤详解China编程步骤1：定义时间段类步骤2：添加时间段步骤3：检查时间段是否有重合步骤4：输出结果示例代码结语作
阅读更多...
使用C++实现链表元素的反转

使用C++实现链表元素的反转

《使用C++实现链表元素的反转》反转链表是链表操作中一个经典的问题,也是面试中常见的考题,本文将从思路到实现一步步地讲解如何实现链表的反转,帮助初学者理解这一操作,我们将使用C++代码演示具体实现,同... 目录问题定义思路分析代码实现带头节点的链表代码讲解其他实现方式时间和空间复杂度分析总结问题定义给定
阅读更多...
Java覆盖第三方jar包中的某一个类的实现方法

Java覆盖第三方jar包中的某一个类的实现方法

《Java覆盖第三方jar包中的某一个类的实现方法》在我们日常的开发中,经常需要使用第三方的jar包,有时候我们会发现第三方的jar包中的某一个类有问题,或者我们需要定制化修改其中的逻辑,那么应该如何... 目录一、需求描述二、示例描述三、操作步骤四、验证结果五、实现原理一、需求描述需求描述如下：需要在
阅读更多...
如何使用Java实现请求deepseek

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2
阅读更多...
python使用fastapi实现多语言国际化的操作指南

python使用fastapi实现多语言国际化的操作指南

《python使用fastapi实现多语言国际化的操作指南》本文介绍了使用Python和FastAPI实现多语言国际化的操作指南,包括多语言架构技术栈、翻译管理、前端本地化、语言切换机制以及常见陷阱和... 目录多语言国际化实现指南项目多语言架构技术栈目录结构翻译工作流1. 翻译数据存储2. 翻译生成脚本
阅读更多...
Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后
阅读更多...
如何通过Python实现一个消息队列

如何通过Python实现一个消息队列

《如何通过Python实现一个消息队列》这篇文章主要为大家详细介绍了如何通过Python实现一个简单的消息队列,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录如何通过 python 实现消息队列如何把 http 请求放在队列中执行1. 使用 queue.Queue 和 reque
阅读更多...
Python如何实现PDF隐私信息检测

Python如何实现PDF隐私信息检测

《Python如何实现PDF隐私信息检测》随着越来越多的个人信息以电子形式存储和传输,确保这些信息的安全至关重要,本文将介绍如何使用Python检测PDF文件中的隐私信息,需要的可以参考下... 目录项目背景技术栈代码解析功能说明运行结php果在当今，数据隐私保护变得尤为重要。随着越来越多的个人信息以电子形
阅读更多...
使用 sql-research-assistant进行 SQL 数据库研究的实战指南(代码实现演示)

使用 sql-research-assistant进行 SQL 数据库研究的实战指南(代码实现演示)

《使用sql-research-assistant进行SQL数据库研究的实战指南(代码实现演示)》本文介绍了sql-research-assistant工具,该工具基于LangChain框架,集... 目录技术背景介绍核心原理解析代码实现演示安装和配置项目集成LangSmith 配置（可选）启动服务应用场景
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2