Android自定义View实现饼图

已于 2022-12-28 22:51:36 修改
阅读量457 收藏 5
点赞数
CC 4.0 BY-SA版权
分类专栏： Android代码块总结 文章标签： android
于 2022-12-28 17:51:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41008818/article/details/128472059
最终效果

在这里插入图片描述

代码实现
package com.soface.chartdemo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

import java.util.ArrayList;
import java.util.List;

public class PieChartView extends View {

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

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

    public PieChartView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        colors=new ArrayList<>();
        colors.add("#FF5722");
        colors.add("#FF9800");
        colors.add("#00BCD4");
        colors.add("#03A9F4");
        colors.add("#FFC107");
        colors.add("#2196F3");
        colors.add("#CDDC39");
        colors.add("#3F51B5");
        colors.add("#8BC34A");
        colors.add("#673AB7");
        colors.add("#9C27B0");
        colors.add("#8BC34A");
        colors.add("#F44336");
        colors.add("#009688");
        colors.add("#B1B1B1");

    }

    private int widthMode;
    private int heightMode;
    private int widthSize;
    private int heightSize;
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        widthSize=MeasureSpec.getSize(widthMeasureSpec);
        heightSize=MeasureSpec.getSize(heightMeasureSpec);
        widthMode=MeasureSpec.getMode(widthMeasureSpec);
        heightMode=MeasureSpec.getMode(heightMeasureSpec);

        CENTER_X=widthSize/2f;
        CENTER_Y=heightSize/2f;
        if (widthSize>=heightSize){
            RADIUS=heightSize/2f-80;
        }else {
            RADIUS=widthSize/2f-80;
        }

        initPaint();
    }

    private Paint piePaint;

    private Paint linePaint;

    private Paint textPaint;

    private Paint titlePaint;

    private RectF mRectF; //饼图矩阵

    private float CENTER_X = 0; //中心点横坐标
    private float CENTER_Y = 0; //中心点纵坐标
    private float RADIUS = 0; //圆半径
    private List<String> colors;//饼图的颜色列表
    private List<String> items;//饼图功能项
    private List<Integer> dataList;//数据列表
    private String unit="";//数据单位
    private float step=0;//进率步距，360的角度怎么分配给数据
    private String titleStr="";

    private void initPaint() {
        piePaint =new Paint();
        piePaint.setStrokeWidth(4);
        piePaint.setAntiAlias(true);//抗锯齿功能

        linePaint =new Paint();
        linePaint.setStrokeWidth(2);
        linePaint.setColor(Color.parseColor("#858585"));
        linePaint.setAntiAlias(true);//抗锯齿功能
        /*PathEffect effects = new DashPathEffect(new float[]{5, 10}, 0);//设置绘制虚线
        linePaint.setPathEffect(effects);*/

        textPaint =new Paint();
        textPaint.setColor(Color.parseColor("#858585"));
        textPaint.setAntiAlias(true);//抗锯齿功能
        textPaint.setTextSize(30);

        titlePaint =new Paint();
        titlePaint.setColor(Color.parseColor("#858585"));
        titlePaint.setAntiAlias(true);//抗锯齿功能
        titlePaint.setTextSize(30);

    }


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

        if (items==null || items.size()==0)return;
        if (dataList==null || dataList.size()==0)return;
        if (colors==null || colors.size()==0)return;
        if (items.size() != dataList.size())return;//要求 功能项长度 等于 数据项长度

        float dataSum=0;
        for (int k=0;k<dataList.size();k++){
            dataSum=dataList.get(k)+dataSum;
        }
        step=360/dataSum;

        float startAngle=0;//开始绘制的角度
        for (int k=0;k<dataList.size();k++){

            if (k<colors.size()){
                //按照顺序取颜色
                piePaint.setColor(Color.parseColor(colors.get(k)));
            }else {
                //超出颜色列表的数据 取最后一种颜色
                piePaint.setColor(Color.parseColor(colors.get(colors.size()-1)));
            }

            float thisAngle=dataList.get(k)*step;//本次次循环需要绘制的角度

            if (k==dataList.size()-1){
                //最后一块饼图跳出
                //绘制扇形
                canvas.drawArc(CENTER_X - RADIUS+14, CENTER_Y - RADIUS-10, CENTER_X + RADIUS+14, CENTER_Y + RADIUS-10, startAngle, thisAngle, true, piePaint);
            }else {
                //绘制扇形
                canvas.drawArc(CENTER_X - RADIUS, CENTER_Y - RADIUS, CENTER_X + RADIUS, CENTER_Y + RADIUS, startAngle, thisAngle, true, piePaint);
            }

            float lineAngle = startAngle + thisAngle/2f; //获取线条的角度

            startAngle=thisAngle+startAngle;//叠加起步角度

            //分别求线条的横坐标起点、纵坐标起点、横坐标终点、纵坐标终点
            float lineStartX = CENTER_X + RADIUS * (float) Math.cos(lineAngle / 180 * Math.PI);
            float lineStartY = CENTER_Y + RADIUS * (float) Math.sin(lineAngle / 180 * Math.PI);
            float lineEndX = CENTER_X + (RADIUS + 20) * (float) Math.cos(lineAngle / 180 * Math.PI);
            float lineEndY = CENTER_Y + (RADIUS + 20) * (float) Math.sin(lineAngle / 180 * Math.PI);

            if (k==dataList.size()-1){
                //最后一条线跳出
                lineStartX += 14;
                lineStartY -= 10;
                lineEndX += 14;
                lineEndY -= 10;
            }
            canvas.drawLine(lineStartX, lineStartY, lineEndX, lineEndY, linePaint); //绘制指示线条

            if (lineEndX>CENTER_X){
                //在圆心右侧   向右延长
                canvas.drawLine(lineEndX, lineEndY, lineEndX+200, lineEndY, linePaint); //绘制延长线
                canvas.drawText(items.get(k)+": "+dataList.get(k)+"("+unit+")",lineEndX+200-100,lineEndY-10,textPaint);//绘制数据值
            }else {
                //在圆心左侧   向左延长
                canvas.drawLine(lineEndX, lineEndY, lineEndX-200, lineEndY, linePaint); //绘制延长线
                canvas.drawText(items.get(k)+": "+dataList.get(k)+"("+unit+")",lineEndX-200,lineEndY-10,textPaint);//绘制数据值
            }


        }

        //画中圆
        piePaint.setColor(Color.parseColor("#FFFFFF"));
        canvas.drawCircle(CENTER_X,CENTER_Y,RADIUS/2, piePaint);

        canvas.drawText(titleStr,CENTER_X-RADIUS/2+20,CENTER_Y+10,textPaint);//绘制数据值
    }

    /**
     * 设置数据
     * @param dataList
     */
    public synchronized void setData(List<Integer> dataList,String unit){
        this.dataList=dataList;
        this.unit=unit;
        postInvalidate();
    }

    /**
     * 设置对比模块项
     * @param items
     */
    public void setItemList(List<String> items){
        this.items=items;
        postInvalidate();
    }

    /**
     * 设置标题
     * @param titleStr
     */
    public void setTitle(String titleStr){
        this.titleStr=titleStr;
        postInvalidate();
    }

    /**
     * 设置标题大小
     * @param sizePx
     */
    public void setTitleSize(float sizePx){
        titlePaint.setTextSize(sizePx);
    }

}
使用方法

