Android imitation Alipay sesame credit score radar chart

First, look at the effect of Alipay's Sesame credit score.

2、 Train of thought

1. Determine the coordinates of the center point of the radar chart

2. Draw polygons and connecting lines

3. Draw coverage area based on dimension value

4. Draw score

5. Draw the title text and icon for each dimension

3、 Realize

Gets the center coordinates of the layout

In the onsizechanged (int w, int h, int oldw, int oldh) method, calculate the radius of the radar map according to the length and width of the view (here, take one fourth of the minimum value of layout width and height, which can be customized), and obtain the center coordinates of the whole layout.

Draw polygons and connecting lines

Mainly look at the getpoint method, which encapsulates the calculation logic for obtaining the coordinates of each point on the radar map.

Getpoint method, the parameters radarmargin and percent are given default values in this step.

Draw coverage area

Draw score

Draw title

draw icon

summary

Well, here the main drawing work is completed. Some icons can't be found, so they are replaced by similar ones. I hope the content of this article can be helpful to Android developers. If you have any questions, you can leave a message.