自定义控件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

你可能感兴趣的:(自定义控件ProgressBar)