1.在XML中引用

<com.example.chartdemo.PieChartView
                android:id="@+id/pie_chart"
                android:background="#EFEFEF"
                android:layout_margin="20px"
                android:layout_width="match_parent"
                android:layout_height="600px" />
  1. 设置参数数据
List<Integer> pieChatDatas=new ArrayList<>();
        pieChatDatas.add(50);
        pieChatDatas.add(60);
        pieChatDatas.add(30);
        pieChatDatas.add(30);
        pieChatDatas.add(50);
        pieChatDatas.add(60);
        pieChatDatas.add(70);

        List<String> pieChatItems=new ArrayList<>();
        pieChatItems.add("大狗");
        pieChatItems.add("二狗");
        pieChatItems.add("张三");
        pieChatItems.add("李四");
        pieChatItems.add("王武");
        pieChatItems.add("老刘");
        pieChatItems.add("阿七");

        PieChartView pie_Chart=(PieChartView) findViewById(R.id.pie_chart);
        pie_Chart.setItemList(pieChatItems);
        pie_Chart.setData(pieChatDatas,"个");
        pie_Chart.setTitle("家中梨多少？");

		//==================下面是编辑数据实现动效==========================
		int forTag=-10;//该变量放全局
		int jiShu=pieChatDatas.get(0);
        int jiShuIndex=0;
        //循环请求
        Heartbeat.getInstance().start(50,new ActionCallback() {
            @Override
            public void toDo(Object object) {
                if (forTag<=30){

                    //模拟二次函数 对称轴是x = -b/(2a) =50
                    int bianLiang=-1*(forTag*forTag)+30*forTag;

                    pieChatDatas.set(jiShuIndex,jiShu+bianLiang);

                    pie_Chart.setData(pieChatDatas,"个");

                    Heartbeat.getInstance().reset(50);
                }
                forTag=forTag+1;
            }
        });

