最终绘制的结果如下：
image.png
这只是个大致的绘图过程，后续还要继续完善，最终实现练习题中的饼状图的效果
一般我们都是吧百分比转换为饼状图显示的，所以我们
1）第一步工作是将 百分比的数值x转换为 角度y
y = x(3601.0/100)
至于这里为啥是360*1.0 是为了保证绘制的准确性，因为加入时360/100 == 3,就会造成绘制出的饼状图缺少一块
2）考虑到一般饼状图的数据来源都是从接口中返回的，所以我们定义一个接受数据的model
package com.diabin.hencode.model;
/**
* Created by Administrator on 2017/11/22.
*/
public class DataModel {
private String dataName;//名称数值
private float dateNum;//名称数值
private int color;//饼状图色块的颜色
public String getDataName() {
return dataName;
}
public void setDataName(String dataName) {
this.dataName = dataName;
}
public float getDateNum() {
return dateNum;
}
public void setDateNum(float dateNum) {
this.dateNum = dateNum;
}
public int getColor() {
return color;
}
public void setColor(int color) {
this.color = color;
}
}
3)在界面中（可能时一个fragment或者Activity）,构造数据（模拟接口数据），创建自定义View的对象，并往自定义view中传递一个List的集合
package com.diabin.hencode.draw;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import com.diabin.hencode.R;
import com.diabin.hencode.model.DataModel;
import com.diabin.hencode.widget.PieChartView;
import java.util.ArrayList;
import java.util.List;
/**
* Created by Administrator on 2017/10/23.
*/
public class PageTwoFragment extends Fragment {
private View rootView;
private Context mContext;
private List<DataModel> mDataModelList;//传递给view的数据集合
private FrameLayout container;//放置view的容器view
private String[] dataNames = {"Java","C","C++","Python","Kotlin","Javascript"};//分块的名字
private float[] dataNums = {10,10,40,15,20,5};//分块所占的百分比例
private int[] colors = {Color.BLACK,Color.YELLOW,Color.RED,Color.BLUE,Color.GREEN,Color.LTGRAY};//分块的颜色
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mContext = getActivity();
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
rootView = inflater.inflate(R.layout.fragment_two,null);
initViews();
return rootView;
}
private void initViews() {
container = rootView.findViewById(R.id.container);
}
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
initDatas();
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
}
private void initDatas() {
//构建数据模型
mDataModelList = new ArrayList<>();
for (int i = 0; i < 6; i++) {
DataModel dataModel = new DataModel();
dataModel.setDataName(dataNames[i]);
dataModel.setDateNum(dataNums[i]);
dataModel.setColor(colors[i]);
mDataModelList.add(dataModel);
}
//创建view对象并传递设置数据，最后将自定义view的对象加入到自定义view容器中
PieChartView pieChartView = new PieChartView(mContext,mDataModelList);
pieChartView.setMinimumHeight(ViewGroup.LayoutParams.MATCH_PARENT);
pieChartView.setMinimumWidth(ViewGroup.LayoutParams.MATCH_PARENT);
container.addView(pieChartView);
}
}
4)接下来，自定义View,因为我们不是从Xml中绘制自定义view的，所以只需要一个构造函数即可，在构造函数的参数中传入我们需要设置的集合模型数据
package com.diabin.hencode.widget;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.view.View;
import com.diabin.hencode.model.DataModel;
import java.util.List;
/**
* Created by Administrator on 2017/11/22.
*/
public class PieChartView extends View {
private Paint mPaint;
private float startAngle = 180;//初始的角度
private float sweepAngle;//扫过的角度
private List<DataModel> mDataModelList;
private RectF mRectF;
private Context mContext;
public PieChartView(Context context,List<DataModel> list) {
super(context);
this.mContext = context;
this.mDataModelList = list;
initPaint();
}
private void initPaint() {
mPaint = new Paint();
mPaint.setAntiAlias(true);//开启抗锯齿
mPaint.setStyle(Paint.Style.FILL);//填充模式
mRectF = new RectF();//绘制扇形需要规定一个矩形的范围
mRectF.set(100,100,500,500);
}
/**
* 将百分比转换为角度
* {10,10,40,15,20,5}-> 36 72 108 54 72 18
*
* @param percentage
* @return
*/
private float convertPercentagesToAngles(float percentage){
//这里之所以要写成360*1.0F 是因为360/100 = 3 而不是3.6，就会造成部精确的结果，最后导致的结果就是绘制的图形部准确
return percentage*(360*1.0F/100);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int size = null == mDataModelList?0:mDataModelList.size();
for (int i = 0; i < size; i++) {
DataModel dataModel = mDataModelList.get(i);
mPaint.setColor(dataModel.getColor());
sweepAngle = convertPercentagesToAngles(dataModel.getDateNum());
canvas.drawArc(mRectF,startAngle,sweepAngle,true,mPaint);
startAngle += sweepAngle;
}
}
}
