首页 文章 精选 留言 我的

Android 进阶自定义View（5）图表统计PieChartView圆饼图的实现

2018-08-11 720

今天讲图表统计中比较常用的一个，像支付宝的月账单啥的，都是用圆饼图来做数据统计的，先看一下我最终实现的效果图：


img_8f754f5a153c8522f1cd39807ed2507d.png
image.png

该效果实际上是两个实心圆叠加后的效果。


img_7dee33498c6a5e201b5ea1826bbc88e2.png
image.png
img_c681ec9c84b2ba4e491f3ee3c8fdce1c.png
image.png
《一》View实现思路分析：

（1）根据占比集合数据，计算所需绘制的角度，动态设置画笔颜色，drawArc()绘制外圆弧
（2）drawCircle()绘制内圆
（3）确定每块圆饼的小白点的位置
（4）绘制白点的沿线和占比文字

《二》具体实现：

（1）绘制不同颜色的圆饼

   for (int i = 0; i < mRateList.size(); i++) {
            mPaint.setStyle(Paint.Style.FILL);
            mPaint.setColor(mColorList.get(i));
//            Log.e("TAG", "startAngle=" + startAngle + "--sweepAngle=" + ((int) (mRateList.get(i) * (360)) - offset));
            canvas.drawArc(rectF, startAngle, (int) (mRateList.get(i) * (360)) , true, mPaint);
            startAngle = startAngle + (int) (mRateList.get(i) * 360);
   }

(2)绘制内圆

  mPaint.setColor(ContextCompat.getColor(mContext, R.color.color_081638));
  canvas.drawCircle(radius + centerPointRadius + (xOffset + yOffset + textRect.width()), radius + centerPointRadius + (xOffset + yOffset + textRect.height()), radius / 1.5f, mPaint);

(3)确定每块圆饼的小白点的位置，通过每段圆饼的起始角度确定该段圆弧的中心点位置。

 private void dealPoint(RectF rectF, float startAngle, float endAngle, List<Point> pointList) {
        Path path = new Path();
        //通过Path类画一个90度（180—270）的内切圆弧路径
        path.addArc(rectF, startAngle, endAngle);

        PathMeasure measure = new PathMeasure(path, false);
//        Log.e("路径的测量长度:", "" + measure.getLength());

        float[] coords = new float[]{0f, 0f};
        //利用PathMeasure分别测量出各个点的坐标值coords
        int divisor = 1;
        measure.getPosTan(measure.getLength() / divisor, coords, null);
//        Log.e("coords:", "x轴:" + coords[0] + " -- y轴:" + coords[1]);
        float x = coords[0];
        float y = coords[1];
        Point point = new Point(Math.round(x), Math.round(y));
        pointList.add(point);
    }

（4）绘制以白点为起点的折线和占比文字。有个细节需要注意一下，绘制折线和比例文字时，每部分沿线和文字的绘制规则不一样，我是按下面的规则处理的：将圆分为四部分，每块区分显示。


img_8c7ddb8ca078f1b3dc40e73d1e839ed9.png
image.png 
  //折线横向长度
    private int xOffset;
    //折线偏Y方向长度
    private int yOffset;
    private void dealRateText(Canvas canvas, Point point, int position, List<Point> pointList) {
        if (position == 0) {
            lastPoint = pointList.get(0);
        } else {
            lastPoint = pointList.get(position - 1);
        }
        float[] floats = new float[8];
        floats[0] = point.x;
        floats[1] = point.y;
        //右半圆
        if (point.x >= radius + centerPointRadius + (xOffset + yOffset + textRect.width())) {
            mPaint.setTextAlign(Paint.Align.LEFT);
            floats[6] = point.x + xOffset;      
            if (point.y <= radius + centerPointRadius + (xOffset + yOffset + textRect.height())) {
                //右上角
                floats[2] = point.x + yOffset;
                floats[3] = point.y - yOffset;
                floats[4] = point.x + yOffset;
                floats[5] = point.y - yOffset;
                floats[7] = point.y - yOffset;
            } else {
                //右下角
                floats[2] = point.x + yOffset;
                floats[3] = point.y + yOffset;
                floats[4] = point.x + yOffset;
                floats[5] = point.y + yOffset;
                floats[7] = point.y + yOffset;
            }
            //左半圆
        } else {
            mPaint.setTextAlign(Paint.Align.RIGHT);
            floats[6] = point.x - xOffset;
            //防止相邻的圆饼绘制的文字重叠显示
            if (point.y <= radius + centerPointRadius) {
                //左上角
                floats[2] = point.x - yOffset;
                floats[3] = point.y - yOffset;
                floats[4] = point.x - yOffset;
                floats[5] = point.y - yOffset;
                floats[7] = point.y - yOffset;
            } else {
                //左下角
                floats[2] = point.x - yOffset;
                floats[3] = point.y + yOffset;
                floats[4] = point.x - yOffset;
                floats[5] = point.y + yOffset;
                floats[7] = point.y + yOffset;
            }
        }
        //根据每块的颜色，绘制对应颜色的折线
//        mPaint.setColor(mRes.getColor(colorList.get(position)));
        mPaint.setColor(ContextCompat.getColor(mContext, R.color.color_b69b4f));
        //画圆饼图每块边上的折线
        canvas.drawLines(floats, mPaint);
        mPaint.setStyle(Paint.Style.STROKE);
        //绘制显示的文字,需要根据类型显示不同的文字
        if (mRateList.size() > 0) {
            //Y轴：+ textRect.height() / 2 ,相对沿线居中显示
            canvas.drawText(getFormatPercentRate(mRateList.get(position) * 100) + "%", floats[6], floats[7] + textRect.height() / 2, mPaint);
        }
    }

