Android 超强动态环信比列图 （自定义View）

这篇博客主要是介绍通过自定义view实现一个动态环信比列图

博客只介绍核心代码，博客最后会给一个源码下载地址

话不多说直接上代码，代码是最好的老师（卧槽，说的我自己都被自己征服了）

小小提醒一下，如果对自定义view不是很熟悉的小伙伴，建议去看鸿洋大神自定义view系列博客

哎，好人做到底，鸿洋大神博客地址 鸿洋大婶子-自定义

这回真的上干货了

首先是自定义属性的文件在attrs.xml文件中定义

<declare-styleable name="RingView">        <!--环形比例图的尺寸-->        <attr name="ringSize" format="dimension" />        <!--环形的宽度-->        <attr name="strokeWidth" format="dimension" />        <!--环形的对齐方式-->        <attr name="align" format="enum">            <enum name="center" value="0" />            <enum name="left" value="1" />            <enum name="right" value="2" />            <enum name="center_horizontal" value="3" />            <enum name="center_vertical" value="4" />        </attr>    </declare-styleable>

接着来看RingView类的核心代码实现

/**     * 初始化绘制区域     */    private void initRect() {        // 得到绘制的矩形区域        // 内圆环 默认值 其实就是左对齐的值        float left = getPaddingLeft() + strokeWidth,                top = getPaddingTop() + strokeWidth,                right = getPaddingLeft() + rSize - strokeWidth,                bottom = getPaddingTop() + rSize - strokeWidth;        switch (align) {            case TYPE_ALIGN_CENTER: // 居中                left = width / 2 - rSize / 2 + strokeWidth;                right = left + (rSize / 2 - strokeWidth) * 2;                top = height / 2 - rSize / 2 + strokeWidth;                bottom = top + (rSize / 2 - strokeWidth) * 2;                break;            case TYPE_ALIGN_LEFT: // 左对齐                break;            case TYPE_ALIGN_RIGHT: // 右对齐                right = width - getPaddingRight() - strokeWidth;                left = right - (rSize / 2 - strokeWidth) * 2;                break;            case TYPE_ALIGN_CENTER_HORIZONTAL: // 水平居中                left = width / 2 - rSize / 2 + strokeWidth;                right = left + (rSize / 2 - strokeWidth) * 2;                break;            case TYPE_ALIGN_CENTER_VERTICAL: // 垂直居中                top = height / 2 - rSize / 2 + strokeWidth;                bottom = top + (rSize / 2 - strokeWidth) * 2;                break;        }        rectF = new RectF(left, top, right, bottom);    }

关于计算 通过一张图解释

下面介绍绘制 （绘制非常简单）在 onDraw 里面

if (flag) {            for (int i = 0; i < values.length; i++) {                paint.setColor(colors[i]);                canvas.drawArc(rectF, dynamicStartAngle[i], dynamicSweepAngle[i], false, paint);            }        }

下面介绍关于动态计算角度 （核心的核心）

首先要初始化每一部分的角度

/**     * 初始化扫过角度     *     * @param sweepAngle 角度     */    private void initSweepAngle(float[] sweepAngle) {        int total = 0;        for (int value : values) {            total += value;        }        for (int i = 0; i < values.length; i++) {            sweepAngle[i] = values[i] * 1.0f / total * 360;        }    }

其次要进行绘制

@Override    public void run() {        float currentTotalAngle = 0f;        while (currentTotalAngle < 360f) {            currentTotalAngle = 0f;            // 计算每一次绘制的每一个比例的起始角度            for (int i = 0; i < dynamicStartAngle.length; i++) {                if (i == 0) // 第一次绘制所有比例的其实角度都为0                    dynamicStartAngle[i] = 0f;                else // 以后每次绘制的启示角度等于上一次的起始角度+上一次绘制的角度                    dynamicStartAngle[i] = dynamicStartAngle[i - 1] + dynamicSweepAngle[i - 1];            }            // 计算每次绘制的角度            for (int i = 0; i < dynamicSweepAngle.length; i++) {                currentTotalAngle += dynamicSweepAngle[i];                if (dynamicSweepAngle[i] < sweepAngle[i]) {                    dynamicSweepAngle[i] += 2f;                    // 如果超过的分配值 则直接赋值为分配值                    dynamicSweepAngle[i] = dynamicSweepAngle[i] >= sweepAngle[i] ? sweepAngle[i] : dynamicSweepAngle[i];                }            }            postInvalidate();            try {                Thread.sleep(66);            } catch (InterruptedException e) {                e.printStackTrace();            }        }        // 绘制完成        flag = false;    }

好了到这里基本上都介绍完了

其他代码请下载源代码查看 （良心博主，不要积分，放心点击下载链接）

芝麻开门