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。

相关文章

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码，该代码实现了图片的旋转（90度和180度）以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中，
阅读更多...
SpringBoot中使用Flux实现流式返回的方法小结

SpringBoot中使用Flux实现流式返回的方法小结

《SpringBoot中使用Flux实现流式返回的方法小结》文章介绍流式返回（StreamingResponse）在SpringBoot中通过Flux实现,优势包括提升用户体验、降低内存消耗、支持长连... 目录背景流式返回的核心概念与优势1. 提升用户体验2. 降低内存消耗3. 支持长连接与实时通信在Sp
阅读更多...
Conda虚拟环境的复制和迁移的四种方法实现

Conda虚拟环境的复制和迁移的四种方法实现

《Conda虚拟环境的复制和迁移的四种方法实现》本文主要介绍了Conda虚拟环境的复制和迁移的四种方法实现,包括requirements.txt,environment.yml,conda-pack,... 目录在本机复制Conda虚拟环境相同操作系统之间复制环境方法一：requirements.txt方法
阅读更多...
Spring Boot 实现 IP 限流的原理、实践与利弊解析

Spring Boot 实现 IP 限流的原理、实践与利弊解析

《SpringBoot实现IP限流的原理、实践与利弊解析》在SpringBoot中实现IP限流是一种简单而有效的方式来保障系统的稳定性和可用性,本文给大家介绍SpringBoot实现IP限... 目录一、引言二、IP 限流原理2.1 令牌桶算法2.2 漏桶算法三、使用场景3.1 防止恶意攻击3.2 控制资源
阅读更多...
springboot下载接口限速功能实现

springboot下载接口限速功能实现

《springboot下载接口限速功能实现》通过Redis统计并发数动态调整每个用户带宽,核心逻辑为每秒读取并发送限定数据量,防止单用户占用过多资源,确保整体下载均衡且高效,本文给大家介绍spring... 目录 一、整体目标 二、涉及的主要类/方法✅ 三、核心流程图解（简化） 四、关键代码详解1️⃣ 设置
阅读更多...
Nginx 配置跨域的实现及常见问题解决

Nginx 配置跨域的实现及常见问题解决

《Nginx配置跨域的实现及常见问题解决》本文主要介绍了Nginx配置跨域的实现及常见问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来... 目录1. 跨域1.1 同源策略1.2 跨域资源共享（CORS）2. Nginx 配置跨域的场景2.1
阅读更多...
Python中提取文件名扩展名的多种方法实现

Python中提取文件名扩展名的多种方法实现

《Python中提取文件名扩展名的多种方法实现》在Python编程中,经常会遇到需要从文件名中提取扩展名的场景,Python提供了多种方法来实现这一功能,不同方法适用于不同的场景和需求,包括os.pa... 目录技术背景实现步骤方法一：使用os.path.splitext方法二：使用pathlib模块方法三
阅读更多...
CSS实现元素撑满剩余空间的五种方法

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中，我们经常需要让某个元素占据容器的剩余空间，本文将介绍5种不同的方法来实现这个需求，并分析各种方法的优缺点，感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中，我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求
阅读更多...
HTML5 getUserMedia API网页录音实现指南示例小结

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API，结合WebAudioAPI，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3
阅读更多...
Java实现删除文件中的指定内容

Java实现删除文件中的指定内容

《Java实现删除文件中的指定内容》在日常开发中,经常需要对文本文件进行批量处理,其中,删除文件中指定内容是最常见的需求之一,下面我们就来看看如何使用java实现删除文件中的指定内容吧... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细介绍3.1 Ja
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2