On the form of refresh loading based on Android platform

Contact with Android development for a while, often encounter data loading form of design, now the most common is " dropdown refresh "," pull load " and " Scroll to the bottom auto -load, these are often based on the ListView,GridView , and Expandablelistview. This paper mainly discusses the design and implementation of these loading forms.

It is advisable to first understand the basic idea (a large number of map reference from the network, referring to the address at the end of the article):

? Sliding Animation Design

The picture on the left is the traditional lower drawing, and the scheme of right is popular with swiperefreshlayout.

? Effective stretching distance

Indicates that after the drop-down refresh list The first item can be allowed to pull the maximum distance, after the research open Source Library, most of the selection screen height of 1/2 as a threshold.

? Scaling Rate

In the drop down, the better experience is that the list is scrolled less quickly than the finger touch point drop-down. Because there is no strict standard, the rate ratio is 50%-80% more reasonable (The research library is listed at the end of the article).

? Data Update

Finally, the timing of data update and the choice of strategy, in the request to start the data list, refresh, and load more time to do the data update. Load policies are generally asynchronous tasks:Handler and Asynctask, with the latter being more.

There are several ways to achieve this, in two cases:

• linearlayout+padding/margin

  

, fully using the dynamic layout, with a linear layout, Header view and Footer view. the width and height are match_parent,wrap_content respectively, and the corresponding Padding is set to negative. Content View width height is match_parentrespectively. When the user slides, listen to the sliding events, change the padding value of content view, realize the drop-down, pull display. There is a clear drawback to this approach: it is not smooth enough to rely on the redraw of the view completely.

• listview+swiperefreshlayout

This approach essentially uses the Headerview and Footerview of the ListView, and the drop-down is shown by the height of the design headerview, which, in the same way, increases the height of the footerview when pulled up, This completes the response of the entire interface in form. For example, pull and end automatic loading. The load action is triggered automatically when the ListView scrolls to the bottom. At the same time, according to the user touch event judgment to determine whether to perform pull-up load more, as follows

In the Onscroll event, whether the loading condition is reached, the loading condition is also relatively simple: judging 1, whether to reach the bottom 2, is not currently in the loading State; 3. A pull-up operation is currently in progress, in which case data loading can be performed.

It is necessary to update the isloading when the data is loaded, not to indicate that the Footerview has reached the maximum height or the minimum height (both pull-up and no pull-up is complete), then it is eliminated. When the isloading has just been set to true, it is when the pull-up event has just been triggered, so the footerview needs to be added. The drop-down event is the same control mechanism for Headerview. IsLoading is a variable of control state, it is very important to transform the State in the whole process, when the situation is slightly more complicated, we need to add some other variables and state to control, also form the state machine.

?        Viewgroup+scrollerThis approach is to use a viewgroup to manage all the view that needs to be dynamically displayed, which is one of the best implementation strategies for compatibility, because Contentview can be any view:ListView、The GridView even Expandablelistview and so on. Here is the full use of the Android event distribution mechanism (tunneling, bubbling processing), for example:

? At the beginning, by scrolling, the component scrolls the distance of the Headerview height in the y-axis direction so that the Headerview is hidden away.

When the component is scrolled to the top, if the user continues to pull down, the touch event is intercepted, then the offset of the y-axis is scrolled through the scroller to achieve a gradual display of the Headerview, thus reaching the drop-down effect, which triggers the loading of more actions when the user slides to the bottom.

This strategy can abandon the Headerview, Footerview dependency on the ListView, and make the implementation more flexible.

 

some open source components introduce

• Span style= "Font-weight:bolder" >   xlistview: inherit listview
  •     handling Screen Click events
  •    controls sliding implementation
  •   headerview & Footerview
  •    override onrefresh () method
  •    overriding onloadmore () method
  • stoprefresh: stop refresh
  • stoploadmore: Stop loading more

Https://github.com/Maxwin-z/XListView-Android.git

It is worth mentioning that my favorite Tiger flapping Android client is also using the library.

