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;
    }


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

其他代码请下载源代码查看 (良心博主,不要积分,放心点击下载链接)

芝麻开门



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值