Android custom view imitates the reward button function of Tiger flutter live broadcast interface

preface

As a senior basketball enthusiast, I often use the Tiger flutter app to watch the game live broadcast. Later, I noticed that two buttons were added in the lower right corner of the text live broadcast interface to send Tiger flutter coins during the live broadcast and cheer for the teams I support.

The specific effect is shown in the figure below:

Personally, I think it's fun, so I decided to implement this button myself. I won't say much nonsense. Let's see the effect first:

This effect looks similar to that of popupwindow, but I implement it by using a custom view. Let's talk about the process.

Implementation process

Firstly, from the effect of Tiger flutter, it can be seen that these two buttons float on the whole interface, so it needs to be used in combination with FrameLayout. Therefore, I let its width follow the screen size and its height is fixed according to DPI. Its actual size is as follows:

In addition, after the view is initialized, we can see that it can be divided into three parts: the background circle, the text in the circle and the number above the circle. Therefore, under normal conditions, we only need to draw these three parts in the OnDraw method. First prepare the custom attributes, brushes and initialization data in the initialization method:

After measuring the width of the view in onmeasure, calculate the center coordinates of the background circle and some related data values according to the width.

Because this involves the process of clicking the button to expand and shrink, I have defined the following states. Some operations can be performed only in a specific state.

Next, execute the OnDraw method. First look at the code:

The numbers above the circle and the text in the circle always exist in the whole process, so I put these two operations outside the switch. In the normal state, draw the circle and the first two parts of the text. Click to expand the background box to draw the expansion process and text. In the expanded state, click again to draw the contraction process and text. Of course, in the method of drawing the background box, I also need to draw the big circle continuously, The great circle also exists all the time.

Drawing method above:

Then is the processing of click events. Only when the touch point is in the large circle can the expansion or contraction operation be triggered. When clicking the small circle, an interface is provided for external calls.

The animation of expanding and shrinking is the animation of changing the width attribute of the background box. Listen to this attribute animation and redraw the whole view during the process of changing the width value. Since I have determined the radius of the large circle and the small circle and the spacing between the small circle and the background frame at the beginning, the width of the background frame has been calculated during initialization:

This process seems to pop up or shrink. In fact, every time the width value changes, all components will be redrawn. Only the size and position of text, big circle and other contents do not change. Only the width value of the background box changes, so this effect can be achieved.

Use in XML:

Used in activity:

The general implementation process is like this. It is still a little different from the original effect. I still have many defects, such as the problem of the middle position of the text, and the rotation animation of the text in the small circle when it pops up or shrinks.

summary

The above is the whole content of this article. I hope the content of this article can bring some help to Android developers. If you have any questions, you can leave a message. Thank you for your support for programming tips.