Android uses ultra pulltorefresh to refresh the user-defined code by pull-down

In the pull-down refresh, ultra pull to refresh has always been my favorite. Here, customize a headerview style. It is slightly different from the ordinary style. Look at the renderings first

At first glance, it looks no different from the normal pull-down refresh style, but if you look carefully, you will find that the head of the pull-down is covered on the content (for simplicity, the whole layout content here is a picture). The default layout style of ptrframelayout is to place the header above the content and gradually display it from top to bottom when it is pulled down. To achieve the effect that the head covers the screen content, we need to find another way.

Scheme 1: modify the of the library file and place the display position of the headerview above the content. Since ptrframelayout itself is a ViewGroup, the style can be implemented by modifying the onlayout code

However, considering a series of problems that may lead to the drop-down refresh of the original function after the layout modification, we should give it up.

Scheme 2: without modifying the library file, the location of headerview remains unchanged, but the contents of headerview are displayed on the content. In this way, the content display of headerview goes beyond its own boundary. I heard that adding a magical code to the layout can be realized, so I tried it myself. It's really possible. Therefore, scheme 2 is selected to continue the research.

After scheme 2 is determined, the remaining steps are similar to ordinary custom headers. Customize a view to implement the callback of ptruihandler. Some pictures used

First, by observing the pull-down refresh process, you can know several states in the whole pull-down refresh process.

Status 1: when the pull-down starts, an arc is displayed at the bottom, and the Yellow villain's eyes are closed (1 picture on the left). At this time, the pull-down height is not enough to trigger the refresh operation;

State 2: pull down to the height that can trigger the refresh operation and open your eyes (2 pictures on the left);

Status 3: the action in the refresh process after releasing the hand. The action is switched and displayed by the following 5 pictures.

The drop-down refresh distance and status judgment are processed in the onuipositionchange callback method

Because you can continue to slide while waiting for the refresh, in order to refresh the normal display, the judgment of isrefresh (whether the refresh is in progress) and iscomplete (whether the refresh is complete) are added here. In addition, since the last five pictures are displayed during the last refresh, the measureheight of the control height needs to be related to the size of the later picture, but the upper and lower margins of the small yellow man in the later picture are too small, which doesn't seem to have a good visual effect. The upper and lower margins are specially increased when setting measureheight

The preparation work is ready, and the next step is to focus on the methods in OnDraw. Draw according to different states, but there is a trouble here. In the above seven pictures, the size of the little yellow man is the same, but there is a cloud background around the next five pictures, and the picture is larger than the first two. Therefore, during state switching, the drawing range of the picture needs special attention.

1. Draw arc stage, flag = 1 and 2

The arc is a second-order Bezier curve.

In the code, controly is the Y coordinate of control point P1, and the turning value indicates the distance to start drawing an arc (you can modify the value to see the effect). Here, the X coordinate of our control point is in the center of the screen (t = 0.5), and the X coordinates of P0 and P2 are also determined. Only the highest point of the Y axis of the corresponding curve needs to be obtained. Because the coordinates of P0 and P2Y axes are the same and both are measureheight, the left side of the highest point of the second-order curve is simplified as

Clip path is used to cut the canvas, so that the picture is displayed in an arc.

2. Start the refresh phase after letting go, flag = 3

Picture cycle rotation, calculate the picture position and time interval, and switch pictures regularly

But if you let go here, the arc will disappear immediately, which is not very friendly on the display. However, ptrframelayout itself has a parameter MDuration toclose, which can be understood as the time reserved for the interface to rebound to the refresh height after letting go, and the display can be optimized within this time. Here I do the animation of the arc bouncing slowly according to this time value.

Corresponding display in OnDraw

If the GIF diagram above is not clear, you can download the code and run it yourself. You can compare the two effects after commenting this part. The comparison is quite obvious.

3. Restore after refresh

4. In the initial state, it is not pulled down or the pull-down height does not reach the height of the drawn arc

Here, the whole OnDraw method is completed, in which the calculation of picture drawing and display position costs a lot of brain cells. Then add the ptrframelayout configuration to the code to use

These configuration attributes can also be written in XML, and the customization of drop-down refresh is basically completed. But don't be happy too early. When drawing an arc, the closed area is filled with color. The filling color is the color of paint. The color should be consistent with the layout color. Otherwise, try it yourself. Here, I don't set the background color for ptrframelayout, but use theme to set the color of windowbackground. There are also specific codes, so don't continue to post. Anyway, if you don't set the same, you will seem to have a bug.

Code download address: testultrapulltorefresh_ jb51.rar

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.