水平渐变进度条实现笔记

实现水平渐变进度条自定义view方案，代码如下

复制代码

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;

import com.example.nn20.utils.KLog;

/**
 * @ClassName: RoundRectProgressBar
 * @description 渐变色进度条
 * @Author: pyd
 * @Date: 2026/05/08
 */
public class RoundRectProgressBar extends View {

    private float progress = 0f; // 0 ~ 1

    private int backgroundColor = Color.LTGRAY;
    private float cornerRadius = 30f;
    //    private int[] gradientColors = new int[]{Color.RED, Color.YELLOW, Color.GREEN};
    // 渐变颜色数组
    private int[] gradientColors = new int[]{Color.parseColor("#FFFFFF"), Color.parseColor("#9005FB"), Color.parseColor("#3B35FF")};

    private Paint bgPaint;
    private Paint progressPaint;

    public RoundRectProgressBar(Context context) {
        this(context, null);
    }

    public RoundRectProgressBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RoundRectProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        bgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        bgPaint.setStyle(Paint.Style.FILL);
        bgPaint.setColor(backgroundColor);

        progressPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        progressPaint.setStyle(Paint.Style.FILL);
    }

    /**
     * 设置进度值
     *
     * @param value 进度值 (0 ~ 1)
     */
    public void setProgress(float value) {
        progress = Math.max(0f, Math.min(1f, value));
        invalidate();
    }

    /**
     * 设置进度值
     *
     * @param value 进度值 (0 ~ 100)
     */
    public void setProgress(int value) {
        float newValue = value / 100f;
        KLog.d("设置的进度值: " + value + ", 转换后的进度值: " + newValue);
        progress = Math.max(0f, Math.min(1f, newValue));
        invalidate();
    }

    /**
     * 设置渐变颜色数组
     *
     * @param colors 渐变颜色数组
     */
    public void setGradientColors(int[] colors) {
        gradientColors = colors;
        invalidate();
    }

    /**
     * 设置背景颜色
     *
     * @param color 背景颜色
     */
    public void setBarBackgroundColor(int color) {
        bgPaint.setColor(color);
        invalidate();
    }

    /**
     * 设置圆角半径
     *
     * @param radius 圆角半径
     */
    public void setCornerRadius(float radius) {
        cornerRadius = radius;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 1. 背景圆角矩形
        RectF rect = new RectF(0f, 0f, getWidth(), getHeight());
        canvas.drawRoundRect(rect, cornerRadius, cornerRadius, bgPaint);

        // 2. 进度条区域
        float progressWidth = getWidth() * progress;
        if (progressWidth > 0) {
            // 渐变填充：在整个宽度上分配三种颜色，然后根据进度裁剪
            LinearGradient shader = new LinearGradient(
                    0f, 0f, getWidth(), 0f,
                    gradientColors, null, Shader.TileMode.CLAMP
            );
            progressPaint.setShader(shader);

            RectF progressRect = new RectF(0f, 0f, progressWidth, getHeight());
            canvas.drawRoundRect(progressRect, cornerRadius, cornerRadius, progressPaint);
        }
    }
}

使用很简单就是xml添加

复制代码

<com.example.nn20.view.RoundRectProgressBar
    android:id="@+id/rr_progress_bar"
    android:layout_width="match_parent"
    android:layout_height="6dp"
    android:layout_marginStart="46dp"
    android:layout_marginTop="6dp"
    android:layout_marginEnd="12dp"
    android:layout_marginBottom="8dp"
    android:progressDrawable="@drawable/progress_gradient_bg5"
    app:layout_constraintBottom_toBottomOf="@id/tv_saturated"
    app:layout_constraintStart_toEndOf="@id/tv_saturated"
    app:layout_constraintTop_toTopOf="@id/tv_saturated" />

代码更新进度：

复制代码

progressBar.setProgress(roleData.getProgress());

本方案是在下面文章基础上优化的Android 渐变色整理之功能实现<二>文字,背景,边框,进度条等继续各式各样的渐变来了,UI大手一挥,码农搞断腿.今 - 掘金