当前位置: 首页 > 编程笔记 >

安卓(Android)开发之自定义饼状图

谢选
2023-03-14
本文向大家介绍安卓(Android)开发之自定义饼状图,包括了安卓(Android)开发之自定义饼状图的使用技巧和注意事项,需要的朋友参考一下

先来看看效果图

先分析饼状图的构成,非常明显,饼状图就是一个又一个的扇形构成的,每个扇形都有不同的颜色,对应的有名字,数据和百分比。

经以上信息可以得出饼状图的最基本数据应包括:名字 数据值 百分比 对应的角度 颜色。

  用户关心的数据 : 名字 数据值 百分比

  需要程序计算的数据: 百分比 对应的角度

  其中颜色这一项可以html" target="_blank">用户指

 

public class PieData {
 
  private String name;  // 名字
  private float value;  // 数值
  private float percentage; // 百分比
 
  private int color = 0;  // 颜色
  private float angle = 0; // 角度
 
  public PieData(@NonNull String name, @NonNull float value) {
   this.name = name;
   this.value = value;
  }
 }

自定义View:

先按照自定义View流程梳理一遍(确定各个步骤应该做的事情):

步骤 关键字  作用
1 构造函数 初始化(初始化画笔Paint)
2 onMeasure 测量View的大小(暂时不用关心)
3 onSizeChanged 确定View大小(记录当前View的宽高)
4 nLayout  确定子View布局(无子View,不关心)
5 onDraw  实际绘制内容(绘制饼状图)
6 提供接口 提供接口(提供设置数据的接口)

代码如下: 

 public class PieView extends View {
  // 颜色表
  private int[] mColors = {0xFFCCFF00, 0xFF6495ED, 0xFFE32636, 0xFF800000, 0xFF808000, 0xFFFF8C69, 0xFF808080,
    0xFFE6B800, 0xFF7CFC00};
  // 饼状图初始绘制角度
  private float mStartAngle = 0;
  // 数据
  private ArrayList<PieData> mData;
  // 宽高
  private int mWidth, mHeight;
  // 画笔
  private Paint mPaint = new Paint();
 
  public PieView(Context context) {
   this(context, null);
  }
 
  public PieView(Context context, AttributeSet attrs) {
   super(context, attrs);
   mPaint.setStyle(Paint.Style.FILL);
   mPaint.setAntiAlias(true);
  }
 
  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
   super.onSizeChanged(w, h, oldw, oldh);
   mWidth = w;
   mHeight = h;
  }
 
  @Override
  protected void onDraw(Canvas canvas) {
   super.onDraw(canvas);
   if (null == mData)
    return;
   float currentStartAngle = mStartAngle;     // 当前起始角度
   canvas.translate(mWidth / 2, mHeight / 2);    // 将画布坐标原点移动到中心位置
   float r = (float) (Math.min(mWidth, mHeight) / 2 * 0.8); // 饼状图半径
   RectF rect = new RectF(-r, -r, r, r);      // 饼状图绘制区域
 
   for (int i = 0; i < mData.size(); i++) {
    PieData pie = mData.get(i);
    mPaint.setColor(pie.getColor());
    canvas.drawArc(rect, currentStartAngle, pie.getAngle(), true, mPaint);
    currentStartAngle += pie.getAngle();
   }
 
  }
 
  // 设置起始角度
  public void setStartAngle(int mStartAngle) {
   this.mStartAngle = mStartAngle;
   invalidate(); // 刷新
  }
 
  // 设置数据
  public void setData(ArrayList<PieData> mData) {
   this.mData = mData;
   initDate(mData);
   invalidate(); // 刷新
  }
 
  // 初始化数据
  private void initDate(ArrayList<PieData> mData) {
   if (null == mData || mData.size() == 0) // 数据有问题 直接返回
    return;
 
   float sumValue = 0;
   for (int i = 0; i < mData.size(); i++) {
    PieData pie = mData.get(i);
 
    sumValue += pie.getValue();  //计算数值和
 
    int j = i % mColors.length;  //设置颜色
    pie.setColor(mColors[j]);
   }
 
   float sumAngle = 0;
   for (int i = 0; i < mData.size(); i++) {
    PieData pie = mData.get(i);
 
    float percentage = pie.getValue() / sumValue; // 百分比
    float angle = percentage * 360;     // 对应的角度
 
    pie.setPercentage(percentage);     // 记录百分比
    pie.setAngle(angle);       // 记录角度大小
    sumAngle += angle;
 
    Log.i("angle", "" + pie.getAngle());
   }
  }

注意:在更改了数据需要重绘界面时要调用invalidate()这个函数重新绘制。

以上就是小编为大家整理的安卓(Android)中自定义饼状图的制作思路,利用实例代码实现饼状图就很简单了,希望本文对大家开发安卓(Android)有所帮助。

 类似资料:
  • 本文向大家介绍Android自定义控件实现饼状图,包括了Android自定义控件实现饼状图的使用技巧和注意事项,需要的朋友参考一下 本文实现一个如图所示的控件,包括两部分,左边的饼状图和中间的两个小方块,及右边的两行文字 实现起来比较简单,只是一些绘图API的调用 核心代码在onDraw函数里边,对静态控件进行绘制即可 Canvas 绘制文本时,使用FontMetrics对象,计算位置的坐标。参考

  • 本文向大家介绍手把手教你用Android自定义饼状图,包括了手把手教你用Android自定义饼状图的使用技巧和注意事项,需要的朋友参考一下 照例先上效果图 通过该例子,你能学到什么:      对Paint 深入理解,画绘制饼图,矩形,文字等      加深对canvas的API的掌握,对自定义View掌握 下面我们分七步来完成一个简单的饼形图绘制过程。 1. 重新View的构造方法 2.绘制图形

  • 本文向大家介绍Android自定义View实现饼状图带动画效果,包括了Android自定义View实现饼状图带动画效果的使用技巧和注意事项,需要的朋友参考一下 一个简单的自定义view饼状图,加入了动画效果 先看一下效果 下面就直接上代码了 已经加入了详细的注释,同样的原理,还可以将动画加入到柱形图等等。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍安卓(Android)开发之分享带文字的图片,包括了安卓(Android)开发之分享带文字的图片的使用技巧和注意事项,需要的朋友参考一下 前言 想想我们常用的网易云音乐,允许我们把歌词连带着歌曲的图片拼在一起变成一张图,我们再把这张图片分享出去就好了。 那么,本篇的内容就是动手做一个带文字的图片。 这里也记录下上下文,因为做了一个失物招领的App,当有人上交了失物之后,可以将这个消息

  • 本文向大家介绍详解Android自定义View--自定义柱状图,包括了详解Android自定义View--自定义柱状图的使用技巧和注意事项,需要的朋友参考一下 绪论 转眼间,2016伴随着互联网寒冬和帝都的雾霾马上就过去了,不知道大家今年一整年过得怎么样?最近票圈被各个城市的雾霾刷屏,内心难免会动荡,庆幸自己早出来一年,也担忧着自己的未来的职业规划。无所谓了,既然选择了这个行业,我觉得大家就应该坚

  • 本文向大家介绍Android开发之自定义刮刮卡实现代码,包括了Android开发之自定义刮刮卡实现代码的使用技巧和注意事项,需要的朋友参考一下 关于刮刮卡的实现效果不需要做太多解释,特别是在电商APP中,每当做活动的时候都会有它的身影存在,趁着美好周末,来实现下这个效果,也算是对零碎知识点的一个整合。 所涉及的知识点: 1、自定义View的一些流程 2、双缓冲绘图机制 3、Paint的绘图模式