手把手教你用Android自定义饼状图

照例先上效果图

通过该例子，你能学到什么：
对Paint 深入理解，画绘制饼图，矩形，文字等
加深对canvas的API的掌握，对自定义View掌握
下面我们分七步来完成一个简单的饼形图绘制过程。
1. 重新View的构造方法

public PieView（Context context） { this（context, null）; } public PieView（Context context, AttributeSet attrs） { this（context, attrs, 0）; } public PieView（Context context, AttributeSet attrs, int defStyleAttr） { super（context, attrs, defStyleAttr）; init（）; } private void init（） { mPieColorList = new ArrayList<>（）; mPieValue = new ArrayList<>（）; mStringList = new ArrayList<>（）; mPaint = new Paint（）; mMaxString = ""; mPaint.setColor（Color.BLACK）; mPaint.setStrokeWidth（10）;//画笔宽度 mPaint.setAntiAlias（true）;//抗锯齿 }

2.绘制图形

/** * 绘制饼图 * * @param canvas * @param amount */ private void drawPie（Canvas canvas, int amount） { mPaint.setColor（mCurrentColor）; mPaint.setStyle（Paint.Style.FILL）; int angle = （int） （360f * amount / mMaxValue）; Log.d（"angle", "drawPie: " + angle）; canvas.drawArc（oval, mStartAngle, angle, true, mPaint）; mStartAngle += angle; } /** * 绘制矩形 * * @param canvas */ private void drawRect（Canvas canvas） { if （mCurrentIndex == 0） {rect = new RectF（mRectMarginLeft, mPadding, mRectMarginLeft + RECT_WIDTH, mPadding + RECT_WIDTH）;canvas.drawRect（rect, mPaint）; } else {rect = new RectF（mRectMarginLeft, （mCurrentIndex） * TEXT_VERTICAL_PADDING + mPadding, mRectMarginLeft + RECT_WIDTH, （mCurrentIndex） * TEXT_VERTICAL_PADDING + mPadding + RECT_WIDTH）;canvas.drawRect（rect, mPaint）; } } /** * 绘画文字 * * @param canvas * @param text */ private void drawText（Canvas canvas, String text） { mPaint.setColor（TEXT_COLOR）; if （mCurrentIndex == 0） {canvas.drawText（text, mTextMarginLeft, mPadding + TEXT_SIZE * 0.8f - 5, mPaint）; } else {canvas.drawText（text, mTextMarginLeft, （mCurrentIndex） * TEXT_VERTICAL_PADDING + mPadding + TEXT_SIZE * 0.8f - 5, mPaint）; } }

3.Pie 实体类

public class Pie { public int PieColor; public int PieValue; public String PieString; public Pie（int pieValue, String pieString, int pieColor） { this.PieValue = pieValue; this.PieString = pieString; this.PieColor = pieColor; }}

4.xml引用

 <aikaifa.canvas.widget.PieView android:layout_width="match_parent" android:layout_height="200dp" android:id="@+id/PieView" />

5.填充数据

public class MainActivity extends Activity { private ArrayList<Pie> pieArrayList = new ArrayList<>（）; private String[] arr = {"C#", "C", "C++", "JAVA", "JavaScript", "Object-C"}; private int[] pre = {20, 30, 10, 10, 10, 20}; private PieView pieView; @Override protected void onCreate（Bundle savedInstanceState） { super.onCreate（savedInstanceState）; setContentView（R.layout.activity_main）; pieView = （PieView） findViewById（R.id.PieView）; int[] pieColor = {getResources（）.getColor（R.color.blue）, getResources（）.getColor（R.color.red）, getResources（）.getColor（R.color.gray_dark）,getResources（）.getColor（R.color.dark）, getResources（）.getColor（R.color.colorPrimary）, getResources（）.getColor（R.color.black_alpha_light）}; for （int i = 0; i < arr.length; i++） {Pie pie = new Pie（pre[i], arr[i], pieColor[i]）;pieArrayList.add（pie）; } pieView.SetPie（pieArrayList）; }}

6.完整的PieView

public class PieView extends View { private Paint mPaint; //饼图和矩形的距离 private final int PIE_RECT_PADDING = getResources（）.getDimensionPixelSize（R.dimen.pie_rect_padding）; //矩形的宽度 private final int RECT_WIDTH = getResources（）.getDimensionPixelSize（R.dimen.rect_width）; //矩形和文字的距离 private final int RECT_TEXT_PADDING = getResources（）.getDimensionPixelSize（R.dimen.rect_text_padding）; //文字的大小 private final int TEXT_SIZE = getResources（）.getDimensionPixelSize（R.dimen.text_size）; //文字的垂直距离 private final int TEXT_VERTICAL_PADDING = getResources（）.getDimensionPixelSize（R.dimen.text_vertical_padding）; //得到文字颜色 private final int TEXT_COLOR = getResources（）.getColor（R.color.gray_dark）; //文字和控件顶部的距离 private float mPadding; //饼图的半径 private int mPieRadios; //所有数值的总和 private int mMaxValue; //饼图开始的角度 private int mStartAngle; //文字的宽度 private int mTextWidth; //控件半高 private int mControlHalfHeight; //当前索引 private int mCurrentIndex; //左边距 private int mRectMarginLeft; private int mTextMarginLeft; //当前颜色 private int mCurrentColor; //圆的范围 private RectF oval; //最长的字符串 private String mMaxString; private List<Integer> mPieColorList; private List<Integer> mPieValue; private List<String> mStringList; private ArrayList<Pie> mPieArrayList; private RectF rect; public PieView（Context context） { this（context, null）; } public PieView（Context context, AttributeSet attrs） { this（context, attrs, 0）; } public PieView（Context context, AttributeSet attrs, int defStyleAttr） { super（context, attrs, defStyleAttr）; init（）; } private void init（） { mPieColorList = new ArrayList<>（）; mPieValue = new ArrayList<>（）; mStringList = new ArrayList<>（）; mPaint = new Paint（）; mMaxString = ""; mPaint.setColor（Color.BLACK）; mPaint.setStrokeWidth（10）;//画笔宽度 mPaint.setAntiAlias（true）;//抗锯齿 } @Override protected void onSizeChanged（int width, int height, int oldWidth, int oldHeight） { super.onSizeChanged（width, height, oldWidth, oldHeight）; mTextWidth = （int） mPaint.measureText（mMaxString）; mControlHalfHeight = height / 2; //饼图半径 mPieRadios = mControlHalfHeight - 5; //控件内容宽度 int contentWidth = mPieRadios * 2 + PIE_RECT_PADDING + RECT_WIDTH + RECT_TEXT_PADDING + mTextWidth; //内容的左边距 int contentMarginLeft = （width - contentWidth） / 2; //矩形的左边距 mRectMarginLeft = contentMarginLeft + mPieRadios * 2 + PIE_RECT_PADDING; //文字的左边距 mTextMarginLeft = mRectMarginLeft + RECT_WIDTH + RECT_TEXT_PADDING; //文字和控件顶部的距离 mPadding = height / mPieArrayList.size（） * 0.8f; oval = new RectF（contentMarginLeft, mControlHalfHeight - mPieRadios,contentMarginLeft + mPieRadios * 2, mControlHalfHeight + mPieRadios）; } /** * @param pieArrayList */ public void SetPie（ArrayList<Pie> pieArrayList） { mPieArrayList = pieArrayList; for （Pie mPie : mPieArrayList） {mPieColorList.add（mPie.PieColor）;mPieValue.add（mPie.PieValue）;mStringList.add（mPie.PieString）;if （mMaxString.length（） > mPie.PieString.length（））mMaxString = mPie.PieString; } //使用postInvalidate可以直接在主线程中更新界面 postInvalidate（）; } @Override protected void onDraw（Canvas canvas） { super.onDraw（canvas）; mStartAngle = -90; mCurrentIndex = 0; mMaxValue = 100; mPaint.setStyle（Paint.Style.FILL）; for （int i = 0; i < mPieValue.size（）; i++） {mCurrentColor = mPieColorList.get（mCurrentIndex）;Log.i（"mCurrentColor", "onDraw: " + mCurrentColor）;drawPie（canvas, mPieValue.get（mCurrentIndex））;drawRect（canvas）;drawText（canvas, mStringList.get（mCurrentIndex））;mCurrentIndex++; } } /** * 绘制饼图 * * @param canvas * @param amount */ private void drawPie（Canvas canvas, int amount） { mPaint.setColor（mCurrentColor）; mPaint.setStyle（Paint.Style.FILL）; int angle = （int） （360f * amount / mMaxValue）; Log.d（"angle", "drawPie: " + angle）; canvas.drawArc（oval, mStartAngle, angle, true, mPaint）; mStartAngle += angle; } /** * 绘制矩形 * * @param canvas */ private void drawRect（Canvas canvas） { if （mCurrentIndex == 0） {rect = new RectF（mRectMarginLeft, mPadding, mRectMarginLeft + RECT_WIDTH, mPadding + RECT_WIDTH）;canvas.drawRect（rect, mPaint）; } else {rect = new RectF（mRectMarginLeft, （mCurrentIndex） * TEXT_VERTICAL_PADDING + mPadding, mRectMarginLeft + RECT_WIDTH, （mCurrentIndex） * TEXT_VERTICAL_PADDING + mPadding + RECT_WIDTH）;canvas.drawRect（rect, mPaint）; } } /** * 绘画文字 * * @param canvas * @param text */ private void drawText（Canvas canvas, String text） { mPaint.setColor（TEXT_COLOR）; if （mCurrentIndex == 0） {canvas.drawText（text, mTextMarginLeft, mPadding + TEXT_SIZE * 0.8f - 5, mPaint）; } else {canvas.drawText（text, mTextMarginLeft, （mCurrentIndex） * TEXT_VERTICAL_PADDING + mPadding + TEXT_SIZE * 0.8f - 5, mPaint）; } } @Override public boolean onTouchEvent（MotionEvent event） { if （event.getAction（） == MotionEvent.ACTION_DOWN） {float x = event.getX（）;float y = event.getY（）;Log.e（"",x+"-----------"）; } return true; }}

7.其他文件

colors.xml

<color name="dark">#0097a7</color><color name="grey">#e0e0e0</color><color name="gray_dark">#666666</color><color name="black_alpha_light">#3c3f41</color><color name="black_light">#383838</color><color name="blue">#03a9f4</color><color name="red">#ff4081</color>

dimens.xml

<dimen name="fab_margin">16dp</dimen><dimen name="pie_rect_padding">30dp</dimen><dimen name="rect_text_padding">6dp</dimen><dimen name="rect_width">15dp</dimen><dimen name="text_size">18sp</dimen><dimen name="text_vertical_padding">25dp</dimen>

总结
好了，这样一个简单的饼形图绘制就算完成了。希望这篇文章的内容对各位Android开发者们能有所帮助，如果有疑问大家可以留言交流。