自定义左边细右边粗进度条

自定义 长形进度条左边细右边粗

无意间看到这个需求，自己实现了一波，技术很菜仅作记录。

上图

直接自定义View，下面贴代码

package com.wavewave.myapplication.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PointF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import androidx.annotation.Nullable;

import com.wavewave.myapplication.R;


/**
 * @author wavewave
 * @CreateDate: 2022/7/12 6:31 下午
 * @Description:
 * @Version: 1.0
 */
public class GradientWidthAndColorLine extends View {
    private Paint mPaint;
    private Paint mPaintCircle;
    private Paint mPaintNew;
    private float mStartSize = 50f;
    private float mEndSize = 10f;
    private int mStartColor = Color.BLACK;
    private int mEndColor = Color.RED;
    private int defaultHeight = 30;
    //创建point对象 参数为x坐标和y坐标
    private PointF point = new PointF(100, 100);
    private int circleRaid = 50;

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

    public GradientWidthAndColorLine(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public GradientWidthAndColorLine(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
//        TypedArray obtainStyledAttributes = getContext().obtainStyledAttributes(R.styleable.GradientWidthAndColorLine);
//        mStartColor = obtainStyledAttributes.getColor(R.styleable.GradientWidthAndColorLine_gradient_start_color, Color.BLACK);
//        mEndColor = obtainStyledAttributes.getColor(R.styleable.GradientWidthAndColorLine_gradient_end_color, Color.RED);
//        mStartSize = obtainStyledAttributes.getDimension(R.styleable.GradientWidthAndColorLine_gradient_start_size, 50f);
//        mEndSize = obtainStyledAttributes.getDimension(R.styleable.GradientWidthAndColorLine_gradient_end_size, 10f);
//        obtainStyledAttributes.recycle();

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(mStartColor);
        mPaintCircle = new Paint();
        mPaintCircle.setColor(Color.BLUE);

        mPaintNew = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintNew.setStyle(Paint.Style.FILL);
        mPaintNew.setColor(Color.GRAY);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        LinearGradient linearGradient = new LinearGradient(
                0f, 0f, getMeasuredWidth(), getMeasuredHeight(), new int[]{Color.parseColor("#FFFEB2C5"), Color.parseColor("#FFFF678C")
        }, new float[]{0.0f, 1.0f}, Shader.TileMode.CLAMP);

        mPaint.setShader(linearGradient);
        Path path = new Path();

        int startY = 50;
        path.moveTo(20, 0 + startY);
        path.quadTo(0, 20 + startY, 20, 40 + startY);
        canvas.drawPath(path, mPaintNew);

        path.moveTo(20, 0 + startY);
        path.lineTo(20, 40 + startY);

        path.lineTo(getMeasuredWidth() - 25, 50 + startY);
        path.lineTo(getMeasuredWidth() - 25, 0f + startY);
        path.lineTo(20, 0 + startY);
        path.close();
        canvas.drawPath(path, mPaintNew);

        path.moveTo(getMeasuredWidth() - 25, 0 + startY);
        path.quadTo(getMeasuredWidth(), 25 + startY, getMeasuredWidth() - 25, 50 + startY);
        canvas.drawPath(path, mPaintNew);


        Path newPath = new Path();
        newPath.moveTo(20, 0 + startY);
        newPath.quadTo(0, 20 + startY, 20, 40 + startY);
        canvas.drawPath(newPath, mPaint);

        newPath.moveTo(20, 0 + startY);
        newPath.lineTo(20, 40 + startY);
        newPath.lineTo(point.x - 25, 50 + startY);
        newPath.lineTo(point.x - 25, 0f + startY);
        newPath.lineTo(20, 0 + startY);
        newPath.close();
        canvas.drawPath(newPath, mPaint);


        canvas.drawCircle(point.x, startY + 25, circleRaid, mPaintCircle);

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //获得触摸事件
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                break;
            //ACTION_MOVE不要设置break，否则圆形不会跟随手指活动 只会手指松开屏幕的时候圆形直接到了屏幕停止的位置
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_UP:
                //获取手指触摸位置的x坐标
                point.x = event.getX();
                //获取手指触摸位置的y坐标
                point.y = event.getY();
                if (point.x < circleRaid) {
                    point.x = circleRaid;
                }
                if (point.x >= getMeasuredWidth() - 25) {
                    point.x = getMeasuredWidth() - circleRaid;
                }
                //启动
                postInvalidate();
                break;
        }
        return true;
    }
}