Implementation of Android damped drop-down refresh list

This article will introduce the implementation of the damped drop-down refresh list. Let's take a look at the preview of the effect first:

This is the drop-down status:

This is what listview looks like when it rolls back to the refresh state after the drop-down finger is released:

1. How to call

Although the rendering doesn't look good, it's mainly because the blue background is right. It doesn't matter. It's just a background. After understanding the implementation of our drop-down refresh list, you can easily modify the background to achieve the UI effect you want! Not much to say, let's talk about how to use this drop-down refresh list, which is also the goal we want to achieve when writing code.

In the above code, we can see that the use of pulltorefreshlistview is the same as that of listview on the adapter. Of course, we do not need to modify the data adapter to implement the pull-down refresh function. We can also see that the instance of pulltorrefreshlistview needs to set an onloadcallback callback, which needs to implement four methods, including:

The wheretoload method tells the pulltorefreshlistview object where to stay during pull-down refresh, specifically, the height of the blue background in the rendering in Chapter 2 above. The onload method is a callback for pull-down refresh, where the caller can implement the refresh action. The cancelload method is a callback to cancel the refresh action. The caller needs to cancel the refresh action here.

According to the above methods, we can guess that a thread or asynctask should be executed in the onload method, and what to do in the cancelload method is to cancel the thread or asynctask. Finally, there is a refreshdrawable method, which is provided to the caller to modify the background of listview. The caller can return any favorite background drawable.

After knowing how to call, we will implement the pulltorefreshlistview step by step.

2. Redraw the subview in dispatchdraw to realize the drop-down vision

The key to the implementation of pulltorrefreshlistview is to redraw the child view of the listview. Redrawing the child view of the ViewGroup is generally implemented in the dispatchdraw method. Therefore, our pulltorefreshlistview inherits from the listview class and overloads its dispatchdraw method.

The key to redrawing the subview is this Code:

Before redrawing the subview, we need to move the canvas up a distance of distancey. Why? Let's take a look at the method of drawing sub views in canvas

What does the drawchild method documentation say.

protected boolean drawChild (Canvas canvas,View child,long drawingTime)

Added in API level 1 Draw one child of this View Group. This method is responsible for getting the canvas in the right state. This includes clipping,translating so that the child's scrolled origin is at 0,and applying any animation transformations.

Parameters canvas The canvas on which to draw the child child Who to draw drawingTime The time at which draw is occurring Returns True if an invalidate() was issued

The drawchild method can draw a child view of the view group. This method needs to make the canvas in a correct state, which is

The sub view is located at the (0,0) position of the canvas through clip clipping and translate comment operations on the canvas.

What do you mean? Simply put, the drawchild method will draw the child view in the (0,0) position of the canvas, so in order to make the child view in the

For the correct position of the canvas, we need to cut and translate the canvas before redrawing. For example, there is a canvas and a child view

The child view should be drawn at the (0,0) position, so the child view presented in front of us is located at the top of the canvas, but if we will

Move the canvas up 100 pixel units, and then draw the child view in the (0,0) position, then the position of the child view in front of us will be

Located at (0100) position of canvas.

According to the above analysis, we can know that the principle of redrawing the sub view is:

When the pulltorrefreshlistview has scrolled to the top, calculate the distancey by monitoring the sliding gesture, so as to determine how much to move the canvas upward, and then redraw the sub view. The pulltorrefreshlistview can follow the sliding gesture to pull down.

3. Calculate the pull-down distance

After redrawing, all we need to do is how to calculate distancey. Our preliminary idea is to calculate according to the sliding distance. Considering that we want to achieve the damping effect, that is, as the sliding distance becomes longer, the pull-down distance of pulltorefreshlistview will become shorter and shorter. In the implementation of pulltorefreshlistview, I use exponential function to achieve this damping effect. The specific calculation is as follows:

We know that the negative exponent is a monotonic increasing function of acceleration decreasing with distance. I use the finger sliding distance to calculate the negative exponent as the reference standard for the sliding distance of pulltorrefreshlistview to achieve the damped pull-down effect.

4. Monitor the gesture, judge whether the listview enters the drop-down state, and update distancey

Further, what we want to achieve is to monitor the gesture. In pulltorefreshlistview, we process it in the ontouchevent method.

This piece of code is a little complicated, so let's parse it slowly. First, we have a lastaction variable to record what the last gesture was, an ispulling variable to record whether the current pulltorrefreshlistview is in the drop-down state, and an Istop variable to record whether the current pulltorrefreshlistview has scrolled to the top.

In the overloaded implementation of the ontouchevent method, pulltorrefreshlistview does not accept any gestures at first, and then when the user presses his finger to start the action_ During the down event, I record this action. Then, when the user slides, if the pulltorefreshlistview does not "scroll to the top", no processing will be done. On the contrary, the lastaction will be updated to action_ In the move status, update the ispulling variable, record the position of the current finger as the starting position for calculating the pull-down distance, start the pull-down refresh, and then calculate the pull-down distance of pulltorrefreshlistview during the pull-down process to redraw the sub view.

In the implementation of this gesture processing, when the user suddenly pulls the pulltorrefreshlistview up during the pull-down process, if the pulltorrefreshlistview is not in the "state of scrolling to the top", the pull-down state is reset so that:

Therefore, the response right of pulltorrefreshlistview's next sliding gesture is returned to the system. When the user knows that the pulltorrefreshlistview is pulled down to the "scroll to the top" state, the above operations are performed again to make the pulltorrefreshlistview enter the pull-down state.

5. How to judge whether the listview has scrolled to the top

Next, how do we determine whether the listview is in the "scroll to top" state? I solved this problem in onscroll of pulltorrefreshlistview.

Set an onscrolllistener callback for pulltorefreshlistview and monitor its scrolling position in its onscroll method. See the comments at a glance. I won't explain more.

6. Rollback animation after drop-down

Finally, when the pull-down ends and the finger is released, we need to execute a rollback animation for pulltorrefreshlistview. We can see in the ontouchevent method:

The startanimating method is implemented as follows:

I use valueanimator to realize this rollback animation. In the callback set for valueanimator, the three song callback methods of onloadcallback are called respectively in animation update, animation end and animation cancellation, so as to realize the pull-down refresh action of pulltorrefreshlistview. We can see that the onload method is executed in the UI thread. Therefore, if the time-consuming operation is executed in the onload method, it needs to be operated in the background thread, which corresponds to our previous analysis.

7. Improvement and problems

(1) We can modify the onload callback to a method that returns an asynchronous task object, and then pulltorrefreshlistview executes the asynchronous task after the pull-down. Therefore, we can cancel the operation directly in pulltorrefreshlistview without canceling the loading callback. This can enhance encapsulation, But compared with the current practice, the degree of freedom is not so high.

(2) Rollback animation should also be optimized. I don't know how to optimize it... If you have good ideas, you can propose them in the comment area. Thank you~

(3) The response to multi touch is not perfect when pulling down. Although it is acceptable, it can't be like the chat list of QQ client.

8. Source code

So far, I have analyzed how to implement a drop-down refresh list. The source code of pulltorrefreshlistview is as follows.

The above implementation method of Android damped drop-down refresh list is all the content shared by Xiaobian. I hope it can give you a reference and support programming tips.