Android customized waveprogressview to meet the water ripple loading requirements

Look at the renderings first:

You can define the logo image of your project, set the maximum value of water wave color, wavelength, wave width, font size, color, progress bar and current progress value, and set the speed of ripple vibration. When a progress is set unchanged, there is an animation filling effect when it is opened (for example, the second traffic display, which is not cut out in the picture).

Source address

1. How to use

1.1 in layout documents

Add custom control:

Note: Android: background here defines the shape of the control, such as the circle and beauty above. You can use shape.xml to define the shape picture.

For example, this is a circle

You can also directly set an image for Android: background, such as:

Pay attention to transparent pixels here. In order not to deform when the picture is scaled, it is recommended that the background (whether the picture or graphics) be square.

1.2 in code

You can select the following settings:

2. Code implementation

The main knowledge used in the implementation here is user-defined view, porterduffxfermode and second-order Bezier curve. You can find some unclear ones in my blog. First, customize the waveprogressview, inherit the view, obtain the background set in the layout file in the constructor, and set a brush for drawing waves and text. 　　

Copy OnDraw method, first draw the wave on the canvas, and then draw the background (set porterduff.mode.dst_atop mode for the background brush: take the non intersection part of the upper layer and the intersection part of the lower layer). Of course, it can also be porterduff. Mode. Src_ Atop, mainly depends on the order of your painting. Finally, draw the text to form a final bitmap. Finally, draw the bitmap on the parameter canvas of OnDraw.

Cury here is the y-axis coordinate of the last wave centerline, and curmidy is the current Y-axis coordinate. In order not to produce a Caton effect when the wave rises, the 1 / 100 rise is divided into 10 times to draw. Distance is the offset of the x-axis. In order to make the water fluctuate, you must offset to the left each time you draw. 　

Each offset distance is half wave width / wave vibration velocity, because a wave has four half wave widths to form a cycle, and then return to the initial x position to start cyclic displacement. Calculate the total number of waveforms to be drawn according to the width of the view, and add one more wave to translate to the left.

Each time, draw a picture with the left point of the waveform, the right point of the waveform, the lower left corner of the view and the lower right corner of the view, and draw it on the new canvas of the same size as the view in the memory. 　

Scale the background image first, and then draw it on canvas. Here, the zoom is based on the smallest edge.

Finally, draw the text. Note that we set the brush in the initialization. In order to set the color of the text through the code, put the color and size of the set text brush in the OnDraw method.

To make the waves move, use the handler loop to call invalidate to refresh the interface. You should also open the handler loop in the constructor.

Finally, there are some functions for setting related properties.

The implementation is still relatively simple. The source code and demo are in the above address. If you have any questions, you can leave me a message. Thank you!

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.