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

 更新时间:2016年08月08日 15:24:44   投稿:daisy  
饼状图制作起来其实很简单,但是制作东西最重要的不是制作结果,而是制作思路。 相信小编贴上代码大家一看就立刻明白了,下面咱们来了解一下制作思路。

先来看看效果图

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

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

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

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

  其中颜色这一项可以用户指

 

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实现图片浏览并改变透明度

    这篇文章主要为大家详细介绍了Android实现图片浏览并改变透明度,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • Android更多条目收缩展开控件ExpandView的示例代码

    Android更多条目收缩展开控件ExpandView的示例代码

    本篇文章主要介绍了Android更多条目收缩展开控件ExpandView的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Android编程实现GPS位置获取的方法

    Android编程实现GPS位置获取的方法

    这篇文章主要介绍了Android编程实现GPS位置获取的方法,结合具体实例形式分析了Android针对GPS定位的常见操作技巧,需要的朋友可以参考下
    2017-07-07
  • Android中Parcel用法详解

    Android中Parcel用法详解

    这篇文章主要介绍了Android中Parcel用法,结合实例形式较为详细的分析了Parcel数据容器的原理与使用方法,需要的朋友可以参考下
    2016-06-06
  • Android neon 优化实践示例

    Android neon 优化实践示例

    这篇文章主要为大家介绍了Android neon 优化实践示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Android 拍照后返回缩略图的两种方法介绍

    Android 拍照后返回缩略图的两种方法介绍

    大家好,本篇文章主要讲的是Android 拍照后返回缩略图的两种方法介绍,感兴趣的同学赶快来看一看吧,对你有帮助的话记得收藏一下
    2022-01-01
  • Android OpenGLES2.0绘制三角形(二)

    Android OpenGLES2.0绘制三角形(二)

    这篇文章主要为大家详细介绍了Android OpenGLES2.0绘制三角形的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Android使用DrawerLayout仿QQ6.6版侧滑效果

    Android使用DrawerLayout仿QQ6.6版侧滑效果

    这篇文章主要为大家详细介绍了Android使用DrawerLayout仿QQ6.6版侧滑效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • 3种Android隐藏顶部状态栏及标题栏的方法

    3种Android隐藏顶部状态栏及标题栏的方法

    这篇文章主要为大家详细介绍了3种Android隐藏顶部状态栏及标题栏的方法,还涉及一种隐藏Android 4.0平板底部状态栏的方法,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 悬浮对话框Android代码实现

    悬浮对话框Android代码实现

    这篇文章主要为大家详细介绍了悬浮对话框Android代码实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08

最新评论