IOS Component: Pull Down to Refresh Table Content

On November 23, 2012, in iPhone iPad Object-C, by James Liu

In this IOS component tutorial, I will introduce how to implement pull down to refresh feature in UITableView. It is not that complicated if you have seen how we add pull down to refresh feature in UIScrollView. Technically, UITableView is the subclass of UIScrollView. Therefore, the method will be the same.

Pull Down and Refresh in UITableViewController

In the following example, we will create an empty IOS project, which only has a UITableViewController. Different from UIScrollView, the UITableViewController implement the <UIScrollViewDelegate&bt; and set self as the tableView’s delegate. Because the tableView is the sub-class of UIScrollView, we can treat tabelView in UITableViewController as UIScrollView which has a table layout feature.

Another different in UITableViewController is that we can directly create all the refresh view such as drag down arrow and update text label in the viewDidLoad function, instead of adding customized function. The whole function implementation will look like:

- (void)viewDidLoad
    [super viewDidLoad];

    //data for table to generate table cell
    exampleData = [NSMutableArray array];
    [exampleData addObject:@"Drag Down to Get More Data"];
    //refresh UI    
    refreshView = [[UIView alloc] initWithFrame:CGRectMake(0, 0 - REFHEIGHT, 320, REFHEIGHT)];
    refreshLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, REFHEIGHT)];
    refreshLabel.textAlignment = UITextAlignmentCenter;
    refreshLabel.text = PULL_DOWN_REFRESH;
    refreshArrow = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"arrow.png"]];
    refreshArrow.frame = CGRectMake(17, 9, 27, 44);
    refreshLoadingIcon = [[UIActivityIndicatorView alloc] init];
    refreshLoadingIcon.frame = CGRectMake(20, 20, 20, 20);
    refreshLoadingIcon.activityIndicatorViewStyle = UIActivityIndicatorViewStyleGray;
    refreshLoadingIcon.hidesWhenStopped = YES;
    refreshDateLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 40, 320, 21)];
    refreshDateLabel.textColor = [UIColor darkGrayColor];
    refreshDateLabel.font = [UIFont systemFontOfSize:10];
    refreshDateLabel.textAlignment = UITextAlignmentCenter;
    if (latestUpdateDate != nil) {
        [refreshDateLabel setText:[NSString stringWithFormat:@"%@%@", REFRESH_DATE_PREFIX, latestUpdateDate]];
    [refreshView addSubview:refreshLabel];
    [refreshView addSubview:refreshLoadingIcon];
    [refreshView addSubview:refreshDateLabel];
    [refreshView addSubview:refreshArrow];
    [self.tableView addSubview:refreshView];
    isLoading = false;

After we create all the images and text, the next job is to rewrite the UITableViewController functions to generate the table content and rewrite the UIScrollViewDelegate functions to create the drag to fresh feature.

  • – (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
  • – (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
  • – (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
  • -(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
  • -(void)scrollViewDidScroll:(UIScrollView *)myscrollView
  • -(void)scrollViewDidEndDragging:(UIScrollView *)myscrollView willDecelerate:(BOOL)decelerate

Add Pull Down to Refresh to TableView

Instead of UITableViewController, UITableView can be used in more scenarios. Because of the different of UITableView and UITableViewController, we need to make some changes basing on the above example. For example, the UITableView doesn’t implement the protocols such as UITableViewDataSource, UITableViewDelegate which conforms to UIScrollViewDelegate. So we need to implement both of them explicitly, then set the UITableView’s delegate to itself.

    [self setDelegate:self];
    [self setDataSource:self];

After that, the rest of the works will be the same as what we did in UITableViewController.

Example and Source Code

You can download the pull down to refresh tablet content example source code to try.

Tagged with:  

Leave a Reply

Free WordPress Themes

WordPress Themes