Android custom view control realizes a variety of water ripple diffusion effects

design sketch

Realization idea

This effect is not difficult to achieve, the important thing is thinking

This view meets a variety of water ripple diffusion effects, which requires it to meet many changes

According to the above style, you can see that this view needs to meet the following changes

Concrete implementation

Create custom attributes

First, create a custom XML attribute for the view

Create a new attrs.xml file in the values directory of the project

The functions of each attribute are as follows

Create a custom view control

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

After using typedarray to read custom attributes, be sure to call the recycle method to release them

Override onmeasure

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

https://www.oudahe.com/p/24866/

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 except actual

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

Override OnDraw

The overall idea of the design is shown in the figure below

First, the effect of circular outward diffusion should be realized

The animation effect here was originally intended to be realized by using the numerical generator of valueanimator attribute animation, but we have a lot of calculation requirements here, so we finally choose to use the algorithm to realize it, so as to facilitate the control of some parameters of the circle

To achieve the effect of diffusion, the idea here is to dynamically change the radius of the circle every time the view is updated, and set the gradient degree for the circle. Therefore, it is decided to use a class to save the state of the circle. All circles exist in a list

Two parameters are passed into the circle class. The first 0 represents the initial width of the circle and the second 255 represents the initial transparency

To realize the continuous outward diffusion of circles, you need to add another circle at the center of the circle when the first circle spreads to a certain range, which can be controlled by the radius of the circle. When the radius of the last circle in the list set increases to a certain value mdensity, the new circle will be created from the center of the circle

The number of circles stored in the list should not be too large, which consumes a lot of memory. You need to delete the circle when the radius of the circle exceeds the width of the view

We can also delete the circle at the vertex of the circumscribed square. We need to use Pythagorean law to calculate the position of the diffusion circle to the vertex of the circumscribed square

As shown in the figure above, the calculation formula is

In this way, you need to modify the position of the deleted circle

When the circle diffuses to the edge of the view, the change of gradient degree needs to be calculated dynamically. The gradient calculation algorithm should adapt to different circle widths. We know that the transparency is between 0 and 255. 0 means completely transparent and 255 means 100% opaque. During calculation, this value needs to be allocated equally to the width of the circle

One thing to distinguish here is that for a circle, the width increases outward from the center of the circle from 0, while the gradient degree decreases outward from the center of the circle from 255. When the circle is inscribed with the outermost square, the gradient degree must change to 0. From this analysis, the formula is as follows

GitHub address

https://github.com/zhuwentao2150/RippleView

summary

The summary of user-defined view has been written a lot in my other blogs. If you are interested, you can go and have a look

Well, the above is the whole content of this article. I hope the content of this article has a certain reference value for your study or work. If you have any questions, you can leave a message. Thank you for your support for programming tips.