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" />