Android 自定义ProgressBar

一、前言：

一般的ProgressBar 都只是一个光光的条（这里说的都是水平进度条），虽然比不用进度条时给用户的感觉要好，但是如果在形像化的东西上面再加上点文字，将进度描述量化，就可以让用户更加明白当前进度是多少了。

效果图1：

圆角进度条.png

效果图2：

矩形进度条.png

这里的原理就是继承一个ProgressBar，然后重写里面的onDraw()方法。

1、文字在ProgressBar中间

1、重写MyProgressBar

public class MyProgressBar extends ProgressBar {
    String text;
    Paint mPaint;

    public MyProgressBar(Context context) {
        super(context);
        initText();
    }

    public MyProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        initText();
    }

    public MyProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initText();
    }

    public MyProgressBar(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initText();
    }


    @Override
    public synchronized void setProgress(int progress) {
        // TODO Auto-generated method stub
        setText(progress);
        super.setProgress(progress);

    }

    @Override
    protected synchronized void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        //this.setText();
        Rect rect = new Rect();
        this.mPaint.getTextBounds(this.text, 0, this.text.length(), rect);
        int x = (getWidth() / 2) - rect.centerX();
        int y = (getHeight() / 2) - rect.centerY();
        canvas.drawText(this.text, x, y, this.mPaint);
    }

    //初始化，画笔
    private void initText() {
        this.mPaint = new Paint();
        this.mPaint.setTextSize(23);
        this.mPaint.setColor(Color.parseColor("#333333"));
    }

    private void setText() {
        setText(this.getProgress());
    }

    //设置文字内容
    private void setText(int progress) {
        int i = (progress * 100) / this.getMax();
        this.text = String.valueOf(i) + "%";
    }
}

2、进度条颜色设置 pb_pd_sp_blog，放到drable下面

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 进度条背景色 -->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="6dp" />
            <gradient
                android:startColor="#FFE3E3"
                android:centerColor="#FFE3E3"
                android:centerX="0.75"
                android:endColor="#FFE3E3"
                android:angle="0"
                />
        </shape>
    </item>

    <!-- 第二进度条 -->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="6dp" />
                <gradient
                    android:startColor="#FF9027"
                    android:centerColor="#FF9027"
                    android:centerX="0.75"
                    android:endColor="#FB1405"
                    android:angle="0"
                    />
            </shape>
        </clip>
    </item>

  <!--  &lt;!&ndash; 第二进度条 &ndash;&gt;-->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="6dp" />
                <gradient
                    android:startColor="#FF9027"
                    android:centerColor="#FF9027"
                    android:centerX="0.75"
                    android:endColor="#FB1405"
                    android:angle="0"
                    />
            </shape>
        </clip>
    </item>
</layer-list>

3、布局使用

    <com.dotc.kotlindemo.utils.MyProgressBar
        android:id="@+id/progressbar"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="12dp"
        android:max="100"
        android:progress="100"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="120dp"
        android:progressDrawable="@drawable/pb_pd_sp_blog"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        />

4、代码使用

//设置进度
progressbar.setProgress(50)

2、矩形进度条，修改pb_rectangle的角度即可

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 进度条背景色 -->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="0dp" />
            <gradient
                android:startColor="#FFE3E3"
                android:centerColor="#FFE3E3"
                android:centerX="0.75"
                android:endColor="#FFE3E3"
                android:angle="0"
                />
        </shape>
    </item>

    <!-- 第二进度条 -->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="0dp" />
                <gradient
                    android:startColor="#FF9027"
                    android:centerColor="#FF9027"
                    android:centerX="0.75"
                    android:endColor="#FB1405"
                    android:angle="0"
                    />
            </shape>
        </clip>
    </item>

  <!--  &lt;!&ndash; 第二进度条 &ndash;&gt;-->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="0dp" />
                <gradient
                    android:startColor="#FF9027"
                    android:centerColor="#FF9027"
                    android:centerX="0.75"
                    android:endColor="#FB1405"
                    android:angle="0"
                    />
            </shape>
        </clip>
    </item>
</layer-list>