Android custom view circular loading progress bar

View circular loading progress bar rendering

Realization idea

It can be seen that the view can be implemented in three parts

For the outermost circle, this part needs to distinguish the progress circle from the scale circle at the bottom, and the scale of the progress part needs to be distinguished from the background scale

The progress of the text displayed in the middle needs to be centered in the view

The rotating small circle point needs to simulate the acceleration effect of the falling movement of the small ball. It is slow when it starts to fall, the fastest when it reaches the bottom, and gradually slow down when it comes up

Concrete implementation

First, the detailed explanation is given, and all the source code is given at the end of the blog

(1) First, create a custom XML attribute for view, and create a new attrs.xml file in the values directory of the project

Functions of each attribute:

Indexcolor: color of progress circle basecolor: bottom color of scale circle dotcolor: small dot color textsize: text size textcolor: text color

(2) Create a new circleloadingview class, inherit the view class, override its three construction methods, obtain the properties set by the user, and specify the default value

Let's start with the first step of view drawing

(3) To measure onmeasure, first measure the width and height of the view, and specify the view in wrap_ The minimum range of content. Students who are not familiar with the view drawing process can first understand the specific drawing process

On the exploration and common problems of three processes of Android view drawing

Override the onmeasure method, where we want to consider when the width and height of the view are specified as wrap_ Content, if we don't wrap_ Content, when the user specifies the width and height of the view as wrap_ Content will not display view normally

There are three statuses of measurespec: actual and at_ Most and unspecified. Here, you only need to specify the imprecise value only.

The densityutil class used in this article is to convert DP to PX for use, so as to adapt to different screen display effects

(4) Override OnDraw to draw the content to be displayed

Because you are doing a simple view instead of ViewGroup, and there are no child controls inside to determine the position, you can directly skip the onlayout method and start drawing the view. It is divided into three parts: drawing the scale circle, drawing the text value, and drawing the rotating dot

Draw scale circle

First draw a small vertical line, rotate 3.6 degrees (360 degrees in total, 100 / 360 = 3.6) each time through the canvas. Rotate () method to get a circle with a scale of 100, then get the progress number to be displayed through the progress parameter, and change the scale less than progress into the color of the progress circle

Draw middle text

The coordinates of text drawing start from the lower left corner of the text, so you need to load the text into a rectangle rect, obtain the length and width of the string through the gettextbounds method of the brush, and display the text in the center through dynamic calculation

Draw rotation dots

This small circle is simply to draw a filled circle

There are two ways to make it move. One is to open a thread, change the value of mdotprogress in the thread, and refresh the display effect of the view across threads through the postinvalidate method

It is not recommended to use the thread opening method, which is unnecessary overhead, and the thread is not easy to control. It is difficult to realize the effect of making the small circle slow at the beginning and end of the running process and speed up when moving to the middle. Therefore, the best way is to use attribute animation. When you need to make the small circle move, just call the following method

In the attribute animation, you can specify different interpolators through setinterpolator method. Here, the gravity effect of a small ball falling is simulated, so you need to use the acceleratedeelerateinterpolator interpolation class. The effect of this class is to slow down at the beginning and end of the animation and speed up in the middle

(5) Set current progress value

Provides a method to update the progress of the current circle

You can update the progress of the current circle by calling the setprogress method externally

Source code

summary

Frequent new objects need to be avoided in the OnDraw method, so some methods such as initializing brush paint are put in the front construction method.

When drawing in multiple modules, the combination of canvas. Save() and canvas. Restore() should be used to avoid mutual interference when drawing different modules. Drawing in these two methods is equivalent to the layer concept in PS, and the modification of the previous layer will not affect the display effect of the next layer.

Where animation effects need to be displayed, attribute animation is used for processing, which has strong customizable effects. When the interpolator class provided by the system is not enough, we can also inherit the animation class and rewrite its applytransformation method to process various complex animation effects.

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.