项目里有一个需求写一条这样的progressBar：

image

这里的业务逻辑是这样的：

image

看了下写小程序老哥的ant design居然自带这种玩意 唉 提起袖子自定义view走起

public class SectionProgressBar extends View {
    private int data1=0, data2=0, data3=0;
    private double per=0, all=1;
    private int color1;
    private int color2;
    private int color3;
    private int color_all;
    private int color_circle;
    private Context context;//上下文
    private Paint mProgressPaint;//画笔
    private int height_bar, width_bar;//bar的宽高（不包括内边距）
    private int corner = 5;//圆角弧度
    private int width_per, width_data1, width_data2, width_data3, width_circle;//各个进度的宽度
    private float[] corners = new float[] {corner, corner, 0, 0, 0, 0, corner, corner};
    private float[] nocorners = new float[] {0, 0, 0, 0, 0, 0, 0, 0};

    //直接new时调用
    public SectionProgressBar(Context context) {
        super(context);
        init(context);
    }

    //写在布局文件中时调用
    public SectionProgressBar(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    //写在布局文件中并且有自定义属性时调用
    public SectionProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    //初始化
    private void init(Context context) {
        this.context = context;
        mProgressPaint = new Paint();
        mProgressPaint.setStyle(Paint.Style.FILL);
        mProgressPaint.setAntiAlias(true);

        color1 = context.getResources().getColor(R.color.color_data1);
        color2 = context.getResources().getColor(R.color.color_data2);
        color3 = context.getResources().getColor(R.color.color_data3);
        color_all = context.getResources().getColor(R.color.color_all);
        color_circle = context.getResources().getColor(R.color.color_circle);
    }

    //设置几个参数值
    public void setData(int data1, int data2, int data3, double per, double all) {
        if(all <= 0 || data1 < 0 || data2 < 0 || data3 < 0 || per < 0 || per > all) {
            return;
        }
        this.data1 = data1;
        this.data2 = data2;
        this.data3 = data3;
        this.per = per;
        this.all = all;
    }

    //设置几个参数值
    public void setData( double per, double all) {
        if(all <= 0 ||  per < 0 || per > all) {
            return;
        }
        this.data1 = 0;
        this.data2 = 0;
        this.data3 = 1;
        this.per = per;
        this.all = all;
    }

    //设置每一块进度的颜色
    public void setColor(int color1, int color2, int color3, int color_all, int color_circle) {
        if(color1 >= 0)
            this.color1 = color1;
        if(color2 >= 0)
            this.color2 = color2;
        if(color3 >= 0)
            this.color3 = color3;
        if(color_all >= 0)
            this.color_all = color_all;
        if(color_circle >= 0)
            this.color_circle = color_circle;
    }

    //设置圆角弧度
    public void setCorner(int corner) {
        if(corner < 0)
            return;
        this.corner = corner;
        this.corners = new float[]{corner, corner, 0, 0, 0, 0, corner, corner};
    }
    //设置进度圆半径
    public void setVircleWidth(int radius) {
        if(radius <= 0)
            return;
        this.width_circle = radius;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);

        height_bar = height - getPaddingTop() - getPaddingBottom();
        width_bar = width - getPaddingLeft() - getPaddingRight();

        width_per = (int)(per / all * width_bar);
        if(data1 + data2 + data3 == 0) {
            width_data1 = 0;
            width_data2 = 0;
            width_data3 = 0;
        } else {
            width_data1 = (int) (data1 / (double)(data1+data2+data3) * width_per);
            width_data2 = (int) (data2 / (double)(data1+data2+data3) * width_per);
            width_data3 = (int) (data3 / (double)(data1+data2+data3) * width_per);
        }
        width_circle = 15;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制总进度
        mProgressPaint.setColor(color_all);
        canvas.drawRoundRect(getPaddingLeft(), getPaddingTop() + height_bar/4, getPaddingLeft() + width_bar, getPaddingTop() + height_bar*3/4, corner, corner, mProgressPaint);

        //绘制data1进度
        getRoundedCornerBitmap(canvas, getPaddingLeft(), getPaddingTop(), width_data1, height_bar, color1, corners);

        //绘制data2进度
        if(data1 > 0) {
            getRoundedCornerBitmap(canvas, getPaddingLeft() + width_data1, getPaddingTop(), width_data2, height_bar, color2, nocorners);
        } else {
            getRoundedCornerBitmap(canvas, getPaddingLeft() + width_data1, getPaddingTop(), width_data2, height_bar, color2, corners);
        }

        //绘制data3进度
        if(data1 > 0 || data2 > 0) {
            getRoundedCornerBitmap(canvas, getPaddingLeft() + width_data1 + width_data2, getPaddingTop(), width_data3, height_bar, color3, nocorners);
        } else {
            getRoundedCornerBitmap(canvas, getPaddingLeft() + width_data1 + width_data2, getPaddingTop(), width_data3, height_bar, color3, corners);
        }

        //绘制进度圆点
        mProgressPaint.setColor(color_circle);
        canvas.drawCircle(getPaddingLeft() + width_per, getPaddingTop() + height_bar/2, width_circle, mProgressPaint);
    }

    //绘制圆角矩形
    public static void getRoundedCornerBitmap(Canvas canvas, int x, int y, int width, int height, int color, float[] outerR) {
        ShapeDrawable mDrawables= new ShapeDrawable(new RoundRectShape(outerR, null,null));
        mDrawables.getPaint().setColor(color);
        mDrawables.setBounds(x, y, x + width, y + height);
        mDrawables.draw(canvas);
    }
}

使用

<com.jiangpin.yingheceping.view.SectionProgressBar
                    android:id="@+id/price_seekbar"
                    android:layout_width="match_parent"
                    android:layout_height="20dp"
                    android:paddingHorizontal="20dp"
                    android:paddingTop="8dp"
                    android:paddingBottom="8dp" />

代码中

priceSeekBar.setData(a, b, c, per, all);
//在RecyclerView中使用需要调用此方法 否则在复用的时候会无法更新数据，暂时不知道啥子原因
priceSeekBar.requestLayout();