Android imitates the pull-down refresh effect of jd.com and tmall

When it comes to pull-down refresh, I believe everyone is familiar with it. Now it is used in almost every project. Our company's projects always use swiperefreshlayout, the official material design style, which is easy to use and less bugs. At present, the drop-down refresh can be implemented in the following ways: one is directly wrapped in the header of listview or recyclerview, and the other is wrapped in the outermost layer of the view like swiperefreshlayout. Personally, I suggest using the method of wrapping in the outermost layer, which has strong scalability. Next, the pull-down refresh of JD and tmall is realized by using the package on the outermost layer.

1. Use the Android ultra pull to refresh framework

https://github.com/liaohuqiu/android-Ultra-Pull-To-Refresh

If you are interested, you can take a look at this drop-down refresh framework, which is very extensible and compatible with various view drop-down refresh events.

2. JD pull-down refresh

Let's take a look at JD's pull-down refresh Animation:

As can be seen from the above figure, it is an animation. Of course, the screenshot is a little stuck. First, we unzip the app of JD mobile phone and get the above picture:

Let's first look at how to implement the layout of header refresh: JD_ refresh_ header_ view.xml

Let's take another look at the Android ultra pull to refresh framework:

This is a drop-down refresh event processing interface, including the processing of events such as ready to refresh, start refresh, refresh completion and refresh change. It can be directly applied to the code: jdrefreshheader.java

Create a member variable mState to save each state during pull-down refresh, and then modify the UI according to the saved state in the uipositionchange interface to save the prompt of each state text. During the pull-down process, get the percentage of pull-down in ptrindicator through the callback of uipositionchange, According to this percentage, we can do many things. For example, JD's express brother runs from a distance to get goods, and the size ratio between express brother and goods can be set according to this ptrindicator percentage. In this process, I use marginright to set the distance between them, When the critical point of pull-down refresh is reached, the margin between the express brother and the commodity is 0, which achieves the effect that the express brother obtains the commodity. Then, when the refresh is performed, the commodity is hidden and the effect is switched by using the three pictures provided before, that is, animation:

The renderings are as follows:

3. Tmall pull-down refresh

Tmall's is simpler and has no animation. To put it bluntly, it's a GIF. You can download an APK and get its GIF after decompression. The principle is the same as before, but here I use fresco to load GIF. There are many methods. You can try if you are interested.

TmallRefreshHeader.java

The renderings are as follows:

Finally, attach GitHub address: https://github.com/shineflower/JdTmallPullToRefresh

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.