Android custom view to achieve water ripple progress ball effect

The view we want to implement today does not have many interactive views, so we inherit the view.

The custom view routine is very deep

1. Get our custom attribute attrs (can be omitted)

2. Override the onmeasure method to calculate the width and height of the control

3. Override the OnDraw method to draw our control

So, the custom view routine is very clear.

Let's look at today's renderings. One of them is the effect of slowing down (adjusting the time longer)

Let's follow the routine.

I Custom properties

Take a look at the renderings and we will know which attributes are needed. No more.

Then we get these properties, that is, we use typedarray to get them. Of course, it is obtained in the construction. Generally, we will copy the construction method, call the one with more parameters with fewer parameters, and then go to the one with the most parameters.

Note: r.style Waveprogressviewdefault is the default style for this control.

II Onmeasure measurement

We rewrite this method mainly to set our own width and height according to the width and height seen by the father.

First of all, the width and height of the control must be the same, because it is a circle. In fact, the width and height are related to the radius and inner margin. Here, we take the smallest one up, down, left and right. The width and height are also selected to be the smallest.

this. width = this. height = min; Include left and right margins.

Resolvesize is a good way to achieve the width and height we want. Let me take a look at the source code.

If we write it ourselves, we write it the same way.

Finally, set the width and height through setmeasureddimension.

III OnDraw draw

There are many APIs provided by Android for drawing, so I won't talk about it here.

Drawing starts with the initialization of some brushes.

It should be mentioned that the brush for drawing the path path is set to porterduff Mode. SRC_ In mode, which displays only the overlapped parts.

We want to draw all the drawings on a transparent bitmap, and then draw the bitmap on canvas.

For the convenience of calculation and drawing, I translate the coordinate system to the padding distance

3.1 drawing circle

3.2 draw the path

One is to realize the left-right drift of the ripple and the slow reduction of the amplitude up and down

Before drawing this, we need to know the general principle of second-order Bessel curve.

Simply put, you know: P1 is the starting point, P2 is the end point, and P1 is the control point Using the formula of Searle curve, you can get some points along the way. Finally, connect the points.

The following picture comes from the network:

The function rquadto method for drawing Bezier curve is provided in Android SDK

Dx1: the X coordinate of the control point, which represents the displacement coordinate relative to the X coordinate of the previous end point. It can be negative. A positive value represents addition and a negative value represents subtraction;

DY1: the Y coordinate of the control point, which is the displacement coordinate relative to the Y coordinate of the previous end point. It can also be a negative value. A positive value indicates addition and a negative value indicates subtraction;

DX2: the X coordinate of the end point is also a relative coordinate. The displacement value relative to the X coordinate of the previous end point can be negative. A positive value indicates addition and a negative value indicates subtraction;

Dy2: the Y coordinate of the end point is also a relative displacement value relative to the Y coordinate of the previous end point. Can be negative, positive value means addition, negative value means subtraction;

These four parameters are transmitted, and they are relative values, relative to the displacement value of the previous end point.

To slowly reduce the amplitude, we can adjust the Y coordinate of the control point, that is:

You can get the value of [0,1]

A closed interval, [0,1] it's good. I like it. I can do a lot of things.

In this way, we can adjust the Y coordinate of the control point according to percent.

To realize the left-right ripple, you only need to control the X coordinate of the upper left corner of the closed path. Of course, it is also based on percent.

You can understand the above words in combination with the following figure.

The complete code fragment drawn by path.

3.3 text for drawing progress

This is relatively simple. It can be drawn in the middle of the control. The coordinate calculation of text is still very easy to understand.

Finally, don't forget to draw our bitmap on canvas.

Oh, the last is the practical method. Here we don't use thread + handler, we use attribute animation.

you'll see!!!, like

Conclusion

So far, our effect has been realized. The above is the whole content of this article. I hope the content of this article can help you develop Android.