[Android自定义View]实现一个环形进度条控件

最新推荐文章于 2024-04-27 13:12:46 发布
最新推荐文章于 2024-04-27 13:12:46 发布
阅读量1k 收藏 28
点赞数 22
分类专栏： Android开发笔记 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tai_Monster/article/details/135535938
版权
本文详细描述了如何从头开始，通过继承`View`并重写`onDraw`方法，在Android中实现一个支持`warp_content`和`padding`的环形进度条。作者介绍了关键步骤，如绘制环形、确定尺寸以及处理进度更新等。
摘要由CSDN通过智能技术生成

[Android View]实现一个环形进度条

在这里插入图片描述

导言

之前的文章里我们已经介绍了自定义View相关的知识了，本篇文章我们就来实战一下，从零到一，实现一个环形进度条的控件。

具体实现

大体框架

我们说过，如果要实现一个自定义控件的话一般有两种继承方式：

  1. 继承View：重写onDraw，还需要支持warp_content等属性。
  2. 继承系统已有控件：重写onDraw 或者绘制中的其他方法，一般用于拓展已有控件的功能。

如果要实现环形进度条的话，目前应该是没有系统已有的控件可以拓展，都需要较大程度的改动，所以我们直接继承View来实现即可。其次我们再来梳理一下要实现环形进度条的几个关键点：

  1. 绘制环形（根据进度，显示的颜色）
  2. 支持warp_content属性和padding属性
    实际上也并不难，主要就是根据进度的不同绘制环形这一步，完成这一步，环形进度条也大致完毕。

确定尺寸

这里我们就先不考虑warp_content，只考虑padding这个特殊情况：

//考虑padding之后的尺寸边界
val mSizeWithPadding
    get() = RectF(0f+paddingLeft,0f+paddingTop,
        width.toFloat()-paddingRight-paddingLeft,height.toFloat()-paddingBottom-paddingTop)
//绘制内容的宽度
private val contentWidth
    get() = width-paddingLeft-paddingRight
//绘制内容的高度
private val contentHeight
    get() = height-paddingTop-paddingBottom

绘制环形&文字

我们先来介绍最重要的一点：如何绘制环形。这一片绘制view的内容我强烈建议大家可以去学习朱凯老师（扔物线）的课程，基本上涵盖了我们常用的绘制内容。

这里来简单介绍一下使用到的，Canavs绘制相关的API：
在这里插入图片描述
要实现环形进度条我们用这两个绘制方法就可以了。

具体绘制

既然是进度条那么就应该有当前进度值和最大进度值，这两个进度只要是为了确定在绘制的时候我们需要绘制弧度为多少的圆弧，我们将最大进度值设置为100，用以下代码表示：

class CircleLineWithText @JvmOverloads constructor(
    mContext: Context, attributeSet: AttributeSet? = null, defStyle:Int = 0
):View(mContext,attributeSet,defStyle) { 
    ....
    //更新进度
    fun updateProgress(progressIn100:Int) {
        val tragetRad = progressIn100 * 360 / 100
        currentRad = tragetRad.toFloat()
        invalidate()
    }
}

这里我定义了一个updateProgress方法来更新当前进度，我们都知道一圈圆为360度，所以说当前的目标弧度值为
（当前进度值 / 100） * 360 ，但是在整形中我们显然不能这么做，所以我们先乘以360再除以100；并在最后调用invalidate方法来触发View的重新绘制。
现在有了弧度值我们再来看具体的绘制方法（过程）：

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    //着色器 -- 辐射渐变
    val shader = SweepGradient((paddingLeft+contentWidth/2-paddingRight).toFloat(),
        (paddingTop+contentHeight/2-paddingBottom).toFloat(),
            mLineColor,
            Color.RED
        )
    
    mLinePaint.color = mLineColor
    mLinePaint.shader = shader
    //测试用的数据
    Log.d(TAG, "onDraw: x:${contentWidth},y:${contentHeight},r:${min(contentWidth,contentHeight).toFloat()/2}")
    //根据目标弧度值绘制弧形
    canvas.drawArc(paddingLeft.toFloat()+mLinePaint.strokeWidth,
        paddingTop.toFloat()+mLinePaint.strokeWidth,
        paddingLeft+min(contentHeight,contentWidth).toFloat()-mLinePaint.strokeWidth-paddingRight,
        paddingTop+min(contentHeight,contentWidth).toFloat()-mLinePaint.strokeWidth-paddingBottom,
        0f,currentRad,false,mLinePaint
        )
    //绘制文字
    mTextPaint.color = mTextColor
    mTextPaint.textSize = mTextSize
    mTextPaint.style = Paint.Style.FILL
    mTextPaint.isUnderlineText = true
    //需要显示在环形进度条中间的字符串
    contentString = (currentRad/360*100).toInt().toString() + "%"
    val lengthOfString = contentString.length * 25
    canvas.drawText(contentString,
        min(contentWidth,contentHeight).toFloat()/2-lengthOfString/2,
        min(contentWidth,contentHeight).toFloat()/2+lengthOfString/10,
        mTextPaint)
    mTextPaint.style = Paint.Style.STROKE
    //测试用
    if (Debug) {
        canvas.drawRect(mSizeWithPadding,mTextPaint)
        canvas.drawRect(paddingLeft.toFloat()+mLinePaint.strokeWidth,
            paddingTop.toFloat()+mLinePaint.strokeWidth,
            paddingLeft+min(contentHeight,contentWidth).toFloat()-mLinePaint.strokeWidth-paddingRight,
            paddingTop+min(contentHeight,contentWidth).toFloat()-mLinePaint.strokeWidth-paddingBottom,
            mTextPaint)
    }

}

