时间:2021-05-19
先来看看效果图
先分析饼状图的构成,非常明显,饼状图就是一个又一个的扇形构成的,每个扇形都有不同的颜色,对应的有名字,数据和百分比。
经以上信息可以得出饼状图的最基本数据应包括:名字 数据值 百分比 对应的角度 颜色。
用户关心的数据 : 名字 数据值 百分比
需要程序计算的数据:百分比 对应的角度
其中颜色这一项可以用户指
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)有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文讲述了Android使用自定义View实现饼状图的实例代码。分享给大家供大家参考,具体如下:1.效果图2.代码实现publicclassPieChartVi
前言:前面几篇讲了自定义控件绘制原理Android自定义控件基本原理详解(一),Android自定义控件之自定义属性(二),Android自定义控件之自定义组合
Android之Canvas自定义画一个时钟,供大家参考,具体内容如下自定义控件,在安卓是也是一种无所不能的技术了,所有自带控件,以及组合自带控件不能实现的一些
一个简单的自定义view饼状图,加入了动画效果先看一下效果下面就直接上代码了publicclassYidong2extendsAppCompatActivity
我们在安卓开发中安卓自带的控件满足不了我们的需求,因此我们就需要用到自定义View来满足我们的需求,在这里我要讲解的是自定义View实现选座功能,在安卓中一个会