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。

相关文章

分布式锁在Spring Boot应用中的实现过程

分布式锁在Spring Boot应用中的实现过程

《分布式锁在SpringBoot应用中的实现过程》文章介绍在SpringBoot中通过自定义Lock注解、LockAspect切面和RedisLockUtils工具类实现分布式锁,确保多实例并发操作... 目录Lock注解LockASPect切面RedisLockUtils工具类总结在现代微服务架构中，分布
阅读更多...
Java使用Thumbnailator库实现图片处理与压缩功能

Java使用Thumbnailator库实现图片处理与压缩功能

《Java使用Thumbnailator库实现图片处理与压缩功能》Thumbnailator是高性能Java图像处理库,支持缩放、旋转、水印添加、裁剪及格式转换,提供易用API和性能优化,适合Web应... 目录1. 图片处理库Thumbnailator介绍2. 基本和指定大小图片缩放功能2.1 图片缩放的
阅读更多...
python panda库从基础到高级操作分析

python panda库从基础到高级操作分析

《pythonpanda库从基础到高级操作分析》本文介绍了Pandas库的核心功能,包括处理结构化数据的Series和DataFrame数据结构,数据读取、清洗、分组聚合、合并、时间序列分析及大数据... 目录1. Pandas 概述2. 基本操作：数据读取与查看3. 索引操作：精准定位数据4. Group
阅读更多...
Python使用Tenacity一行代码实现自动重试详解

Python使用Tenacity一行代码实现自动重试详解

《Python使用Tenacity一行代码实现自动重试详解》tenacity是一个专为Python设计的通用重试库,它的核心理念就是用简单、清晰的方式,为任何可能失败的操作添加重试能力,下面我们就来看... 目录一切始于一个简单的 API 调用Tenacity 入门：一行代码实现优雅重试精细控制：让重试按我
阅读更多...
Redis客户端连接机制的实现方案

Redis客户端连接机制的实现方案

《Redis客户端连接机制的实现方案》本文主要介绍了Redis客户端连接机制的实现方案,包括事件驱动模型、非阻塞I/O处理、连接池应用及配置优化,具有一定的参考价值,感兴趣的可以了解一下... 目录1. Redis连接模型概述2. 连接建立过程详解2.1 连php接初始化流程2.2 关键配置参数3. 最大连
阅读更多...
Python实现网格交易策略的过程

Python实现网格交易策略的过程

《Python实现网格交易策略的过程》本文讲解Python网格交易策略,利用ccxt获取加密货币数据及backtrader回测,通过设定网格节点,低买高卖获利,适合震荡行情,下面跟我一起看看我们的第一... 网格交易是一种经典的量化交易策略，其核心思想是在价格上下预设多个“网格”，当价格触发特定网格时执行买
阅读更多...
Android Paging 分页加载库使用实践

Android Paging 分页加载库使用实践

《AndroidPaging分页加载库使用实践》AndroidPaging库是Jetpack组件的一部分,它提供了一套完整的解决方案来处理大型数据集的分页加载,本文将深入探讨Paging库... 目录前言一、Paging 库概述二、Paging 3 核心组件1. PagingSource2. Pager3.
阅读更多...
python设置环境变量路径实现过程

python设置环境变量路径实现过程

《python设置环境变量路径实现过程》本文介绍设置Python路径的多种方法：临时设置（Windows用`set`,Linux/macOS用`export`）、永久设置（系统属性或shell配置文件... 目录设置python路径的方法临时设置环境变量（适用于当前会话）永久设置环境变量（Windows系统
阅读更多...
Python对接支付宝支付之使用AliPay实现的详细操作指南

Python对接支付宝支付之使用AliPay实现的详细操作指南

《Python对接支付宝支付之使用AliPay实现的详细操作指南》支付宝没有提供PythonSDK,但是强大的github就有提供python-alipay-sdk,封装里很多复杂操作,使用这个我们就... 目录一、引言二、准备工作2.1 支付宝开放平台入驻与应用创建2.2 密钥生成与配置2.3 安装ali
阅读更多...
Spring Security 单点登录与自动登录机制的实现原理

Spring Security 单点登录与自动登录机制的实现原理

《SpringSecurity单点登录与自动登录机制的实现原理》本文探讨SpringSecurity实现单点登录（SSO）与自动登录机制,涵盖JWT跨系统认证、RememberMe持久化Token... 目录一、核心概念解析1.1 单点登录（SSO）1.2 自动登录（Remember Me）二、代码分析三、
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2