Android realizes the water ripple effect by clicking the button

First, let's see what I want to introduce to you, as shown in the figure below:

The next step is to introduce how to realize the ripple effect in the above figure. If you haven't experienced this effect, you can look at Baidu mobile guard or 360 mobile guard. The button click effect is like this. In addition, Android versions above 5.0 also show this effect. Not much to say, let's talk about how to realize it.

First of all, we see three buttons. The appearance of water ripples gives us the illusion that the ripples are directly drawn on the buttons, but can this be done? First of all, the button has its own background and Src. If the translucent water ripple is drawn on the button as background or SRC, the original style of the button will be lost. A friend may guess that we should draw the water ripple on the screen. Congratulations to this friend. At least I did it. The specific idea is to implement a layout ourselves, capture events in the layout, deal with events accordingly, find the view clicked by the current user in the down event, and find the rectangular area where the view is located, Draw a transparent ring to the rectangular area. In the up event, delay the distribution of the onclick event of the view.

Next, find the rectangular area where the view is located, because you want to draw the ripple to this area:

After the rectangular area is found, this area is the location of the Bo wave pattern we want to draw. As mentioned above, the wave is actually a ring. To draw a circle, you need to know the center coordinates and the radius of the circle. The center coordinates must be x and y when down, but how to calculate the radius properly? You can see from the above figure that if the width of the view is greater than the height, click the lower left or right corner of the view, then the radius is basically equal to the width of the view. Click the upper or lower part of the view, and the radius is between 0 and the height of the view. See the following figure for the specific calculation method:

According to the above figure, the radius should be calculated as follows:

The radius is calculated. Although the center of the circle is x and y when it is down, there is one thing to pay attention to. The X and Y coordinates of the center of the circle provided when drawing the ring are relative to the layout in this paper, so some processing is required when calculating Y:

After the center coordinates and radius of the circle are calculated, you can draw the circular ripple by writing it down. So where is it more appropriate to draw this ripple? A friend immediately said that it must have been drawn in the OnDraw method. Congratulations. In my opinion, you answered wrong. There are many childviews in our layout, and the layout is a ViewGroup. When drawing, the ViewGroup draws its own background first, then draws itself, and then draws the childview. If you draw ripples in OnDraw, This means that the childview drawn behind the designer will cover our ripples, so we should wait until the childview is drawn, so as to ensure that the childview is at the top. Override the dispatchdraw method:

In the distribution drawing event, you can see that ripples are drawn section by section, as shown in the figure below:

The corrugation of this section is realized by drawing rings one by one, so when a ring is not drawn, it is necessary to delay to redraw the next ring. The above ripple effect is basically completed, but the button has a click event. For example, 360 mobile guard or Baidu mobile guard will respond to the click event only after the ripple effect is played. Therefore, we also need to delay the response to the click event. In the up event, record the event of this event and return true, indicating that this event is consumed. Then, after the circle is drawn, use the found view to distribute the event:

In the dispatchdraw method, judge whether to post (delayedrunnable) after drawing; Execute the event delay distribution of childview.

The above is the whole content of this article. I hope it will be helpful for everyone to learn Android programming.