Android custom view to achieve a simple circular progress effect

Let's show you the renderings first. If you feel good, please refer to the implementation ideas:

We want to realize a custom view that draws an arc in a custom circle. The idea is as follows:

First create a class progressview, inherit from the view class, and then override two construction methods, one with one parameter and the other with two parameters. Because we want to use the custom control in the XML file, we must define the constructor function of these two parameters. After creating this class, we will not care about it, but consider the user-defined view we implemented. We want to specify which parts of it can be specified by the user. For example, in this demo, we let the color and width of the outer circle, the color of the fan part, the growth speed of the fan and so on, At this time, we need to create a resource file named attrs in the RES / values directory of the project directory (note that the name is arbitrary, but it is called that in most cases), and then we add the desired attributes to the resource file, as follows:

It can be seen that the name attribute in the < declare styleable > tag is used to facilitate us to obtain attributeset, while the name in the < attr > tag is the attribute part we want the control to customize, similar to the use of Android: name = "" and other tags in XML files. The format property is used to set what type of parameters this property can accept.

After defining the custom resource class, we begin to write the main code in progressview:

We first draw an external circle, that is, we use the drawcircle () method. Here, we call getwidth(), getheight() to get the size of the control set in the layout. Because it is a circle, we can use getwidth() / 2 to represent the center position of the circle. When drawing an internal arc, determine its center position. The coordinates of the left point are determined by the frame of the outer circle plus the spacing between the arc and the original. The X coordinate of the right point is getwidth() to get the total length, subtract the frame width, and then subtract padding. The upper and lower margins are the same. If you don't understand, draw a picture and understand it immediately. There are notes in most places that are difficult to understand. As long as you look carefully, you won't fail to understand~

Then we introduce our custom view into the layout:

It should be noted that we need to add the following code under the tag of the layout: xmlns: app=“ http://schemas.android.com/apk/res-auto "

It is used to specify that we can use the custom attributes in attrs ~, and the form used is app: the attributes you define. Of course, this app is not written in a fixed way, as long as it is consistent with the fields after xmlns of the code you added above~

It should also be noted that:

By default, when using the drawcircle() method of canvas class to draw a circle, the radius of the circle is the radius you specify, plus half of the side length. For example, if your border size = 10 and radius = 50, the radius of the actual hollow part is 55. Pay attention to this, otherwise the four tangent points of the drawn circle will be somewhat different from other positions, similar to the effect of sawtooth. See the rect border of drawcircle() for details.

The above is the Android custom view introduced to you by Xiaobian, which realizes a simple circular progress effect. I hope it will help you. If you have any questions, please leave me a message, and Xiaobian will reply to you in time!