完整代码：

package com.example.jojo.learn.customview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.graphics.Point;
import android.graphics.Rect;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.View;

import com.example.jojo.learn.R;
import com.example.jojo.learn.utils.DP2PX;

import java.text.DecimalFormat;
import java.util.ArrayList;
import java.util.List;

/**
 * Created by JoJo on 2018/8/6.
 * wechat:18510829974
 * description: 饼状图
 */

public class PieView extends View {
    private Context mContext;
    private Paint mPaint;
    //每块占比的绘制的颜色
    private List<Integer> mColorList = new ArrayList<>();
    //圆弧占比的集合
    private List<Float> mRateList = new ArrayList<>();
    //是否展示文字
    private boolean isShowRateText;
    //圆弧半径
    private float radius;
    private int startAngle = 0;
    //不同色块之间是否需要空隙offset
    private int offset = 0;
    //圆弧中心点小圆点的圆心半径
    private int centerPointRadius;
    private float showRateSize;
    private Rect textRect;
    //折线横向长度
    private int xOffset;
    //折线偏Y方向长度
    private int yOffset;
    private float mChangeAngle;
    private boolean isAnimation;
    private int sign = 0;

    public PieView(Context context) {
        this(context, null);
    }

    public PieView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PieView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext = context;

        init();