这段就是绘制环形进度条的核心代码，实际上逻辑非常简单，主要就是我们需要对Canavs相关的API有所了解，其中关于绘制的线条的颜色，我使用到了shade着色器的辐射渐变模式，这样绘制的线条颜色就会随着绘制的位置改变。

完整代码：

class CircleLineWithText @JvmOverloads constructor(
    mContext: Context, attributeSet: AttributeSet? = null, defStyle:Int = 0
):View(mContext,attributeSet,defStyle) {



    companion object {
        private const val TAG = "CircleLineWithText"
        private const val Debug = true
    }
    var contentString = "Enjoy Your Life Cmf"
    private val Color_TransParent
        get() = resources.getColor(android.R.color.transparent)

    var mTextColor = Color.BLACK
    var mLineColor = Color.BLACK
    var mTextSize = 18f
    var currentRad = 0f


    init {
        //自定义属性
        val typeArray = mContext.obtainStyledAttributes(attributeSet, R.styleable.CircleLineWithText)
        mTextColor = typeArray.getColor(R.styleable.CircleLineWithText_text_Color,Color.BLACK)
        mLineColor = typeArray.getColor(R.styleable.CircleLineWithText_line_Color,Color.BLACK)
        mTextSize = typeArray.getFloat(R.styleable.CircleLineWithText_text_Size,18f)
        currentRad = typeArray.getFloat(R.styleable.CircleLineWithText_current_Radius,0f)
    }

    private val mLinePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        strokeCap = Paint.Cap.ROUND
        style = Paint.Style.STROKE
        strokeWidth = 30f
        color = Color_TransParent
    }

    private val mTextPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = Color_TransParent
        style = Paint.Style.STROKE
        strokeWidth = 0f
    }

    val mSizeWithPadding
        get() = RectF(0f+paddingLeft,0f+paddingTop,
            width.toFloat()-paddingRight-paddingLeft,height.toFloat()-paddingBottom-paddingTop)

    private val contentWidth
        get() = width-paddingLeft-paddingRight

    private val contentHeight
        get() = height-paddingTop-paddingBottom

    fun updateProgress(progressIn100:Int) {
        val tragetRad = progressIn100 * 360 / 100
        currentRad = tragetRad.toFloat()
        invalidate()
    }

    @SuppressLint("DrawAllocation")
    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        val shader = SweepGradient((paddingLeft+contentWidth/2-paddingRight).toFloat(),
            (paddingTop+contentHeight/2-paddingBottom).toFloat(),
                mLineColor,
                Color.RED
            )

        mLinePaint.color = mLineColor
        mLinePaint.shader = shader
        Log.d(TAG, "onDraw: x:${contentWidth},y:${contentHeight},r:${min(contentWidth,contentHeight).toFloat()/2}")
        canvas.drawArc(paddingLeft.toFloat()+mLinePaint.strokeWidth,
            paddingTop.toFloat()+mLinePaint.strokeWidth,
            paddingLeft+min(contentHeight,contentWidth).toFloat()-mLinePaint.strokeWidth-paddingRight,
            paddingTop+min(contentHeight,contentWidth).toFloat()-mLinePaint.strokeWidth-paddingBottom,
            0f,currentRad,false,mLinePaint
            )


        mTextPaint.color = mTextColor
        mTextPaint.textSize = mTextSize
        mTextPaint.style = Paint.Style.FILL
        mTextPaint.isUnderlineText = true
        contentString = (currentRad/360*100).toInt().toString() + "%"
        val lengthOfString = contentString.length * 25
        canvas.drawText(contentString,
            min(contentWidth,contentHeight).toFloat()/2-lengthOfString/2,
            min(contentWidth,contentHeight).toFloat()/2+lengthOfString/10,
            mTextPaint)

        mTextPaint.style = Paint.Style.STROKE

        if (Debug) {
            canvas.drawRect(mSizeWithPadding,mTextPaint)
            canvas.drawRect(paddingLeft.toFloat()+mLinePaint.strokeWidth,
                paddingTop.toFloat()+mLinePaint.strokeWidth,
                paddingLeft+min(contentHeight,contentWidth).toFloat()-mLinePaint.strokeWidth-paddingRight,
                paddingTop+min(contentHeight,contentWidth).toFloat()-mLinePaint.strokeWidth-paddingBottom,
                mTextPaint)
        }

    }
}

最终效果

