挥洒创意，自由打造个性化 Android 圆形进度条

Android

2024-01-16 09:36:32

打造独一无二的圆形进度条：Android 自定义圆形进度条指南

踏入 Android 自定义圆形进度条的世界，让你的应用程序界面焕然一新，尽情挥洒创意，展现你的个性。告别单调乏味，开启定制之旅，打造令人眼前一亮的进度显示效果。

抛开默认，拥抱自定义

默认的圆形进度条虽然实用，但难免千篇一律。通过继承 View 类，你可以掌控进度条的外观、行为和交互，打造独一无二的视觉体验。

绘制圆形进度条：画笔与弧度

使用画笔绘制圆形背景，再用 drawArc() 方法绘制进度弧线。控制弧度的角度，巧妙呈现不同进度的效果。

动画点缀，让进度灵动起来

让进度条充满活力，使用 ValueAnimator 创建平滑过渡的动画效果。不断更新进度值，强制界面重绘，实现进度条的动态变化。

个性化外观，彰显你的风格

自定义圆形进度条的精髓在于个性化外观。通过设置画笔颜色、线宽和阴影，打造符合你设计理念的进度条。添加自定义字体和文本，显示进度值或其他信息。

实用示例，学以致用

// CustomCircularProgressBar.java

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.ValueAnimator;

public class CustomCircularProgressBar extends View {
    private int progress = 0;
    private int maxProgress = 100;
    private Paint paint;
    private RectF rectF;
    
    public CustomCircularProgressBar(Context context) {
        super(context);
        init();
    }
    
    public CustomCircularProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    
    private void init() {
        paint = new Paint();
        paint.setColor(Color.BLUE);
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.STROKE);
        rectF = new RectF();
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float radius = Math.min(getWidth(), getHeight()) / 2;
        rectF.set(getWidth() / 2 - radius, getHeight() / 2 - radius, getWidth() / 2 + radius, getHeight() / 2 + radius);
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, paint);
        canvas.drawArc(rectF, -90, (float) (progress * 360.0 / maxProgress), false, paint);
    }
    
    public void setProgress(int progress) {
        this.progress = progress;
        ValueAnimator animator = ValueAnimator.ofInt(0, progress);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                setProgress((Integer) animation.getAnimatedValue());
            }
        });
        animator.setDuration(1000);
        animator.start();
    }
}