自定义View-进度条

1、概述

  Long Long Ago，由于当时技术有限，使用一些第三方库才能勉强能够实现这个效果，但是还是存在一些瑕疵，当进度很小的时候，会有溢出的情况，导致进度部分压住了装饰框，没有体现出圆角，显得非常丑陋。最近学习了clipPath方法，正好可以解决了这个问题。

progress.gif

GitHub: https://github.com/aositeluoke/ProgressView

2、绘制流程分析

2.1、绘制装饰框

1、left=装饰框画笔宽度的一半
2、top=装饰框画笔宽度的一半
3、right=控件宽度-装饰框画笔宽度的一半
4、bottom=控件高度-装饰框画笔宽度的一半
5、圆角半径radius=装饰框高度的一半

mProgressRect = new RectF(mDecoratorWidth + mProWidth / 2f,
                mDecoratorWidth + mProWidth / 2f,
                getMeasuredWidth() - mDecoratorWidth + mProWidth / 2f,
                getMeasuredHeight() - mDecoratorWidth - mProWidth / 2f);

  canvas.drawRoundRect(mDecoratorRect, 
                mDecoratorRect.height() / 2, 
                mDecoratorRect.height() / 2,
                mDecoratorPaint);

2.2、绘制裁剪区和进度区

1、left=装饰框画笔宽度+进度条画笔宽度的一半
2、top=装饰框画笔宽度+进度条画笔宽度的一半
3、right=控件宽度-装饰框画笔宽度-进度条画笔宽度的一半
4、bottom=控件高度-装饰框画笔宽度-进度条画笔宽度的一半
5、圆角半径radius=进度区域高度的一半

 /**
     * 绘制裁剪区域和进度区域
     *
     * @param canvas
     */
    private void drawClipAreaAndProArea(Canvas canvas) {
        canvas.save();
        canvas.clipPath(mClipPath);
        mProgressRect.right = mDecoratorWidth + mProWidth / 2f + (getMeasuredWidth() - mDecoratorWidth * 2f - mProWidth) * (mCurPro / mTotalPro);
        canvas.drawRoundRect(mProgressRect, mProgressRect.height() / 2, mProgressRect.height() / 2, mProgressPaint);
        canvas.restore();
    }

2.3、绘制文本

1、baseX=进度条区域宽度+装饰区域画笔宽度-文字区域的宽度-1
减10的目的是使文字与进度条有一定的间距
2、baseY=控件高度/2f+(fontMetrics.bottom-fontMetrics.top)-fontMetrics.bottom
3、fontMetrics的获取方法
  获取fontMetrics之前，需要对mTextPaint对象进行初始化、设置文字大小和颜色等。

fontMetrics = mTextPaint.getFontMetrics();

 /**
     * 绘制文字
     *
     * @param canvas
     */
    private void drawText(Canvas canvas) {
        BigDecimal percent = new BigDecimal(mCurPro * 100).divide(new BigDecimal(mTotalPro), 0, BigDecimal.ROUND_FLOOR);
        String mTextStr = percent + "%";
        mTextPaint.getTextBounds(mTextStr, 0, mTextStr.length(), mTextRect);
        /*进度条区域宽度大于文本区域宽度才可绘制*/
        if (mProgressRect.width() > mTextRect.width() + 10) {
            float max = mProgressRect.width() + mDecoratorWidth - 10;
            baseX = max - mTextRect.width();
            canvas.drawText(mTextStr, baseX, baseY, mTextPaint);
        }
    }

3、提供一些方法

  public void setProgress(float curPro, float totalPro) {
        this.mTotalPro = totalPro;
        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(this, "mCurPro", 0, curPro);
        objectAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
        objectAnimator.setDuration(1000);
        objectAnimator.start();

    }

4、属性说明

属性名	默认值	备注
decorator_width	5	装饰框宽度
cur_pro	0	当前进度
total_pro	0	总进度
pro_color	Color.RED	进度条颜色
decorator_color	Color.BLACK	装饰框颜色
text_color	Color.WHITE	文本颜色
text_size	20	文字大小

5、总结

  以前并不知道有clipPath这个方法，所以一直找不到解决方案，导致这样的结果归根结底还是因为基础薄弱、基础不扎实和缺乏源码阅读能力。源码阅读确实很枯燥，但是里边有很多值得我们学习的知识，和做人的道理是一模一样的，我们要做到取其精华去其糟粕，为我所用即可。