I'll teach you how to use Android to customize pie charts _android

As usual, the effect chart first

What can you learn from this example:

Deep understanding of paint, Draw pie chart, rectangle, text, etc.

Deepen the mastery of the canvas API, mastering the Custom view

Here are seven steps to complete a simple pie chart drawing process.

1. Re-view method of construction

Public Pieview {This
 (context, NULL);
 }

 Public Pieview (context, AttributeSet attrs) {This
 (context, attrs, 0);
 }

 Public Pieview (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);//Brush width
 Mpaint.setantialias (true);/anti-aliasing
 }

2. Drawing graphics

/** * Draw Pie chart * * @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; /** * Draw Rectangle * * @param canvas/private void drawrect (canvas canvas) {if (Mcurrentindex = 0) {rect = new Re
  CtF (Mrectmarginleft, mpadding, Mrectmarginleft + rect_width, mpadding + rect_width);
 Canvas.drawrect (rect, mpaint); else {rect = new RECTF (Mrectmarginleft, (mcurrentindex) * text_vertical_padding + mpadding, Mrectmarginleft + RECT_WI
  DTH, (mcurrentindex) * text_vertical_padding + mpadding + rect_width);
 Canvas.drawrect (rect, mpaint); }/** * Painting text * * @param canvas * @param text/private void DrawText (canvas canvas, String text) {Mpaint.set
 Color (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 entity class

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 Reference

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

5. Filling data

 public class Mainactivity extends activity {private arraylist<pie> Piearraylist
 = new Arraylist<> ();
 Private string[] arr = {"C #", "CS", "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. Full Pieview

public class Pieview extends View {private Paint mpaint;
 The distance between pie chart and rectangle is private final int pie_rect_padding = Getresources (). Getdimensionpixelsize (r.dimen.pie_rect_padding);
 The width of the rectangle is private final int rect_width = Getresources (). Getdimensionpixelsize (R.dimen.rect_width);
 The distance between the rectangle and the text is private final int rect_text_padding = Getresources (). Getdimensionpixelsize (r.dimen.rect_text_padding);
 The size of the text private final int text_size = Getresources (). Getdimensionpixelsize (R.dimen.text_size); The vertical distance of the text is private final int text_vertical_padding = Getresources (). Getdimensionpixelsize (R.dimen.text_vertical_
 padding);
 Get text color private final int text_color = Getresources (). GetColor (R.color.gray_dark);
 The distance between the text and the top of the control private float mpadding;
 The radius of the pie chart is private int mpieradios;
 Sum of all numeric values private int mmaxvalue;
 Pie chart starting angle private int mstartangle;
 The width of the text is private int mtextwidth;
 Control half high private int mcontrolhalfheight;
 Current index private int mcurrentindex;
 Left margin private int mrectmarginleft; Private inT Mtextmarginleft;
 Current color private int mcurrentcolor;
 The range of the circle private RECTF oval;

 The longest string, private string mmaxstring;
 Private list<integer> mpiecolorlist;
 Private list<integer> Mpievalue;
 Private list<string> mstringlist;

 Private arraylist<pie> mpiearraylist;

 Private RECTF rect;
 Public Pieview {This (context, NULL);
 Public Pieview (context, AttributeSet attrs) {This (context, attrs, 0);
 Public Pieview (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);//Brush width Mpaint.setantialias (true);/anti-aliasing} @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;
 Pie chart radius Mpieradios = mControlHalfHeight-5;
 Control content Width int contentwidth = Mpieradios * 2 + pie_rect_padding + rect_width + rect_text_padding + mtextwidth;
 The left margin of the content int contentmarginleft = (width-contentwidth)/2;
 The left margin of the rectangle mrectmarginleft = contentmarginleft + Mpieradios * 2 + pie_rect_padding;
 The left margin of the text Mtextmarginleft = mrectmarginleft + rect_width + rect_text_padding;
 The distance between the top of the text and the control mpadding = Height/mpiearraylist.size () * 0.8f; Oval = new RECTF (Contentmarginleft, Mcontrolhalfheight-mpieradios, Contentmarginleft + Mpieradios * 2, MControlHalfHei
 Ght + 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;
 ///Use Postinvalidate to update the interface Postinvalidate () directly in the main thread;

 } @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++; /** * Draw Pie chart * * @param canvas * @param amount/private void Drawpie (canvas canvas, int amount) {Mpaint.set
 Color (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; /** * Draw Rectangle * * @param canvas/private void drawrect (canvas canvas) {
 if (Mcurrentindex = = 0) {rect = new RECTF (Mrectmarginleft, mpadding, Mrectmarginleft + rect_width, mpadding + rect_wi
  DTH);
 Canvas.drawrect (rect, mpaint); else {rect = new RECTF (Mrectmarginleft, (mcurrentindex) * text_vertical_padding + mpadding, Mrectmarginleft + RECT_WI
  DTH, (mcurrentindex) * text_vertical_padding + mpadding + rect_width);
 Canvas.drawrect (rect, mpaint); }/** * Painting text * * @param canvas * @param text/private void DrawText (canvas canvas, String text) {Mpaint.set
 Color (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. Other documents

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>

Summarize

OK, so a simple pie chart drawing is done. Hopefully the content of this article will be helpful to Android developers, and if you have any questions, you can leave a message to communicate.