目錄：android.widget.ProgressBar

通過xml的屬性處理達(dá)到進(jìn)度條顯示效果：

xml布局

<ProgressBar
    android:id="@+id/pb_finish_bar"
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:layout_margin="20dp"
    android:layout_marginTop="2dp"
    android:indeterminateOnly="false"
    android:max="100"
    android:progress="60"
    android:progressDrawable="@drawable/common_progress_bg" />

common_progress_bg.xml

<?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>
            <gradient
                android:angle="270"
                android:centerY="0.75"
                android:endColor="#f0f0f0"
                android:startColor="#f0f0f0" />
            <!--邊線-->
            <stroke
                android:width="0px"
                android:color="#00A43030" />
            <!--定義背景圓角-->
            <corners
                android:bottomLeftRadius="25dp"
                android:bottomRightRadius="25dp"
                android:topLeftRadius="25dp"
                android:topRightRadius="25dp" />
        </shape>
    </item>
    <!--預(yù)加載緩存進(jìn)度-->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <gradient
                    android:angle="270"
                    android:centerY="0.75"
                    android:endColor="#00FFFFFF"
                    android:startColor="#00FFFFFF" />
                <corners
                    android:bottomLeftRadius="25dp"
                    android:bottomRightRadius="25dp"
                    android:topLeftRadius="25dp"
                    android:topRightRadius="25dp" />
            </shape>
        </clip>
    </item>
    <!--進(jìn)度-->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:angle="270"
                    android:centerY="0.75"
                    android:endColor="#FF276E9C"
                    android:startColor="#FF276E9C" />
                <corners
                    android:bottomLeftRadius="25dp"
                    android:bottomRightRadius="25dp"
                    android:topLeftRadius="25dp"
                    android:topRightRadius="25dp" />
            </shape>
        </clip>
    </item>
</layer-list>

通過自定義view實(shí)現(xiàn)進(jìn)度條效果：

xml布局

<com.jianshu.HorizontalProgressBar
    android:id="@+id/mpb"
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:layout_marginTop="50dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    app:pb_bg_color="#f0f0f0"
    app:pb_max="100"
    app:pb_padding="0dp"
    app:pb_pb_color="#FF00FF"
    app:pb_progress="60" />

attrs.xml

<!--水平進(jìn)度條-->
<declare-styleable name="HorizontalProgressBar">
    <attr name="pb_padding" format="dimension" />
    <attr name="pb_bg_color" format="color|reference" />
    <attr name="pb_pb_color" format="color|reference" />
    <attr name="pb_max" format="integer" />
    <attr name="pb_progress" format="integer" />
</declare-styleable>

代碼中使用：

HorizontalProgressBar mpb = (HorizontalProgressBar) findViewById(R.id.mpb);
//進(jìn)度值
mpb.setProgress(60);
//必須户矢，設(shè)置最大值
mpb.setMax(100);

自定義view：

public class HorizontalProgressBar extends View {

    private int max;
    private int progress;
    private int bgColor;
    private int progressColor;
    private int padding;

    private Paint progressPaint;
    private Paint bgPaint;

    public HorizontalProgressBar(Context context) {
        super(context);
        init(context, null);
    }

    public HorizontalProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public HorizontalProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        initAttrs(context, attrs);
        initPaths();
    }

    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.HorizontalProgressBar);
        max = a.getInteger(R.styleable.HorizontalProgressBar_pb_max, 100);
        progress = a.getInteger(R.styleable.HorizontalProgressBar_pb_progress, 0);
        bgColor = a.getColor(R.styleable.HorizontalProgressBar_pb_bg_color, 0xff3F51B5);
        progressColor = a.getColor(R.styleable.HorizontalProgressBar_pb_pb_color, 0xffFF4081);
        padding = a.getDimensionPixelSize(R.styleable.HorizontalProgressBar_pb_padding, 2);
        a.recycle();
    }

    private void initPaths() {
        progressPaint = new Paint();
        progressPaint.setColor(progressColor);
        progressPaint.setStyle(Paint.Style.FILL);
        progressPaint.setAntiAlias(true);

        bgPaint = new Paint();
        bgPaint.setColor(bgColor);
        bgPaint.setStyle(Paint.Style.FILL);
        bgPaint.setAntiAlias(true);

    }

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

    private void drawProgress(Canvas canvas) {
        int width = getWidth();
        if (width % 2 != 0) {
            //Fix Me
            width = width-1;
        }
        float percent = 0;
        if (max != 0) {
            percent = progress * 1.0f / max;
        }
        int progressHeight = getHeight() - padding * 2;
        if (progressHeight % 2 != 0) {
            progressHeight = progressHeight -1;
        }
        int progressWidth = width - padding * 2 - progressHeight;
        float dx =  progressWidth * percent;
        //left circle
        canvas.drawCircle(padding+progressHeight/2, padding+progressHeight/2, progressHeight/2, progressPaint);
        //right circle
        canvas.drawCircle(padding+progressHeight/2+dx, padding+progressHeight/2, progressHeight/2, progressPaint);
        //middle line
        RectF midRecf = new RectF(padding+progressHeight/2, padding,padding + progressHeight/2 + dx, padding+ progressHeight);
        canvas.drawRect(midRecf, progressPaint);
    }

    private void drawBackground(Canvas canvas) {
        int bgHeight = getHeight();
        if (bgHeight % 2 != 0) {
            bgHeight = bgHeight-1;
        }
        int width = getWidth();
        if (width % 2 != 0) {
            //Fix Me
            width = width-1;
        }

        //left circle
        canvas.drawCircle(bgHeight/2, bgHeight/2, bgHeight/2, bgPaint);
        //right circle
        canvas.drawCircle(width-bgHeight/2, bgHeight/2, bgHeight/2, bgPaint);
        //middle line
        RectF midRecf = new RectF(bgHeight/2, 0, width-bgHeight/2, bgHeight);
        canvas.drawRect(midRecf, bgPaint);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    public int getMax() {
        return max;
    }

    public void setMax(int max) {
        this.max = max;
        invalidate();
    }

    public int getProgress() {
        return progress;
    }

    public void setProgress(int progress) {
        this.progress = progress;
        invalidate();
    }

    public int getBgColor() {
        return bgColor;
    }

    public void setBgColor(int bgColor) {
        this.bgColor = bgColor;
        invalidate();
    }

    public int getProgressColor() {
        return progressColor;
    }

    public void setProgressColor(int progressColor) {
        this.progressColor = progressColor;
        invalidate();
    }

    public int getPadding() {
        return padding;
    }

    public void setPadding(int padding) {
        this.padding = padding;
        invalidate();
    }

    /**
     * get the percentage value of progress and max.
     * @return percentage value
     */
    public int getPercentage() {
        if (max == 0) {
            return 0;
        }
        return (int) (progress*100.0/max);
    }

}