Android imitation Alipay on Sesame Credit Division radar Map _android

First, look at the pay treasure on the Sesame credit score on the effect of the map:

Second, train of thought

1, to determine the center point of radar map coordinates

2, draw the polygon and the connection line

3. Draw coverage area according to dimension value

4, draw the score

5. Draw the title text and icon for each dimension

Third, realize

Get the central coordinates of a layout

In the onSizeChanged(int w, int h, int oldw, int oldh) method, according to the view of the length, calculate the radius of the radar map (here take the layout of the width and height of the minimum value of One-fourth, you can customize), get the entire layout of the central coordinates.

public class Creditscoreview extends View {//number of data private int datacount = 5;
 Radians of each corner private float radian = (float) (Math.PI * 2/datacount);
 Radar radius private float radius;
 Center x coordinates private int centerx;
 Center y-coordinate private int centery;
 Each dimension title private string[] Titles = {"Performance ability", "Credit history", "interpersonal Relationship", "behavioral preference", "Identity Trait"}; Each dimension icon Private int[] icons = {r.mipmap.ic_performance, r.mipmap.ic_history, R.mipmap.ic_contacts, R.mipmap.ic_predile
 Ction, r.mipmap.ic_identity};
 Each dimension score private float[] data = {170, 180, 160, 170, 180};
 Data maximum value private float maxValue = 190;
 Radar and caption spacing private int radarmargin = densityutils.dp2px (GetContext (), 15);
 Radar Area brush private Paint mainpaint;
 Data area brush private Paint valuepaint;
 Fractional brushes private Paint scorepaint;
 Title Brush private Paint Titlepaint;
 Icon Brush private Paint iconpaint;
 Fractional size private int scoresize = densityutils.dp2px (GetContext (), 28);

 Title Text size private int titlesize = densityutils.dp2px (GetContext (), 13); ... @Override protecte.d void onsizechanged (int w, int h, int oldw, int oldh) {//Radar range radius = math.min (h, W)/2 * 0.5f;
  central coordinate centerx = W/2;
  CenterY = H/2;
  Postinvalidate ();
 Super.onsizechanged (W, H, OLDW, OLDH); }

 ...
}

Drawing polygons and connecting lines

getPointThis method encapsulates the computational logic for acquiring the coordinates of each point on a radar map.

