Android自定义旋转进度条

Android自定义旋转进度条

文章目录

• 一、前言
• 二、编码
• 三、参考链接

一、前言

在实际开发中，当数据加载时候我们要显示一个圆形旋转当进度条。这个系统提供当有，但是UI给的往往会有些变动，例如如下效果

这时候该怎么做呢？通常网上的做法是继承View进行自己绘制。但是为什么不能继承现有的进度条进行绘制呢？

二、编码

1、拓展带文字的进度条

首先我们选择新版的ContentLoadingProgressBar来进行继承拓展(因为这个相对于ProgressBar来说用户体验上会有一点优化)。然后在继承的控件里面绘制文字，然后选择设置进度条的背景色。代码如下:

class CustomProgress: ContentLoadingProgressBar {

    //中心显示的文字
    private var centerText = "Scanning..."
    private var textColor = Color.parseColor("#5ED9ED")
    set(value) {
        field = value
        postInvalidate()
    }

    //绘制的画笔
    private val textPaint = Paint()

    constructor(context: Context) : super(context){
        initPaint()
    }
    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs){
        initPaint()
    }

    private fun initPaint(){
        textPaint.color = textColor
        textPaint.textSize = PxUtils.spToPx(12,context).toFloat()
        textPaint.style = Paint.Style.FILL
        textPaint.isAntiAlias = true
        textPaint.textAlign = Paint.Align.CENTER
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvasCenterText(canvas)
    }

    
    private fun canvasCenterText(canvas: Canvas?){
        canvas?.drawText(centerText, (width / 2).toFloat(), (width / 2).toFloat(), textPaint)
    }

}

2、创建动画背景

在../app/res/文件夹下面创建anim文件夹。创建anim_progress.xml文件。内容如下:

其中动画文件里面的drawable引用的是一个旋转的图片，也可以自定义。

使用如下：

三、参考链接

1. Android 项目中 Loading 对话框的优化_weixin_38754349的博客-CSDN博客