iOS pull-down refresh

UITableView: drop-down refresh and pull-up load more-Cdiggertime 2013-11-24 02:00:00 Blog Park essence Area Original http://www.cnblogs.com/lexingyu/p/3439707.html ThemeUITableView

"Reprint Please specify the source"

This article describes the implementation mechanism that allows Uiscrollview to support "pull-down refresh" and "pull-up loading more", and implements an available TableView subclass, which is described mainly as "drop-down refresh" below.

Project address at the bottom of the post, just need code straight pull to the end.

1, Contentinset and drop-down refresh

Contentinset is the Uiscrollview property that describes the inner margin of the content view of the Uiscrollview, with the official documentation visible:

Scroll View Programming Guide for IOS

Almost all of the third-party libraries that are currently "dropdown-refreshed" are dependent on it for implementation.

To facilitate discussion, the view displayed when the drop-down refresh/pull-up loads is called the refresh panel, such as "

There are 4 steps in the process of swiping the user's finger down to the final update interface:

(1) With the user pull down gradually display the uitableview top of the refresh panel;

(2a) The dropdown reaches the preset position, the status text changes to "release can be refreshed";

(2b) The dropdown does not reach the preset position, the user finger leaves the screen, ScrollView bounces back, the refresh panel is hidden again and ends.

(3) The user finger leaves the screen and the refresh panel remains displayed. The status text becomes "Loaded" and the update data is performed in the background;

(4) Data update complete, return to main thread, re-hide Refresh panel, end.

You can see that if you do not consider the refresh time, state text, and so on, the implementation of "pull refresh" actually only need to do 2 things:

(1) Hide Refresh Panel (initial and after refresh)

Hide the refresh panel, even if it is above and not visible on the UITableView, as follows

 1-(void) Adddragheaderview2 {3 if ( Self.shouldshowdragheader &&!dragheaderview) 4 {5 cgrect frame = cgrectmake (0,- Self.dragheaderheight, 6 self.bounds.size.width, self.dragheaderheight); 7 Dragheaderview = [[pull2refreshview alloc] 8 span class= "symbol" >initwithframe:frame type:kpull2refreshviewtypeheader]; 9 [self addsubview:dragheaderview]; }11}            

Note : You should not use UITableView's Tableheaderview as the Refresh panel, which will cause the dropdown refreshes and custom Tableheaderview to coexist. The content view of UITableView is contained in the Tableheaderview, i.e.

TableView.contentSize.height = = TableView.tableHeaderView.height

+ N * sectionheaderview.height

+ M * Cell.height

+ TableView.tableFooterView.height

So you want to make tableheaderview default invisible, you need to modify the initial value of the Contentoffset and control the sliding range when the user slides, very troublesome. 】

(2) Show Refresh Panel

When the user's finger drop reaches the preset value and leaves the screen, modify the contentinset immediately so that the refresh panel remains displayed, as follows

