android自定义3d饼图,安卓(Android)开发之自定义饼状图

先来看看效果图

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

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

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

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

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

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 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 mData) {

this.mData = mData;

initDate(mData);

invalidate(); // 刷新

}

// 初始化数据

private void initDate(ArrayList 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)有所帮助。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值