自定义带进度条的圆角button

自定义带进度条的圆角button

1、实现效果

2、代码实现

public class UpdateButton extends View {

    private static final String TAG = "UpdateButton";

    private Paint mPaint;
    private int mBlueColor;
    private int mBackGroundColor;
    private int mWhiteColor;
    private float mBaseLine;
    private RectF mRectF;
    private String mButtonText;
    private float mProgress;
    private int mTextSize;
    private int mMaxProgress = 1;
    private int mMinProgress = 0;

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

    public UpdateButton(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public UpdateButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mBlueColor = getResources().getColor(R.color.button_and_text_color);
        mBackGroundColor = getResources().getColor(R.color.button_progress_color);
        mWhiteColor = getResources().getColor(R.color.bar_color);
        mTextSize = sp2px(12);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setTextAlign(Paint.Align.CENTER);
        mPaint.setTextSize(mTextSize);
        mPaint.setColor(mBlueColor);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mRectF = new RectF(2.5f, 2.5f, w - 2.5f, h - 2.5f);
        Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
        mBaseLine = h / 2 + (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.save();

        float height = mRectF.height();
        float width = mRectF.right;
        if (height <= 0 || width <= 0) {
            return;
        }
        mPaint.setShader(null);
        mPaint.setColor(mBlueColor);

        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(5);
        mPaint.setAntiAlias(true);

        float radius = height / 2;

        canvas.drawRoundRect(mRectF, radius, radius, mPaint);

        mPaint.setStyle(Paint.Style.FILL);

        if (mProgress > mMinProgress && mProgress < mMaxProgress) {
            LinearGradient progressGradient = new LinearGradient(0, 0, width, 0,
                    new int[]{mBackGroundColor, Color.TRANSPARENT},
                    new float[]{mProgress, 0},//两种颜色占的比重
                    LinearGradient.TileMode.CLAMP);
            mPaint.setShader(progressGradient);
            canvas.drawRoundRect(mRectF, radius, radius, mPaint);
            mPaint.setShader(null);
        }
        if (TextUtils.isEmpty(mButtonText)) {
            return;
        }
        canvas.drawText(mButtonText, width / 2, mBaseLine, mPaint);
        mRectF.right = width;
    }

    /**
     * 设置按钮文本
     *
     * @param buttonText
     */
    public void setButtonText(String buttonText) {
        this.mButtonText = buttonText;
        invalidate();
    }

    public String getButtonText() {
        return mButtonText;
    }

    /**
     * 设置文本字体大小
     *
     * @param textSize
     */
    public void setTextSize(int textSize) {
        this.mTextSize = sp2px(textSize);
    }

    /**
     * sp to dp
     *
     * @param sp
     * @return dp
     */
    private int sp2px(float sp) {
        final float fontScale = getContext().getResources().getDisplayMetrics().scaledDensity;
        return (int) (sp * fontScale + 0.5f);
    }

    public void setProgress(float progress) {
        mProgress = progress / 100f;
        invalidate();
    }

    public float getProgress() {
        return mProgress;
    }

    public void updateButtonUI(String text, float progress) {
        setButtonText(text);
        setProgress(progress);
    }
}