附上两个附属类（与图表实现无关）

package com.soface.chartdemo;

import android.os.Looper;
import android.os.Message;

/**
 * 心跳计时器
 */
public class Heartbeat {

    //事件标签
    public final int ACTION_TAG =0xFF;
    //要回调的接口
    private ActionCallback thisActionDo;

    //单例的基本操作
    private static Heartbeat myCountDownTimer;
    private Heartbeat() { }
    public static Heartbeat getInstance(){
        if (myCountDownTimer==null)myCountDownTimer=new Heartbeat();
        return myCountDownTimer;
    }

    //Handler事件监听器
    private android.os.Handler mHandler = new android.os.Handler(Looper.getMainLooper()){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what){
                case ACTION_TAG:
                    thisActionDo.toDo(null);
                    break;
            }

        }
    };

    //首次启动心跳（倒计时）
    public void start(int countDownTime,ActionCallback actionDo){
        thisActionDo=actionDo;
        reset(countDownTime);
    };

    //重置倒计时
    public void reset(int countDownTime){
        mHandler.removeMessages(ACTION_TAG);
        Message msg = mHandler.obtainMessage();
        msg.what = ACTION_TAG;
        mHandler.sendEmptyMessageDelayed(ACTION_TAG,countDownTime);
    }

}

package com.soface.chartdemo;

public interface ActionCallback {

