Android custom View imitation Alipay sesame credit score dial

Let's take a look at the screenshot of IOS's Sesame credit score

This is what I did. There is still a gap

Realization of sesame credit score in Alipay 9.9 version

First initialize all kinds of brushes, the default size, padding and dots

(because I can't find the small dot with fuzzy effect of the original sesame credit, I have to use this instead)

The code is very simple, that is, all kinds of initialization. Look down

The measurement of view is mainly used to set the warp_ Content gives a default width and height value

Then determine the callback method after the width and height of the view

Here is the rectangular implementation required for initializing the arc. Start to focus and draw at the bottom,

Draw the outer arc, very simple, the starting angle and angle of the arc

Draw inner arc

Draw the small scale on the inner arc, rotate the canvas to the starting point of the lower left corner of the arc, calculate the starting point of each scale line, and the whole arc is 210 degrees,

Draw a tick mark every 6 angles

Draw the large scale on the inner arc, 350550600650700950, the corresponding credit score,

Rotate the canvas, calculate the starting point of the scale line, calculate the angle of each rotation, rotate once every 35 degrees, and draw the corresponding large scale line in turn,

Then draw the corresponding text content, measure the length of the text using the measuretext method of paint, and draw the corresponding text content in turn

Draw the middle text such as credit score, credit rating and evaluation time. This is relatively simple. Directly draw text and arrange it in order

For the progress of drawing the outermost layer, the path used here adds the arc to be drawn, because it needs to constantly calculate the coordinate points. The pathmeasure class is mainly used to add the drawn arc to the path,

The actual position of the current point

private float[] pos;

Current tangent value

private float[] tan;

Obtain the tangent value and coordinates of the end point of the path, and then draw a small circle according to the coordinate points

OK, now that all the drawings are finished, let the arc progress bar move. Use valueanimator. The progress bar animation defines the starting angle mcurrentangle and the arc angle mtotalangle of the arc progress bar. The numerical animation defines the initialization minnum = 0, and maxnum is calculated according to the passed in value

Finally, calculate the angle of the arc progress bar according to the incoming credit score

summary

This article only analyzes the implementation process of the new version. The implementation ideas of the old version are similar, and the code is not complex. I hope this article can help you develop Android. If you have any questions, you can leave a message.