在这里插入图片描述

Tai_Monster
关注
  • 22
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android实现环形进度条
zyt6575的专栏
12-10 983
package cn.zyt.widgets; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Paint.Style; import andro
Android简易的环形进度条
12-11
自定义的通过扩展View完成的一个圆形的进度条，方法很简单，代码文件中基本描述了使用方法和扩展方式，可自行扩展
android自定义环形进度条（类似仪表盘）
01-05
android自定义环形进度条（类似仪表盘）
Android花样loading进度条（二）-简单环形进度条
海阔天空
04-14 9674
背景 Android花样loading进度条系列文章主要讲解如何自定义所需的进度条，包括水平、圆形、环形、圆弧形、不规则形状等。 本篇我们从圆形进度条讲起，讲简单形式的环形进度条，只有进度色彩，没有进度文字，主要是使用Canvas绘制圆和圆弧。 效果 先上图看效果，这里有6个进度条，样式上有微妙区别，基本都属于一个类别的进度条了。 6个进度条基本上分为3类： 背景条与进度条...
Android 实现环形进度条
Android 领域开发程序员，希望通过写博客的方式不断的总结提升自己，大家共同进步哦！
11-29 2499
progressDrawable属性：确定进度条的背景，进度条颜色等等。项目中常常需要用到进度条，很简单，这儿做一个简单的总结和实现。mmmmmm.xml：drawable文件代码。style属性：确定他是什么类型的进度条。可以看出来这儿和上面是大不一样的。aaa drawable文件。里面的属性就是字面意思。
Android---MaterialCardView的使用
最新发布
FZBH_Q的博客
04-27 654
开发是面向对象。我们找工作应该更多是面向面试。哪怕进大厂真的只是去宁螺丝，但你要进去得先学会面试的时候造飞机不是么？作者13年java转Android开发，在小厂待过，也去过华为，OPPO等，去年四月份进了阿里一直到现在。等大厂待过也面试过很多人。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。这里附上上述的技术体系图相关的几十套腾讯、头条、阿里、美团等公司的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含。
android环形进度条
07-05
一个通俗易懂的环形进度条，可以定制颜色角度，监听进度。
自定义环形进度条
weixin_30254435的博客
09-24 57
自定义环形进度条 效果图： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 ...
Android环形进度条控件
07-30
一个Android环形的进度条控件，效果类似于360手机卫士，我是从AndBase框架中扒下来的，代码我写了注释，编码方式GBK
Android自定义View实现环形进度条的思路与实例
01-20
本文将深入探讨如何实现一个环形进度条，该进度条具有可设置宽度的外圆圈、可定制宽度和颜色的圆形进度条及底部线条，以及可旋转的内部圆形图片。 首先，我们要理解环形进度条的基本构成。如标题和描述所提及，这个...
Android 自定义View实现环形带刻度的进度条
06-19
详情请查看博客:https://blog.csdn.net/qq_20785431/article/details/80740421
android 环形进度条
12-06
这是一个基础的android 环形进度条工程，自己可以根据需求来改造，很好用的
Android实现环形进度条
01-04
一个通俗易懂的环形进度条，可以定制颜色角度，监听进度。 定义一个attrs.xml <?xml version=1.0 encoding=utf-8?> <resources> <declare name=CircleProgressView> <!--画笔宽度--> <attr name=progress_width format=dimension> <!--画笔颜色--> <attr name=progress_color format=color> <!--加载进度起始位置--> <attr name
Android-CircleProgress一个环形进度条
08-12
CircleProgress 一个环形进度条
Android自定义View仿华为圆形加载进度条
08-29
Android自定义View仿华为圆形加载进度条是Android开发中的一种常见的自定义控件，用于显示加载进度的圆形进度条。在本文中，我们将详细介绍如何自定义这种控件，并实现其基本功能。 一、自定义View的基本结构 为了...
Android自定义View圆形进度条控件（三）
08-31
在本文中，我们将详细介绍Android自定义View圆形进度条控件的实现过程和相关知识点。 一、自定义属性 在Android中，我们可以通过在res/values文件夹下新建attrs.xml文件来定义自定义属性。例如，我们可以定义圆形...
Android 自定义环形进度条
long_hai_d的博客
03-05 600
先上效果图吧 ​ 上面的进度条，开始做的时候找了几个不太一样． 然后就自己做了一个修改,继承原生View自己画的 初始化圆的半径和圆心点坐标 @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int height = getDe...
android绘制环形进度_Android自定义环形进度条，自定义View，超实用
weixin_39655689的博客
12-21 161
项目中，我们经常需要用到环形进度条，比如说下载进度，QQ上加载图片的那个进度环，其实这个很好实现，今天我就给大家分享一个我在实际项目中自己写的一个环形进度条，感觉很方便实用，大家如有什么好的想法或者问题，可以跟我联系，我们共同讨论进步。首先我们看一下效果图：源码其实很简单，就一个类，继承自View，让我们看下源码/** 自定义环形进度条 KSCircleProgressBar** Author:K...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值