Android绘制垂直进度条并且动态更改进度条颜色_android 垂直进度条

项目场景：

最近项目需求需要绘制出垂直的进度条，来展示汽车刹车的力度数值

问题描述

Android官方给了圆形进度条 水平进度条 但没有原生的垂直进度条，网上大部分都是使用Drawable 绘制出垂直样式，并带有一些弧度。

原因分析：

我们完全可以继承View 会致我们自定义的组件，分析一下进度条无非就是矩形或者Pie 我们可以使用CanVans来绘制属于我们自己的进度条，并且定义不同数值的情况下，展示不同的颜色

解决方案：

自定义View——VerticalProgressBar

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;

import android.util.AttributeSet;
import android.view.View;

public class VerticalProgressBar extends View {
    private Paint paint;// 画笔
    private int progress;// 进度值
    private int width;// 宽度值
    private int height;// 高度值

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

    public VerticalProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public VerticalProgressBar(Context context) {
        super(context);
        init();
    }

    private void init() {
        paint = new Paint();   //初始化
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getMeasuredWidth() - 1;// 宽度值
        height = getMeasuredHeight() - 1;// 高度值
    }

    @Override
    protected void onDraw(Canvas canvas) {
//        设置矩形颜色
        if (progress>=0&&progress<=30){
            paint.setColor(Color.rgb(255, 215, 0));// 数值小于30 展示一种颜色
        }
        else if  (progress>=30&&progress<=60){
            paint.setColor(Color.rgb(127, 255, 0));// 设置30-60情况的画笔颜色
        }else

            paint.setColor(Color.rgb(0, 255, 154));

        canvas.drawRect(0, height - progress / 100f * height, width, height,
                paint);// 画矩形

        canvas.drawLine(0, 0, width, 0, paint);// 画顶边
        canvas.drawLine(0, 0, 0, height, paint);// 画左边
        canvas.drawLine(width, 0, width, height, paint);// 画右边
        canvas.drawLine(0, height, width, height, paint);// 画底边

        super.onDraw(canvas);
    }

    /** 设置progressbar进度 */
    public void setProgress(int progress) {
        this.progress = progress;
        postInvalidate();
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

Android布局代码

 <com.yzj.hmi.weight.VerticalProgressBar
            android:id="@+id/progress_brake"

            android:layout_width="8.5dp"
            android:layout_height="177.5dp"
            android:layout_gravity="center"
            android:layout_marginTop="226.5dp"
            android:layout_marginLeft="462dp"
            android:max="100"
            android:progress="30"></com.yzj.hmi.weight.VerticalProgressBar>
1
2
3
4
5
6
7
8
9
10

直接再MainActivity中 根据项目需求设置数值即可

缺点：只能绘制矩形 不能加入弧度