Android自定义控件——HorizontalRoundPro

在Android开发中需要横向圆角进度条时可以通过设置ProgressBar的style和progressDrawable实现。

原生实现

1. 设置样式style="@android:style/Widget.ProgressBar.Horizontal"
2. 设置进度资源android:progressDrawable

<?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="8dp" />
            <solid android:color="@android:color/darker_gray" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%">
            <shape>
                <corners android:radius="8dp" />
                <solid android:color="@android:color/holo_orange_light" />
            </shape>
        </scale>
    </item>

</layer-list>

但是当progress值小于圆角半径甚至更小(progress=1)时进度会变成高度撑满的一条竖线，显示效果和实际我们期望的效果有点出入。

继承已有控件

自定义控件实现横向圆角进度条

1. 创建自己的ProgressBar继承自View

public class HorizontalRoundProgressBar extends View {
}

2. 在onMeasure方法中计算宽、高、圆角半径

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mViewWidth = getMeasuredWidth();
        mViewHeight = getMeasuredHeight();
        mRadius = mViewHeight / 2f;
    }

3. 在onDraw方法中自行绘制进度条背景、前景

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int progressWidth = (int) (mViewWidth * (mProgress * 1.0f / mMaxProgress) + 0.5f);
        //背景
        onDrawPaint.setColor(mColorBg);
        canvas.drawRoundRect(0, 0, mViewWidth, mViewHeight, mRadius, mRadius, onDrawPaint);
        //前景
        canvas.save();
        onDrawPath.addRoundRect(0, 0, mViewWidth, mViewHeight, mRadius, mRadius, Path.Direction.CW);
        canvas.clipPath(onDrawPath);
        onDrawPaint.setColor(mColorProgress);
        canvas.drawRoundRect(progressWidth - mViewWidth, 0, progressWidth, mViewHeight, mRadius, mRadius, onDrawPaint);
        canvas.restore();
    }

效果图

HorizontalRoundProgressBar.gif