Android 超强动态环信比列图 (自定义View)

原创 2015年11月18日 17:39:37

这篇博客主要是介绍通过自定义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;
    }


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

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

芝麻开门



版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

自定义View控件之特殊的饼形图(环形图)

单位项目要实现如下图这种环形图或是说特殊的饼形图,在网上找了半天,没有发现开源的,没法子,只能硬着头皮自己写一个了。最近也在学习自定义view。正好拿这个来进行练习一下。        先分析一下功...

判断listview的滚动状态及在滚动中item显示位置的方法

在写listview的下拉刷新和上拉加载时,会遇到如下问题: 怎样判断listview滑动到了顶部或是底部? 下拉刷新时,一般只有当第一个item完全可见时,才处理下拉的逻辑,而上拉加载则处理方式...
  • H_W_G_T
  • H_W_G_T
  • 2016年04月22日 21:35
  • 3649

android 自定义view 之 动态音频图 (二)

android 自定义view 之 动态音频图 (二)

android自定义view分区域点击的圆饼图(区域个数比例根据数据源动态改变)

android分区域点击的圆饼图(区域个数比例根据数据源改变)

Android 环信扩展消息(自定义消息)

之前集成即时通讯(环信)的时候,需要用到自定义消息的功能。而在开发过程中遇到了许多的问题,之前工作比较忙,现在有时间了记录一下。 首先,在聊天界面添加一个发送扩展消息的MenuItem: 在ChatF...

一个Android自定义View_折线统计图

  • 2016年05月31日 13:24
  • 22MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 超强动态环信比列图 (自定义View)
举报原因:
原因补充:

(最多只允许输入30个字)