Android custom view to achieve memory cleanup accelerator effect

preface

We have used cheetah cleaning master or similar security software. We all know that they will have a function, that is, memory cleaning, which is displayed in the form of a circular ball to display the memory size, and the cleaning progress in the form of percentage numbers and progress bars. This paper will describe the implementation process of this effect in detail, but does not involve the implementation of memory cleaning.

preview

Let's take a look at the final effect (GIF effect is a little poor):

From the above picture, we can see:

① When the accelerator ball view is displayed, the progress bar and percentage number will increase from 0% to a certain value (60%). ② After the progress bar stops increasing, the middle circle starts to flip along the Y axis and will flip 180 degrees. The percentage number above will not have the mirror effect (mentioned below). ③ After the user clicks the small ball, the memory will be cleaned up. The progress bar and percentage number will go through the process of decreasing to 0 and then increasing from 0 to a certain value.

Detailed explanation of implementation process

In fact, the above effect is achieved by imitating the acceleration ball of cheetah cleaning master, which is slightly different, but in roughly the same form. If readers are interested in the above effect, please continue to read it. Next is the main body.

Step 1. Initialization

First, we need to create a lieboview.java, which inherits from view. We rewrite its constructor as follows:

No matter how the view is instantiated, the init () method will be called. This method is mainly used to initialize various member variables. Which member variables or instances do we need to help us?

The author's idea is as follows: through a blank bitmap, we draw circles and text on it, and finally draw the bitmap on our view.

Therefore, when initializing, we need to obtain various instances of paint, bitmap, canvas, etc. Let's think again: the middle circle can rotate, so the middle rotating circle can't be placed on the same bitmap as other circles, otherwise it will bring trouble to the implementation of later rotation, so we can prepare two blank bitmaps. Well, we can start with this:

The above mainly initializes various brush types and prepares two bitmaps and their associated canvases. We can draw on their associated canvases, so that we can get two bitmaps with content.

Let's go on to think: what else do we need to achieve the flip effect? The Android SDK has prepared a set of tools for us: camera and matrix. With these two tools, we can easily realize various transformations of bitmap, such as zoom, pan, flip, etc. For camera and matrix, readers can search for more detailed relevant knowledge, which will not be discussed in detail here. Finally, we also need runnable, because we need to realize automatic flipping and automatic increase and decrease of progress bar. Runnable will be described in detail below. Don't worry first. Of course, we also need to set up a click listener.

Step 2. Draw an image

Brushes and canvases have been prepared for us. Let's draw the required images next. You can override the OnDraw () method of view.

① Draw the background circle, that is, the outermost dark blue circle in the above figure:

mBitmapCanvas.drawCircle(mWidth / 2,mHeight / 2,mWidth / 2,mBackgroundCirclePaint);

② Draw the white background circle in the middle, that is, in the process of rotating the circle to flip, the white part of the background:

mBitmapCanvas.drawCircle(mWidth / 2,mWidth / 2 - mPadding,mTextPaint);

③ How to draw progress bar and arc progress bar? Here is an idea of the author: it is realized through the drawarc () method of canvas, which can draw a maximum circle (or ellipse) in a rectangle, set the brush to be hollow and the brush line width to about 12, so as to realize a thick arc, and then continuously call OnDraw () method to modify drawarc () To achieve the progress bar effect. If you have any other implementation methods, welcome to communicate.

④ Draw the rotation circle in the middle. As mentioned above, to achieve the flipping effect, we can't draw on the same bitmap, so we use another blank bitmap. The drawing of rotating circle is very simple, as long as its radius is smaller than the sum of outer circle radius and progress bar width:

mOverturnBitmapCanvas.drawCircle(mWidth / 2,mFrontCirclePaint);

⑤ Finally, draw the percentage number on the rotating circle. To draw text, canvas's DrawText method is used. Let's focus on this method:

The first and fourth parameters have nothing to say. The second parameter represents the X coordinate of the beginning of the text, and the third parameter represents the Y coordinate of the baseline of the text. To center the text, we only need to set the appropriate X and Y coordinates. What is baseline? It actually represents the benchmark of the text. Let's look at a picture:

As can be seen from the figure, ascent is above baseline to the highest point of the text, which is a negative value; Below baseline to the lowest point of the text is descent, which is a positive value. Therefore, if we want to center the text in the control, we can use - (ascent descent) / 2 to calculate half of the height of the text. At this time, we can use mheight / 2 (half of the control height) to add the value to obtain the baseline value in the control. At this time, the center display is realized. The code is as follows:

Finally, draw the bitmap on the view:

canvas.drawBitmap(mOverturnBitmap,mMatrix,null);

After the above drawing, let's see the effect first:

Then the basic effects have been achieved. Next, we will achieve dynamic effects.

Step 3. Realize the effect of automatic turnover

From the above animation effect, we first increase the progress bar from 0 to a certain value, and then automatically flip it. The implementation of increasing the value is very simple. You only need to enable a runnable, increase the mprogress value in the runnable, and then call the invalidate () method to refresh the view. When the progress bar is added, start to flip. If you flip, use camera and matrix to operate the bitmap in the middle and constantly change the angle. Let's take a look at the code: in the ondraw() method:

Next, let's write mrotaterennable. The initialization of runnable is in the init () method:

Through the above runnable and the cooperation of ondraw() method, the effect of automatic flipping can be realized.

Step 4. Achieve the effect of click cleaning

Well, let's achieve the final effect. Similarly, we use a runnable to achieve the cleaning effect. Since the cleaning effect requires the user to click the small ball before starting cleaning, we need an event listener. Every time the user clicks, we can post a runnable in the onclick method. First implement mcleaningrunnable. In the init() method:

The above logic is implemented. After each click, the progress value is continuously reduced to 0, and then continuously increased to a fixed value. Each call of the invalidate () method notifies the component to refresh, so as to realize the dynamic effect.

Well, so far, all the effects have been achieved. All the code is posted below. Thank you for reading~

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.