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。

相关文章

SpringBoot集成redisson实现延时队列教程

SpringBoot集成redisson实现延时队列教程

《SpringBoot集成redisson实现延时队列教程》文章介绍了使用Redisson实现延迟队列的完整步骤,包括依赖导入、Redis配置、工具类封装、业务枚举定义、执行器实现、Bean创建、消费... 目录1、先给项目导入Redisson依赖2、配置redis3、创建 RedissonConfig 配
阅读更多...
Python的Darts库实现时间序列预测

Python的Darts库实现时间序列预测

《Python的Darts库实现时间序列预测》Darts一个集统计、机器学习与深度学习模型于一体的Python时间序列预测库,本文主要介绍了Python的Darts库实现时间序列预测,感兴趣的可以了解... 目录目录一、什么是 Darts？二、安装与基本配置安装 Darts导入基础模块三、时间序列数据结构与
阅读更多...
Python使用FastAPI实现大文件分片上传与断点续传功能

Python使用FastAPI实现大文件分片上传与断点续传功能

《Python使用FastAPI实现大文件分片上传与断点续传功能》大文件直传常遇到超时、网络抖动失败、失败后只能重传的问题,分片上传+断点续传可以把大文件拆成若干小块逐个上传,并在中断后从已完成分片继... 目录一、接口设计二、服务端实现（FastAPI）2.1 运行环境2.2 目录结构建议2.3 serv
阅读更多...
C#实现千万数据秒级导入的代码

C#实现千万数据秒级导入的代码

《C#实现千万数据秒级导入的代码》在实际开发中excel导入很常见,现代社会中很容易遇到大数据处理业务,所以本文我就给大家分享一下千万数据秒级导入怎么实现,文中有详细的代码示例供大家参考,需要的朋友可... 目录前言一、数据存储二、处理逻辑优化前代码处理逻辑优化后的代码总结前言在实际开发中excel导入很
阅读更多...
SpringBoot+RustFS 实现文件切片极速上传的实例代码

SpringBoot+RustFS 实现文件切片极速上传的实例代码

《SpringBoot+RustFS实现文件切片极速上传的实例代码》本文介绍利用SpringBoot和RustFS构建高性能文件切片上传系统,实现大文件秒传、断点续传和分片上传等功能,具有一定的参考... 目录一、为什么选择 RustFS + SpringBoot？二、环境准备与部署2.1 安装 RustF
阅读更多...
Nginx部署HTTP/3的实现步骤

Nginx部署HTTP/3的实现步骤

《Nginx部署HTTP/3的实现步骤》本文介绍了在Nginx中部署HTTP/3的详细步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录前提条件第一步：安装必要的依赖库第二步：获取并构建 BoringSSL第三步：获取 Nginx
阅读更多...
MyBatis Plus实现时间字段自动填充的完整方案

MyBatis Plus实现时间字段自动填充的完整方案

《MyBatisPlus实现时间字段自动填充的完整方案》在日常开发中,我们经常需要记录数据的创建时间和更新时间,传统的做法是在每次插入或更新操作时手动设置这些时间字段,这种方式不仅繁琐,还容易遗漏,... 目录前言解决目标技术栈实现步骤1. 实体类注解配置2. 创建元数据处理器3. 服务层代码优化填充机制详
阅读更多...
Python实现Excel批量样式修改器(附完整代码)

Python实现Excel批量样式修改器(附完整代码)

《Python实现Excel批量样式修改器(附完整代码)》这篇文章主要为大家详细介绍了如何使用Python实现一个Excel批量样式修改器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一... 目录前言功能特性核心功能界面特性系统要求安装说明使用指南基本操作流程高级功能技术实现核心技术栈关键函
阅读更多...
Java实现字节字符转bcd编码

Java实现字节字符转bcd编码

《Java实现字节字符转bcd编码》BCD是一种将十进制数字编码为二进制的表示方式,常用于数字显示和存储,本文将介绍如何在Java中实现字节字符转BCD码的过程,需要的小伙伴可以了解下... 目录前言BCD码是什么Java实现字节转bcd编码方法补充总结前言BCD码（Binary-Coded Decima
阅读更多...
SpringBoot全局域名替换的实现

SpringBoot全局域名替换的实现

《SpringBoot全局域名替换的实现》本文主要介绍了SpringBoot全局域名替换的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录 项目结构⚙️ 配置文件application.yml️ 配置类AppProperties.Ja
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2