1-(void) scrollviewdidenddragging: (Uiscrollview *) ScrollView willdecelerate: (BOOL) decelerate2 {3          if (Scrollview.contentoffset.y <-10.0f4 {// Keep refresh panel displayed Self.contentinset = Uiedgeinsetsmake (0);  7}8}          

So, it's clear how the Refresh panel will be hidden again after updating the data.

1 Self.contentinset = Uiedgeinsetszero;

2, animation, dynamic text and Refresh time

A standard refresh panel (such as Sina Weibo) that contains indicator arrows, loaded chrysanthemums, status text, and update time four parts, as follows

3     UILabel     9 pull2refreshviewtype refreshtype;  Ten} 

In 1 has done the Refresh panel display of the hidden, 2 only need to change the refresh panel at the appropriate time to display content.

(1) "drop-down can Refresh", "Release immediate update"

In the uiscrollview of the delegate function Scrollviewdidscroll: the degree of detection of the user dropdown, reached the preset value after the change state, as follows:

 1-(void) Scrollviewdidscroll: (Uiscrollview *) ScrollView2 {3// pull enough distance to change state to "loosen ...." 4 if (self.shouldshowdragheader && Dragheaderview) 5 {6 if (dragheaderview.state = = Kpull2refreshviewstatedragtorefresh 7 && scrollview.contentoffset.y <-self.dragheaderheight-10.F 8 &&! headerrefreshing 9 &&!footerrefreshing) 10 { 11 [Dragheaderview Flipimageanimated:yes]; 12 [Dragheaderview Setstate:kpull2refreshviewstateloosetorefresh]; 13} 14} 15}              

Modify indicates that the arrow direction is up, and modify the status text to "release immediate refresh" in SetState.

(2) "Release immediate refresh", "Load in ..."
In the Uiscrollview delegate function Scrollviewdidenddragging:willdecelerate: detects when the user's finger leaves the screen:

 1-(void) scrollviewdidenddragging: (Uiscrollview *) ScrollView willdecelerate: (BOOL) decelerate2 {3// pull enough distance, release, state changed to "load ..." 4 if (dragheaderview.state = = Kpull2refreshviewstateloosetorefresh 5 && scrollview.contentoffset.y <-self.dragheaderheight-10.0f) 6 {7 // 8 self.contentinset = Uiedgeinsetsmake (self.dragheaderheight, 0, 0, Span class= "number" >0); 9 [Dragheaderview Flipimageanimated:yes]; 10 [Dragheaderview setstate:kpull2refreshviewstaterefreshing]; 11} 12}              

When the change direction arrows are added in the SetState, the status text is modified to "load ...".

(3) "Loading ..." and "drop-down can be refreshed"
This step needs to be judged by the external (usually Viewcontroller) when executed, providing a method for external invocation, as follows:

 1-(void) Completedragrefresh2 { 3 [UIView beginanimations:nil context:NULL]; 4 [UIView setanimationduration:0.3f]; 5 self.contentinset = Uiedgeinsetszero; 6 [UIView commitanimations]; 7 8 [Dragview flipimageanimated:NO]; 9 [Dragview Setstate:kpull2refreshviewstatedragtorefresh];  Ten}                   

Indicates that the arrow direction and status text revert to the original state, and the update time becomes the current time.

3. Other
(1) "Dropdown refresh" and "pull-up load more" different
The Refresh panel for drop-down refreshes is always the same, while the refresh panel for pull-up loads will need to change as the tableview.contentsize changes. A relatively simple scenario is:

1 Tableview.tablefooterview = Dragfooterview;

In some third-party implementations this is the case, the advantage is that it is simply a single line of code, and the downside is that Tablefooterview is occupied. Considering that Tablefooterview does not need customization in the context of "pull-up loading more", it has little impact.

Another scenario is to set the frame of the refresh panel to always be in the correct position at initialization time and after the data is updated.

Also, the conditions that trigger the refresh are different. "Pull refresh", to prevent the refresh "too sensitive", you need to set a threshold to control, so only "release immediately refresh." and "Pull-load more" is triggered as the user continues to browse through the content, so just swipe to the bottom of the content to trigger the load immediately.

UITableView, as a derived class, shares a delegate property with the base class Uiscrollview, that is, Uitableviewdeleagte and uiscrollviewdelegate are specified at the same time. The problem with this is that you want to encapsulate a uitableview subclass that supports pull-down refreshes and pull-up loads more, I'm afraid I have to add a layer of delegates to move the various methods in the uitableviewdelegate to the outside for implementation, such as

1-(void) tableview: ( uitableview *) TableView didselectrowatindexpath: ( nsindexpath *) Indexpath2 {3 if (self.pulldelegate && [ Self.pulldelegate respondstoselector: @selector ( pull2refreshtableview:didselectrowatindexpath:)]) 4 {5 [self.pulldelegate  Pull2refreshtableview:self didselectrowatindexpath:indexpath];6}7}           

It's very troublesome. Have no idea of a better solution. "Mark"

4. Package Pull2refreshtableview Demo Project

Use the iOS 6.1 SDK to compile and use arc.

Address: Https://github.com/cDigger/CDPullToRefreshDemo

1. Scroll View Programming Guide for IOS

https://developer.apple.com/library/ios/documentation/windowsviews/conceptual/UIScrollView_pg/ Creatingbasicscrollviews/creatingbasicscrollviews.html

Https://github.com/samvermette/SVPullToRefresh

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{    //    scrollView == self.tableView == self.view    // 如果tableView还没有数据，就直接返回    if(self.statuses.count == 0 || self.tableView.tableFooterView.isHidden == NO) return;        CGFloat offsetY = scrollView.contentOffset.y;        // 当最后一个cell完全显示在眼前时，contentOffset的y值    CGFloat judgeOffsetY = scrollView.contentSize.height + scrollView.contentInset.bottom - scrollView.height - self.tableView.tableFooterView.height;    if(offsetY >= judgeOffsetY) { // 最后一个cell完全进入视野范围内        // 显示footer        self.tableView.tableFooterView.hidden = NO;                // 加载更多的微博数据        [self loadMoreStatus];    }}

iOS pull-down refresh