Hencode练习题之自定义饼状图1_1绘制基本图形

最终绘制的结果如下：

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 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 mDataModelList;
   private RectF mRectF;

   private Context mContext;
   public PieChartView(Context context,List 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;

       }

   }
}