        initData();
    }

    private void initData() {

        float[] rate = {30f, 40f, 15f, 15f};
        int[] colors = {Color.RED, Color.BLUE, Color.YELLOW, Color.GRAY};
        for (int i = 0; i < rate.length; i++) {
            mRateList.add(rate[i] / 100);
            mColorList.add(colors[i]);
        }

        textRect = new Rect();
        if (mRateList.size() > 0) {
            mPaint.getTextBounds((mRateList.get(0) + "%"), 0, (mRateList.get(0) + "%").length(), textRect);
        }
    }

    private void init() {
        radius = DP2PX.dip2px(mContext, 80);
        centerPointRadius = DP2PX.dip2px(mContext, 2);
        xOffset = DP2PX.dip2px(mContext, 20);
        yOffset = DP2PX.dip2px(mContext, 5);
        showRateSize = DP2PX.dip2px(mContext, 10);

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setTextSize(showRateSize);

        if (mRateList.size() > 0) {
            textRect = new Rect();
            mPaint.getTextBounds((mRateList.get(0) + "%"), 0, (mRateList.get(0) + "%").length(), textRect);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        if (heightMode == MeasureSpec.AT_MOST) {
            //边沿线和文字所占的长度：(xOffset + yOffset + textRect.width())
            heightSize = (int) (radius * 2) + 2 * centerPointRadius + getPaddingLeft() + getPaddingRight() + (xOffset + yOffset + textRect.height()) * 2;
        }
        if (widthMode == MeasureSpec.AT_MOST) {

            widthSize = (int) (radius * 2) + 2 * centerPointRadius + getPaddingLeft() + getPaddingRight() + (xOffset + yOffset + textRect.width()) * 2;
        }
        //保存测量结果
        setMeasuredDimension(widthSize, heightSize);
    }

    private int paintPosition;

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //(1)绘制圆饼
        RectF rectF = new RectF(0 + centerPointRadius + (xOffset + yOffset + textRect.width()), 0 + centerPointRadius + (xOffset + yOffset + textRect.height()), 2 * radius + centerPointRadius + (xOffset + yOffset + textRect.width()), 2 * radius + centerPointRadius + (xOffset + yOffset + textRect.height()));
        List<Point> mPointList = new ArrayList<>();

        for (int i = 0; i < mRateList.size(); i++) {
            mPaint.setStyle(Paint.Style.FILL);
            mPaint.setColor(mColorList.get(i));
//            Log.e("TAG", "startAngle=" + startAngle + "--sweepAngle=" + ((int) (mRateList.get(i) * (360)) - offset));
            canvas.drawArc(rectF, startAngle, (int) (mRateList.get(i) * (360)) - offset, true, mPaint);

            //(2)处理每块圆饼弧的中心点，绘制折线，显示对应的文字
            if (isShowRateText) {
                dealPoint(rectF, startAngle, (mRateList.get(i) * 360 - offset) / 2, mPointList);
                Point point = mPointList.get(i);
                mPaint.setColor(Color.WHITE);//点的绘制的颜色
                canvas.drawCircle(point.x, point.y, centerPointRadius, mPaint);
                dealRateText(canvas, point, i, mPointList);
            }
            startAngle = startAngle + (int) (mRateList.get(i) * 360);
        }
        //(3)绘制内部中空的圆
        mPaint.setColor(ContextCompat.getColor(mContext, R.color.color_081638));
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(radius + centerPointRadius + (xOffset + yOffset + textRect.width()), radius + centerPointRadius + (xOffset + yOffset + textRect.height()), radius / 1.5f, mPaint);

    }

    private Point lastPoint;

    private void dealRateText(Canvas canvas, Point point, int position, List<Point> pointList) {
        if (position == 0) {
            lastPoint = pointList.get(0);
        } else {
            lastPoint = pointList.get(position - 1);
        }
        float[] floats = new float[8];
        floats[0] = point.x;
        floats[1] = point.y;
        //右半圆
        if (point.x >= radius + centerPointRadius + (xOffset + yOffset + textRect.width())) {
            mPaint.setTextAlign(Paint.Align.LEFT);
            floats[6] = point.x + xOffset;
            //防止相邻的圆饼绘制的文字重叠显示
//            if (lastPoint != null) {
//                int absX = Math.abs(point.x - lastPoint.x);
//                int absY = Math.abs(point.y - lastPoint.y);
//                if (absX > 0 && absX < 20 && absY > 0 && absY < 20) {
//                    floats[6] = point.x + xOffset - textRect.width() / 2;
//                    Log.e("TAG", "右半圆");
//                } else {
//                    floats[6] = point.x + xOffset;
//                }
//            } else {
//                floats[6] = point.x + xOffset;
//            }
            if (point.y <= radius + centerPointRadius + (xOffset + yOffset + textRect.height())) {
                //右上角
                floats[2] = point.x + yOffset;
                floats[3] = point.y - yOffset;
                floats[4] = point.x + yOffset;
                floats[5] = point.y - yOffset;
                floats[7] = point.y - yOffset;
            } else {
                //右下角
                floats[2] = point.x + yOffset;
                floats[3] = point.y + yOffset;
                floats[4] = point.x + yOffset;
                floats[5] = point.y + yOffset;
                floats[7] = point.y + yOffset;
            }
            //左半圆
        } else {
            mPaint.setTextAlign(Paint.Align.RIGHT);
            floats[6] = point.x - xOffset;
            //防止相邻的圆饼绘制的文字重叠显示
//            if (lastPoint != null) {
//                int absX = Math.abs(point.x - lastPoint.x);
//                int absY = Math.abs(point.y - lastPoint.y);
//                if (absX > 0 && absX < 20 && absY > 0 && absY < 20) {
//                    floats[6] = point.x - xOffset - textRect.width() / 2;
//                    Log.e("TAG", "左半圆");
//                } else {
//                    floats[6] = point.x - xOffset;
//                }
//            } else {
//                floats[6] = point.x - xOffset;
//            }
            if (point.y <= radius + centerPointRadius) {
                //左上角
                floats[2] = point.x - yOffset;
                floats[3] = point.y - yOffset;
                floats[4] = point.x - yOffset;
                floats[5] = point.y - yOffset;
                floats[7] = point.y - yOffset;
            } else {
                //左下角
                floats[2] = point.x - yOffset;
                floats[3] = point.y + yOffset;
                floats[4] = point.x - yOffset;
                floats[5] = point.y + yOffset;
                floats[7] = point.y + yOffset;
            }
        }
        //根据每块的颜色，绘制对应颜色的折线
//        mPaint.setColor(mRes.getColor(colorList.get(position)));
        mPaint.setColor(ContextCompat.getColor(mContext, R.color.color_b69b4f));
        //画圆饼图每块边上的折线
        canvas.drawLines(floats, mPaint);
        mPaint.setStyle(Paint.Style.STROKE);
        //绘制显示的文字,需要根据类型显示不同的文字
        if (mRateList.size() > 0) {
            //Y轴：+ textRect.height() / 2 ,相对沿线居中显示
            canvas.drawText(getFormatPercentRate(mRateList.get(position) * 100) + "%", floats[6], floats[7] + textRect.height() / 2, mPaint);
        }
    }

    private void dealPoint(RectF rectF, float startAngle, float endAngle, List<Point> pointList) {
        Path path = new Path();
        //通过Path类画一个90度（180—270）的内切圆弧路径
        path.addArc(rectF, startAngle, endAngle);

        PathMeasure measure = new PathMeasure(path, false);
//        Log.e("路径的测量长度:", "" + measure.getLength());

        float[] coords = new float[]{0f, 0f};
        //利用PathMeasure分别测量出各个点的坐标值coords
        int divisor = 1;
        measure.getPosTan(measure.getLength() / divisor, coords, null);
//        Log.e("coords:", "x轴:" + coords[0] + " -- y轴:" + coords[1]);
        float x = coords[0];
        float y = coords[1];
        Point point = new Point(Math.round(x), Math.round(y));
        pointList.add(point);
    }

    public void updateDate(List<Float> rateList, List<Integer> colorList, boolean isShowRateText) {
        this.isShowRateText = isShowRateText;
        this.mRateList = rateList;
        this.mColorList = colorList;
        init();
        invalidate();
    }

    /**
     * 获取格式化的保留两位数的数
     */
    public String getFormatPercentRate(float dataValue) {
        DecimalFormat decimalFormat = new DecimalFormat(".00");//构造方法的字符格式这里如果小数不足2位,会以0补足.
        return decimalFormat.format(dataValue);
    }


}
上一篇 下一篇
优秀的个人博客,低调大师