/**
 * Draw Polygon
 *
 * @param canvas canvas
/private void DrawPolygon (canvas canvas) {
 Path PATH = new path ();
 for (int i = 0; i < Datacount; i++) {
  if (i = = 0) {
   path.moveto (GetPoint (i). x, GetPoint (i). y);
  } else { C13/>path.lineto (GetPoint (i). x, GetPoint (i). y);
  }

 Closed path
 path.close ();
 Canvas.drawpath (path, mainpaint);

/**
 * Draw Connector
 *
 * @param canvas canvas
/private void DrawLines (canvas canvas) {
 Path Path = new Path ();
 for (int i = 0; i < Datacount i++) {
  path.reset ();
  Path.moveto (CenterX, centery);
  Path.lineto (GetPoint (i). x, GetPoint (i). y);
  Canvas.drawpath (path, mainpaint);
 }

getPointmethod, and the parameter is radarMargin percent given a default value in this step.

/** * Gets the coordinates of each point on the radar map * * @param position coordinate position (0 in the upper right corner, ascending clockwise) * @return coordinates * * (int position) {RET
Urn GetPoint (position, 0, 1); /** * Gets the coordinates of the points on the radar map (including the coordinates of the dimension title and the icon) * * @param position coordinate position * @param the space between the Radarmargin radar and the dimension headings * @param percent coverage area
 Percent * @return coordinates/private point getpoint (int position, int radarmargin, float percent) {int x = 0;

 int y = 0;
  if (position = = 0) {x = (int) (CenterX + (RADIUS + radarmargin) * Math.sin (radian) * percent);

 y = (int) (CenterY-(RADIUS + radarmargin) * Math.Cos (radian) * percent);
  else if (position = 1) {x = (int) (CenterX + (RADIUS + radarmargin) * Math.sin (RADIAN/2) * percent);

 y = (int) (CenterY + (RADIUS + radarmargin) * Math.Cos (RADIAN/2) * percent);
  else if (position = 2) {x = (int) (CenterX-(RADIUS + radarmargin) * Math.sin (RADIAN/2) * percent);

 y = (int) (CenterY + (RADIUS + radarmargin) * Math.Cos (RADIAN/2) * percent); else if (position = 3) {x = (int) (CenteRX-(RADIUS + radarmargin) * Math.sin (radian) * percent);

 y = (int) (CenterY-(RADIUS + radarmargin) * Math.Cos (radian) * percent);
  else if (position = 4) {x = CenterX;
 y = (int) (CenterY-(RADIUS + radarmargin) * percent);
Return to New Point (x, y); }

Polygons and connecting lines

Draw Coverage Area

/**
 * Draw Overlay Area
 *
 * @param canvas canvas
/private void drawregion (canvas canvas) {
 Path PATH = new path ();

 for (int i = 0; i < Datacount; i++) {
  //calculate percent
  float percent = data[i]/maxValue;
  int x = getpoint (i, 0, percent). x;
  int y = getpoint (i, 0, percent). Y;
  if (i = = 0) {
   path.moveto (x, y);
  } else {
   path.lineto (x, y);}
 }

 Draws the boundary path.close () of the filled area
 ;
 Valuepaint.setstyle (Paint.Style.STROKE);
 Canvas.drawpath (path, valuepaint);

 Draws the filled area
 valuepaint.setstyle (Paint.Style.FILL_AND_STROKE);
 Canvas.drawpath (path, valuepaint);

Coverage area

Draw Fractions

/**
 * Draw Score
 *
 * @param canvas canvas
/private void Drawscore (canvas canvas) {
 int score = 0;
 Calculates the total score for
 (int i = 0; i < Datacount i++) {
  score + = Data[i];
 }
 Canvas.drawtext (Score + "", CenterX, CenterY + SCORESIZE/2, scorepaint);

Scores

Draw Title

/**
 * Draw Title
 *
 * @param canvas canvas
/private void Drawtitle (canvas canvas) {for
 (int i = 0; i < Datacount; i++) {
  int x = GetPoint (i, Radarmargin, 1). x;
  int y = GetPoint (i, Radarmargin, 1). Y;

  Bitmap Bitmap = Bitmapfactory.decoderesource (Getresources (), icons[i]);
  int iconheight = Bitmap.getheight ();
  float titlewidth = Titlepaint.measuretext (Titles[i]);

  The coordinates of the bottom two corners need to move the position of half the picture downward (1, 2)
  if (i = = 1) {
   y + = (ICONHEIGHT/2);
  } else if (i = = 2) {
   x = titlewidth ;
   Y + = (ICONHEIGHT/2);
  } else if (i = = 3) {
   x = titlewidth;
  } else if (i = = 4) {
   x = TITLEWIDTH/2;
  }
  Canvas.drawtext (Titles[i], x, y, titlepaint);
 }

title

Drawing icons

/** * Draw Icon * * @param canvas canvas/private void DrawIcon (canvas canvas) {for (int i = 0; i < Datacount; i++) {
  int x = GetPoint (i, Radarmargin, 1). x;

  int y = GetPoint (i, Radarmargin, 1). Y;
  Bitmap Bitmap = Bitmapfactory.decoderesource (Getresources (), icons[i]);
  int iconwidth = Bitmap.getwidth ();
  int iconheight = Bitmap.getheight ();

  float titlewidth = Titlepaint.measuretext (Titles[i]);
   The x, Y coordinates obtained above are the coordinates of the lower-left corner of the header//need to move the icon to the center of the title if (i = = 0) {x + = (titlewidth-iconwidth)/2;
  Y-= (iconheight + gettextheight (titlepaint));
   else if (i = = 1) {x + = (titlewidth-iconwidth)/2;
  Y-= (ICONHEIGHT/2 + gettextheight (titlepaint));
   else if (i = = 2) {x = (Iconwidth + (Titlewidth-iconwidth)/2);
  Y-= (ICONHEIGHT/2 + gettextheight (titlepaint));
   else if (i = = 3) {x = (Iconwidth + (Titlewidth-iconwidth)/2);
  Y-= (iconheight + gettextheight (titlepaint));
   else if (i = = 4) {x = ICONWIDTH/2; Y-= (iconheight + geTtextheight (Titlepaint));
 } canvas.drawbitmap (bitmap, x, Y, titlepaint); /** * Gets the height of the text * * @param paint Text Draw Brush * @return Text Height * * Private int gettextheight (paint paint) {PAINT.FONTMETR
 ICS FontMetrics = Paint.getfontmetrics ();
return (int) (fontmetrics.descent-fontmetrics.ascent); }

Icon

Summarize

OK, here is the main drawing work done, some of the icons can not be found, with a similar substitution. 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.