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


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

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

芝麻开门



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

Android笔记之自定义View——绘制圆环比例展示图

前言:           本人菜鸟程序员一枚,大学本是电子专业,也是学渣一枚。从两年前来到到上海,阴差阳错,从事起了android开发工作,从零开始自学从学习java到android已两年有余。受...
  • zsp765098084
  • zsp765098084
  • 2016年10月27日 11:30
  • 2905

Android 自定义view --圆形百分比(进度条)

起因 最近公司项目有需求需要用到轻量级图表如下图,是一些简单的扇形图,圆形图,折线图,虽然有好用的三方库MPChart([MPChart使用教程](http://blog.csdn.net/wi...
  • wingichoy
  • wingichoy
  • 2015年12月16日 23:33
  • 9142

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

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

Android自定义View-动态的文字闪动效果demo

  • 2016年08月22日 21:54
  • 23.2MB
  • 下载

Android自定义View 圆形刻度罗盘 仪表盘 指针动态改变

  • 2017年12月28日 09:13
  • 24.97MB
  • 下载

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

android 自定义view 之 动态音频图 (二)
  • cxt528440900
  • cxt528440900
  • 2016年11月11日 11:54
  • 408

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

android分区域点击的圆饼图(区域个数比例根据数据源改变)
  • qq_31167327
  • qq_31167327
  • 2016年11月16日 14:32
  • 215

Android 自定义 HorizontalScrollView 打造超强 Gallery效果 完整实例源码

  • 2014年07月26日 16:22
  • 5.5MB
  • 下载

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

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

Android 环信IM即时通讯 自定义扩展消息 注意点

android 自定义扩展消息 1.创建自定义扩展消息字段: 2.创建自定义扩展消息实例:(并创建get/set) 3.那么接下来我们需要...
  • zpf13142li
  • zpf13142li
  • 2017年10月26日 10:34
  • 39
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 超强动态环信比列图 (自定义View)
举报原因:
原因补充:

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