微信关注我们

原文链接：https://yq.aliyun.com/articles/638335

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Android中的设计模式之原型模式

参考 《设计模式：可复用面向对象软件的基础 》3.4 prototype 原型--对象创建型模式 《Android源码设计模式解析与实战》第4章 使程序运行更高效 原型模式 意图 用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象 使用场景 类初始化需要消化非常多的资源，这个资源包括数据，硬件资源等，通过原型拷贝避免这些消耗。 通过new产生一个对象需要非常繁琐的数据准备和访问权限，这时可以使用原型模式。 一个对象需要提供给其它调用者访问，而且各个调用者可能都需要修改其值时，可以考虑用原型模式拷贝多个对象共调用者使用，即保护性拷贝。 注意，通过实现cloneAble接口的原型模式在调用colone()方法构造实例是并不一定比new操作速度快，只有当通过new构造对象较为耗时或者成本较高时，通过clone()方法才能够获得效率上的提高。所以，在使用cloneAble时需要考虑构造对象的成本以及做一些效率上的测试。 结构 Client : 客户，使用者 protocolType： 抽象类或者接口，声明具有clone能力 ConcretePrototype: 具体的原型实现类。 ...
2018-08-10
540
上一篇

推荐一款优雅的日历控件

原文链接：https://mp.weixin.qq.com/s/SmxDiWIidHS2hwVvFcz_hw 项目需要用到日历控件，这是我们的效果图。 去github上搜了一哈，搜到大神写的CalendarView，各种炫酷效果，我这种的也只需要自定义效果就可以了，话不多说，直接开撸！ 这里附上github的链接地址：https://github.com/huanghaibin-dev/CalendarView， 里面的api文档说明还是很齐全的，这里就直接记录我的开发历程。 gradle 关联 implementation 'com.haibin:calendarview:3.4.0' 使用 刚开始布局中使用的话注意是 &lt;com.haibin.calendarview.CalendarView /&gt; 有包名路径的，如果直接是 &lt;CalendarView /&gt; 使用的是系统自带的日历控件。 &lt;com.haibin.calendarview.CalendarView android:layout_width="match_parent" android:la...
2018-08-11
592
下一篇

相关文章

发表评论

资源下载

更多资源
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

时间: 2026-04-11 大小: 211.28KB 下载: 56次
Rocky Linux

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

时间: 2026-04-12 大小: 1.42GB 下载: 4次
Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

时间: 2025-12-03 大小: 9.84MB 下载: 39次
WebStorm

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

时间: 2025-12-13 大小: 249.54MB 下载: 22次
手机查看

扫码在手机上查看文章

扫描二维码，手机阅读更方便

热门标签
DeepSeek Jdk25 OpenAi HarmonyOS6 Nacos3 SpringBoot4 SpringCloud Docker Kubernetes Service Mesh Redis Gemini3 Rocky

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册