    void toDo(Object o);

}
Android自定义饼状图
10-21
本自定义饼状图是参考相关CSDN相关博客完成，并修改了其中的部分错误和添加了相关的父类方法重写，完成饼状图的位置、大小的自适应测量，你可以自己指定半径和大小，也可以指定为适应父控件或填充父控件，只要调用饼状图对象的.addType("标题",颜色,本扇形代表的数量)即可完成扇形的添加显示。
Android自定义饼状图，支持点击弹出扇形
厚积薄发
06-30 5281
上一篇主要是记录了如何实现简单的折线图，支持点击弹出提示；这篇主要是实现另外一种图表–饼状图。 1 先上效果图2 分析第一看看到这个图，有过画扇形经验的同学会不屑，这个不简单吗？主要就是将所有的值相加，然后用每个值去除于总值，得到对于的一个扇形的角度，逐个画上去就好。这个说法大体是对的，但等到真正实施，还是有些小细节需要注意的。for (int i = 0; i < numbers.size();
Android数据可视化：实现折线图、柱状图与饼状图
最新发布
weixin_42514750的博客
06-20 759
折线图是数据可视化中最常用来展示数据随时间或顺序变化趋势的图表类型。它通过将数据点连接成线段，直观地表达了数据随时间的发展趋势或者类别间的变化情况。柱状图通过一系列水平或垂直的柱子展示不同类别数据的数量对比，使得各个类别的数据大小能够一目了然。饼状图是一种用来展示部分与整体关系的圆形图表，通过不同大小的扇形来表示各部分在总体中所占的比例。AChartEngine是一个功能强大的图表库，专门用于Android应用开发。
Android 自定义饼状图
weixin_30597269的博客
08-08 137
github 地址：https://github.com/dkest/PieView 简单分析 　　其实根据我们上面的知识已经能自己制作一个饼状图了。不过制作东西最重要的不是制作结果，而是制作思路。 相信我贴上代码大家一看就立刻明白了，非常简单的东西。不过嘛，咱们还是想了解一下制作思路： 先分析饼状图的构成，非常明显，饼状图就是一个又一个的扇形构成的，每个扇形都有不同的颜色，对应的有名字，数...
PorterDuffXfermode属性介绍
俊光的专栏
02-21 359
PorterDuffXfermode设置的是两个图层交集区域的显示方式，dst是先画的图形，src是后画的图形。 PorterDuff.Mode为枚举类,一共有16个枚举值:1.PorterDuff.Mode.CLEAR 所绘制不会提交到画布上。2.PorterDuff.Mode.SRC 显示上层绘制图片3.PorterDuff.Mode.DST 显示下层绘制图片4.Porte
Android自定义View——饼图
09-23
在Android开发中，自定义View是一项重要的技能，它允许开发者根据特定需求创建独特且功能丰富的UI组件。本篇文章将深入探讨如何在Android中实现一个自定义的饼图View，这通常用于显示数据的比例或者分布情况。 饼图...
android 饼图 饼图 饼图 自定义饼图
07-03
自定义饼图通常涉及到创建一个新的View类，继承自Android的View或ViewGroup。在这个自定义视图中，我们需要实现以下关键步骤： 1. **绘制基础图形**：饼图由多个扇形区域组成，因此我们需要用到`Canvas`的`drawArc...
安卓自定义View绘制饼图
05-11
综上所述，Android自定义View绘制饼图涉及多个关键步骤，包括数据处理、图形计算、Canvas操作以及交互设计。理解并掌握这些知识点，对于Android开发者来说，不仅可以提升应用的个性化程度，也有助于提升解决问题的...
android自定义饼图
05-05
总之，Android自定义饼图涉及了Android图形绘制、触摸事件处理和自定义视图的知识，是一个将数据可视化与交互设计相结合的实践案例。开发者可以通过这样的项目锻炼自己的Android编程技巧，同时也可以为自己的应用...
Android:自定义组件绘制饼状统计图
01-22
本资源为Android-自定义组件绘制饼状统计图的demo。对应博文：http://blog.csdn.net/books1958/article/details/42264599
MPchart 使用详解及详细属性（ 二）----pieChart(饼状图)
热门推荐
李彬博客专栏
06-28 2万+
项目源代码：https://github.com/libin7278/MpChart 第一步导入library 详细见MPchart使用详解及详细属性（一） http://blog.csdn.net/github_33304260/article/details/51272078 第二步pieChart源代码 import android.app.Activity;
Android 自定义控件之---饼图
lbj23vs6的博客
01-13 1836
文章目录前言一、创建PieChartView继承View类？二、创建一些对象，用于绘图三，onDraw方法1.循环把四个扇形画出来2.我们把第三个扇形抽出来，需要做特殊处理四，效果展示总结效果确实比较简单，但是这个例子可以很好的作为初学Android自定义控件的开发者的一个小练习。code 前言 如下图这样的一个饼图效果，看上去很简单，不如让我们用Android自定义控件的知识来实现它 一、创建PieChartView继承View类？ public class PieChartView extends
Android自定义饼状图效果
旧路
12-18 2380
Android自定义饼状图效果的实现。主要的功能有： 1. 饼状图分块显示，不同的颜色表示不同的快。 2. 饼状图每一块都有相应的文字介绍。 3. 饼状图旋转功能。 4. 饼状图里面每一块点击选中功能。
Android PieChart(饼形图)
彬sir哥的博客
04-23 889
demo代码地址下载：https://download.csdn.net/download/qq_35091074/17162961
Android 自定义控件之饼状图
u012894648的博客
04-16 267
核心代码 @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //获取设置总数 if (total == 0) for (int i = 0; i < pieCharts.size(); i++) { total += pieChart...
自定义 Android 饼状图控件 ACEPieWidget
JaDentenet的博客
09-20 145
在本文中，我们将介绍如何自定义一个名为 ACEPieWidget 的饼状图控件，并提供相应的源代码。在上述示例中，我们在 onCreate() 方法中找到了 ACEPieWidget 控件的引用，并创建了包含数据和颜色的列表。然后，根据每个数据值在总和中的比例，计算出每个扇形的起始角度和扫过的角度，并使用画笔对象 mPaint 在画布上绘制饼状图。如果您有任何问题或疑问，请随时提问！在您的 Activity 类中，您可以通过找到 ACEPieWidget 控件的引用，为其设置数据和颜色。
Android自定义饼图控件的实现方法
在Android开发中，自定义饼图是通过继承View类并重写onDraw方法来实现的。在本篇知识点中，将详细介绍如何在Android中自定义一个饼图控件，以及自定义控件的实现过程和关键步骤。 ### 知识点一：Android中的自定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

绝命三郎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值