Android 進度條按鈕實現(ProgressButton)

有些App在點擊下載按鈕的時候，可以在按鈕上顯示進度，我們可以通過繼承原生Button，重寫onDraw來實現帶進度條的按鈕。

Github：https://github.com/imcloudfloating/ProgressBar

 

1.效果：

2.原理：

創建三個GradientDrawable作為按鈕背景、進度條背景和進度條前景，通過計算進度條的百分比來設置寬度，然后調用invalidate()重繪。GradientDrawable設置顏色、圓角等參數，當然你也可以直接加載xml作為背景。

3.自定義參數：

在values目錄建一個attrs.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="progressColor" format="color" />
    <attr name="progressBackColor" format="color" />
    <attr name="progress" format="integer" />
    <attr name="minProgress" format="integer" />
    <attr name="maxProgress" format="integer" />

    <declare-styleable name="ProgressButton">
        <attr name="progressColor" />
        <attr name="progressBackColor" />
        <attr name="buttonColor" format="color" />
        <attr name="cornerRadius" format="dimension" />
        <attr name="progress" />
        <attr name="minProgress" />
        <attr name="maxProgress" />
        <attr name="progressMargin" format="dimension" />
    </declare-styleable>

</resources>

3.按鈕類：

在setProgress方法中改變mProgress的值，然后調用invalidate()重繪，因為我這里定義了一個minProgress(默認為0)，所以在計算進度條寬度的時候，當前進度和最大進度都要先減去minProgress再做除法。

if (progressWidth < mCornerRadius * 2) {
    progressWidth = mCornerRadius * 2;
}
當進度條寬度小於2倍圓角半徑的時候，進度條的圓角就和背景的圓角不一致，所以加上了上面這段代碼。
獲取寬度和高度其實用getWidth()和getHeight()也可以，只不過在設計器中沒法看到效果，所以我用了getMeasuredWidth()和getMeasuredHeight()。

package com.cloud.customviews;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.drawable.GradientDrawable;
import android.support.v7.widget.AppCompatButton;
import android.util.AttributeSet;

public class ProgressButton extends AppCompatButton {

    private float mCornerRadius = 0;
    private float mProgressMargin = 0;

    private boolean mFinish;

    private int mProgress;
    private int mMaxProgress = 100;
    private int mMinProgress = 0;

    private GradientDrawable mDrawableButton;
    private GradientDrawable mDrawableProgressBackground;
    private GradientDrawable mDrawableProgress;

    public ProgressButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        initialize(context, attrs);
    }

    public ProgressButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initialize(context, attrs);
    }

    private void initialize(Context context, AttributeSet attrs) {
        //Progress background drawable
        mDrawableProgressBackground = new GradientDrawable();
        //Progress drawable
        mDrawableProgress = new GradientDrawable();
        //Normal drawable
        mDrawableButton = new GradientDrawable();

        //Get default normal color
        int defaultButtonColor = getResources().getColor(R.color.colorGray, null);
        //Get default progress color
        int defaultProgressColor = getResources().getColor(R.color.colorGreen, null);
        //Get default progress background color
        int defaultBackColor = getResources().getColor(R.color.colorGray, null);

        TypedArray attr = context.obtainStyledAttributes(attrs, R.styleable.ProgressButton);

        try {
            mProgressMargin = attr.getDimension(R.styleable.ProgressButton_progressMargin, mProgressMargin);
            mCornerRadius = attr.getDimension(R.styleable.ProgressButton_cornerRadius, mCornerRadius);
            //Get custom normal color
            int buttonColor = attr.getColor(R.styleable.ProgressButton_buttonColor, defaultButtonColor);
            //Set normal color
            mDrawableButton.setColor(buttonColor);
            //Get custom progress background color
            int progressBackColor = attr.getColor(R.styleable.ProgressButton_progressBackColor, defaultBackColor);
            //Set progress background drawable color
            mDrawableProgressBackground.setColor(progressBackColor);
            //Get custom progress color
            int progressColor = attr.getColor(R.styleable.ProgressButton_progressColor, defaultProgressColor);
            //Set progress drawable color
            mDrawableProgress.setColor(progressColor);

            //Get default progress
            mProgress = attr.getInteger(R.styleable.ProgressButton_progress, mProgress);
            //Get minimum progress
            mMinProgress = attr.getInteger(R.styleable.ProgressButton_minProgress, mMinProgress);
            //Get maximize progress
            mMaxProgress = attr.getInteger(R.styleable.ProgressButton_maxProgress, mMaxProgress);

        } finally {
            attr.recycle();
        }

        //Set corner radius
        mDrawableButton.setCornerRadius(mCornerRadius);
        mDrawableProgressBackground.setCornerRadius(mCornerRadius);
        mDrawableProgress.setCornerRadius(mCornerRadius - mProgressMargin);
        setBackgroundDrawable(mDrawableButton);

        mFinish = false;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (mProgress > mMinProgress && mProgress <= mMaxProgress && !mFinish) {
            //Calculate the width of progress
            float progressWidth =
                    (float) getMeasuredWidth() * ((float) (mProgress - mMinProgress) / mMaxProgress - mMinProgress);

            //If progress width less than 2x corner radius, the radius of progress will be wrong
            if (progressWidth < mCornerRadius * 2) {
                progressWidth = mCornerRadius * 2;
            }

            //Set rect of progress
            mDrawableProgress.setBounds((int) mProgressMargin, (int) mProgressMargin,
                    (int) (progressWidth - mProgressMargin), getMeasuredHeight() - (int) mProgressMargin);

            //Draw progress
            mDrawableProgress.draw(canvas);

            if (mProgress == mMaxProgress) {
                setBackgroundDrawable(mDrawableButton);
                mFinish = true;
            }
        }
        super.onDraw(canvas);
    }

    /**
     * Set current progress
     */
    public void setProgress(int progress) {
        if (!mFinish) {
            mProgress = progress;
            setBackgroundDrawable(mDrawableProgressBackground);
            invalidate();
        }
    }

    public void setMaxProgress(int maxProgress) {
        mMaxProgress = maxProgress;
    }

    public void setMinProgress(int minProgress) {
        mMinProgress = minProgress;
    }

    public void reset() {
        mFinish = false;
        mProgress = mMinProgress;
    }
}

 使用：

<com.cloud.customviews.ProgressButton
            android:id="@+id/button_progress_green"
            android:layout_width="270dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:textAllCaps="false"
            android:textColor="@color/colorWhite"
            android:text="@string/button_progress"
            app:cornerRadius="8dp"
            app:progressMargin="2dp"
            app:progressColor="@color/colorGreen"
            app:buttonColor="@color/colorGreen" />