Xlistview ideas are basically similar to the ListView, making full use of the Headerview and Footerview of the ListView to show dynamic changes through a high degree of adjustment. The following source code, we pull the load as an example, the pull-up operation is captured, when the last visible position is mTotalItemCount-1, the description has been pulled to the bottom of the list, deltay<0 that the user is still on the pull, The Update,update method for the height of the Footerview is +delta for height, so the delta is negative at this point, and it should be passed-delta.

Xlistview Although easy to use, but also inherited the shortcomings of the ListView: Dependent on the ListView Headerview and Footerview, can only solve the problem of the ListView, There is no support for the GridView and Expandablelistview.

• Pulltorefresh by Chris banes  
  

Pulltorefresh is a relatively classic drop-down refresh component, presumably with this classic:

Its features can be seen in Git on the author:

• Supports both pulling down from the top, and pulling up from the bottom (or even both).
• Animated scrolling for all devices.
• Over Scroll supports for devices on Android v2.3+.
• Currently works with:
  • Listview
  • Expandablelistview
  • Gridview
  • WebView
  • ScrollView
  • Horizontalscrollview
  • Viewpager
• Integrated End of List Listener for use of detecting when the user had scrolled to the bottom.
• Maven support.
• Indicators to show the user when a Pull-to-refresh is available.
• Support for listfragment!
• Lots of customisation options!

From the implementation point of view, its implementation is to use the ViewGroup to wrap the inner layer of the Contentview, through event control to show, so its support is very good. The basic idea for us to introduce the implementation method three. Specifically, the following:

• State Machine Control

• Span lang= "en-US" >mode management
  • disabled Span lang= "en-us" > (0x0)
  • pull_from_start ( 0x1)
  • pull_from_end (0x2)
  • both (0x3)
  • manual_refresh_only (0x4)

The process is controlled mainly by two variables: Mmode && Mcurrentmode,mmode represents the total support method, if the design is PUll_from_start( 0x1), indicates that the entire app only supports pull-down,BOTH(0x3) indicates pull-down support, is a total switch, after the selection can only be manually changed in the settings user. And Mcurrentmode is in the specific control branch of the current state, is the control state machine to the most critical variables. If the user is performing a pull-down operation:pull_from_start(0x1), it is possible that the Mmode user chooses BOTH(0x3) and not necessarily P Ull_from_start (0x1), Mcurrentmode is constantly changing. As in pulltorefreshbase:

In the Pulltorefreshadapterviewbase:

Mcurrentmode = (mmode! = mode.both)? MMode:Mode.PULL_FROM_START;  

• Event Distribution Control

In method Three we also mentioned that the use of ViewGroup words need to use the Android event distribution mechanism to complete the design, Pulltorefresh is the embodiment of this

Pulltorefreshbase heard the user's pull-down event, the Mcurrentmode to make changes to ensure that the state conversion is correct. Here the return value is misbeingdragged, if True indicates that onintercepttouchevent can already be processed, that is, sliding the listview.

in Pulltorefreshbase's ontouchevent () function, the last slide to the position is saved, and the Pullevent function is called.

In the Pullevent function, the user-pulled condition has been found to satisfy the sliding condition (ITEMDIMENSION<MATH.ABD (NewScrollValue)), then the application state is converted to the refresh state, and the Refresh function is enabled.

NewScrollValue and itemdimension are calculated as follows (for example, above) by calculating the distance of the slide, dividing it by the threshold friction (friction is the rate at which the start refers to the scaling, where the author is set friction to 2, That is, the list sliding rate is 50% of the user's actual sliding rate to achieve the drag effect.

When the sliding process has been found to satisfy the refresh or load condition, the return value misbeingdragged is set to False, the ListView stops blocking the pull-down event, and the processing is given to Viewgoup, which is to start sliding the whole content (inclusion Headerview, Contentview, Footerview, and so on, Headerview and Footerview here are not the ListView, but the Custom view).

• Data Update

Here's a simple list of processes:

• Android-ultra-pull-to-refresh

There is a good source parsing: http://a.codekk.com/detail/Android/Grumoon/android-Ultra-Pull-To-Refresh%20%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90

On the form of refresh loading based on Android platform