Android 自带描边颜色渐变炫酷进度条

上图是我在PhotoShop中做出的进度条效果图，这张图充分阐释了本篇自定义进度条的精髓！

在Android中实现该进度条的原理：(和ps中作图原理一样,理解ps中的图层便懂得了如何在android中实现该进度条)

1. 画第一个圆角矩形作为进度条的最底层(描边层)

2. 画第二个圆角矩形作为进度条的第二层(背景层)盖在描边层之上

3. 画第三个圆角矩形作为进度条的最外层(进度层)盖在背景层之上

4. 描边层和背景层颜色可用纯色,进度层为了炫酷可用渐变色

这是实现该自带描边颜色渐变进度条的原理,也是在PS中实现该效果的步骤,同样适用于在Android中用代码来实现。

原理明白之后,代码就变得非常简单了：

public class ColorGradientProgressBar extends View {

    /**
     * 渐变颜色组
     */
    private int[] GRADIENT_COLORS = {Color.parseColor("#85D0E8"), Color.parseColor("#138CCF")};
    /**
     * 最大进度
     */
    private float max = 100;
    /**
     * 当前进度
     */
    private float progress;
    /**
     * 画笔
     */
    private Paint mPaint;
    /**
     * 外描边的宽度
     */
    private float BORDER_STROCK;
    /**
     * 进度条进度矩形与控件边界的距离,≥BORDER_STROCK
     */
    private float PROGRESS_STROCK;
    //进度条的宽高
    private int mWidth, mHeight;
    /**
     * 画进度条的矩形
     */
    private RectF mRectF;

    public ColorGradientProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    public ColorGradientProgressBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ColorGradientProgressBar(Context context) {
        this(context, null);
    }

    private void initView() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mRectF = new RectF();
        BORDER_STROCK = getResources().getDimension(R.dimen.x3);
        PROGRESS_STROCK = getResources().getDimension(R.dimen.x5);
    }

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

        int round = mHeight / 2;//弧度为高度的一半
        mRectF.set(0, 0, mWidth, mHeight);//第一层矩形(描边层)
        mPaint.setColor(Color.parseColor("#A3D8E8"));//第一层矩形颜色(进度条描边的颜色)
        canvas.drawRoundRect(mRectF, round, round, mPaint);//画第一层圆角矩形
        mPaint.setColor(Color.parseColor("#474C4E"));//第二层矩形颜色(背景层颜色)
        mRectF.set(BORDER_STROCK, BORDER_STROCK, mWidth - BORDER_STROCK, mHeight - BORDER_STROCK);//第二层矩形(背景层)
        canvas.drawRoundRect(mRectF, round, round, mPaint);//画背景层圆角矩形(盖在描边层之上)
        if (progress == 0)//进度为 0不画进度
            return;
        float section = progress / max;
        //第三层矩形(进度层)
        mRectF.set(PROGRESS_STROCK, PROGRESS_STROCK, (mWidth - PROGRESS_STROCK) * section, mHeight - PROGRESS_STROCK);
        //创建线性颜色渐变器
        LinearGradient shader = new LinearGradient(PROGRESS_STROCK, PROGRESS_STROCK,
                (mWidth - PROGRESS_STROCK) * section, mHeight - PROGRESS_STROCK, GRADIENT_COLORS, null, Shader.TileMode.MIRROR);
        mPaint.setShader(shader);//第三层矩形颜色(进度渐变色)
        canvas.drawRoundRect(mRectF, round, round, mPaint);//画第三层(进度层)圆角矩形(盖在背景层之上)
        mPaint.setShader(null);//清除之前传递的shader
    }

    /***
     * 设置最大进度
     *
     * @param maxCount
     */
    public void setMax(float maxCount) {
        this.max = maxCount;
    }

    /***
     * 设置当前进度
     *
     * @param currentCount
     */
    public void setProgress(float currentCount) {
        this.progress = currentCount > max ? max : currentCount;
        invalidate();
    }

    public float getMax() {
        return max;
    }


    /**
     * 测量得到进度条的宽高
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
        if (widthSpecMode == MeasureSpec.EXACTLY || widthSpecMode == MeasureSpec.AT_MOST) {
            mWidth = widthSpecSize;
        } else {
            mWidth = 0;
        }
        if (heightSpecMode == MeasureSpec.AT_MOST || heightSpecMode == MeasureSpec.UNSPECIFIED) {
            mHeight = (int) getResources().getDimension(R.dimen.x20);
        } else {
            mHeight = heightSpecSize;
        }
        setMeasuredDimension(mWidth, mHeight);
    }
}

代码很简单,注释也很清楚,效果如下：

代码中使用了dimens适配,详情请看Android 屏幕适配之dimens适配

Demo源码下载