自定义控件练习库--自定义ProgressBar

样式效果

之前看到一些进度条的效果，自己想着如何实现类似时钟刻度的一个进度条。正好在任主席的知识星球看到一片博客是写一个自定义时钟的文章，就用来参考改造一下。正好打算自己慢慢的收集一些效果库。所以就弄出来一个库来记录。当前实现的效果类似这样：

所遇到的问题

先是画出一个默认的的圆环刻度，这里使用的是 canvas 的方法。重要的就是 drawLine 和 rotate 方法。其中的难点就是 drawLine 的坐标的计算。
控件继承的是View，因此还需要考虑到控件 wrap_content的属性无效的问题。通过如下代码解决该问题：

   public static int measureDimension(int measureSpec){
        int defaultSize = 800;
        int model = View.MeasureSpec.getMode(measureSpec);
        int size = View.MeasureSpec.getSize(measureSpec);
        Log.d("qhh","size = "+size);
        switch (model) {
            case View.MeasureSpec.EXACTLY:
                return size;
            case View.MeasureSpec.AT_MOST: //对应wrap_content
                return Math.min(size, defaultSize);
            case View.MeasureSpec.UNSPECIFIED:
                return defaultSize;
            default:
                return defaultSize;
        }
    }
    /**
    然后再 onMeasure 方法中设置好默认的大小
    */
  	@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        Log.d("qhh", "onMeasure");
        setMeasuredDimension(Dimension.measureDimension(widthMeasureSpec),
                Dimension.measureDimension(heightMeasureSpec));
    }

之后再 onDraw 中将相关的刻度线画出来：
1、先画出来默认的刻度线：

private void drawDefaultCircle() {
        int width = getWidth();
        int height = getHeight();
        float rotate = 360f / mPercentMax;

        //画背景刻度,需要考虑到控件的高宽不一样，按照最小边计算圆环的半径
        //保证圆环画出来是可见的。
        if (width >= height) {

            for (int i = 0; i < mPercentMax; i++) {
                mCanvas.drawLine(getWidth() / 2, mPaddingTop,
                        getWidth() / 2, mPaddingTop + mScaleLength, mScaleLinePaint);
                mCanvas.rotate(rotate, getWidth() / 2, getHeight() / 2);
            }

        } else {

            for (int i = 0; i < mPercentMax; i++) {
                mCanvas.drawLine(mPaddingLeft, getHeight() / 2,
                        mPaddingLeft + mScaleLength, getHeight() / 2, mScaleLinePaint);
                mCanvas.rotate(rotate, getWidth() / 2, getHeight() / 2);
            }

        }

    }

其中 Canvas.rotate() 方法是旋转整个 canvas画布，而并不是旋转 画上去的线条。其中旋转的角度 rotate 根据圆周 360度以及要显示多少个刻度进行计算，float rotate = 360f / mPercentMax;。
需要注意的一点是，在画进度条的时候，View 的 height 大于 width，需要先将整个 canvas 旋转 90度。

 private void drawProgressCircle() {
        int width = getWidth();
        int height = getHeight();
        float rotate = 360f / mPercentMax;

        mCanvas.save();

        //画进度刻度
        if (width >= height) {

            for (int i = 0; i < mPercent; i++) {
                mCanvas.drawLine(getWidth() / 2, mPaddingTop,
                        getWidth() / 2, mPaddingTop + mScaleLength, mProgressLinePaint);
                mCanvas.rotate(rotate, getWidth() / 2, getHeight() / 2);
            }
        } else {
        	//旋转 90度
            mCanvas.rotate(90f, getWidth() / 2, getHeight() / 2);
            for (int i = 0; i < mPercent; i++) {
                mCanvas.drawLine(mPaddingLeft, getHeight() / 2,
                        mPaddingLeft + mScaleLength, getHeight() / 2, mProgressLinePaint);
                mCanvas.rotate(rotate, getWidth() / 2, getHeight() / 2);
            }
        }

        mCanvas.restore();
    }

View中的几个常用的生命周期

1、construct ：构造函数
2、onFinishInflate() : 该方法当View及其子View从XML文件中加载完成后会被调用。
3、onMeaure() : 该方法在计算当前View及其所有子View尺寸大小需求时会被调用。
4、onLayout() : 该方法在当前View需要为其子View分配尺寸和位置时会被调用。
5、onSizeChange() : 该方法在当前View尺寸变化时被调用。
6、onDraw() : 该方法在当前View需要呈现其内容时被调用。

总结

例子比较简单，主要是不断的看代码写代码，查找自己的不足。
demo地址在：
https://github.com/qinhaihang/DynamicCircleDemo

参考的文章：
https://github.com/chenzongwen/MiClockView
https://www.jianshu.com/p/08e6dab7886e