The pull down to refresh effect is widely used in many famous iPhone and iPad Apps. Both Facebook and twitter are using this way to let their users update coming news. It becomes to be the most common way to refresh data. This iPhone app tutorial will guide Object-C programmers to add the pull down to refresh feature in UIScrollView, UITableView, and UITableViewController. In IOS Object-C, UITableView inherits from UIScrollView. Therefore, it is the same concept to add pull down to refresh in UIScrollView and UITableView.

Pull Down Refresh ScrollView Component

To add pull down to refresh feature in UIScrollView, we will create a class named PullDownRefreshScrollView, which inherits from UIScrollView and implement the protocol <UIScrollViewDelegate>. In PullDownRefreshScrollView, we need to set the scrollview delegate to itself. At the mean time, we create all the drag down arrow and text in the same function. Because UIScrollView is simple view, we add a public function to handle all the works.

- (void) initPushLoadingView
{
    [self setDelegate:self];
    
    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 addSubview:refreshView];
    
    isLoading = false;
}

After that, we need to override several UIScrollViewDelegate functions. There are:

• -(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
• -(void)scrollViewDidScroll:(UIScrollView *)myscrollView
• -(void)scrollViewDidEndDragging:(UIScrollView *)myscrollView willDecelerate:(BOOL)decelerate

In these three functions, we will customize our view behaviors when user is tending to drag the scrollview, dragging the scrollview or finishing dragging the scrollview.

-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
NSLog(@”scroll View Begin Dragging”);
isDraging = true;
}

-(void)scrollViewDidScroll:(UIScrollView *)myscrollView
{
NSLog(@”scroll view scroll: %f”, myscrollView.contentOffset.y);

if(!isLoading)
{
if (isDraging && myscrollView.contentOffset.y < 0 - REFHEIGHT) { //change the text and make arrow animation [UIView animateWithDuration:0.25 animations:^{ refreshLabel.text = RELEASE_REFRESH; CALayer *layer = refreshArrow.layer; layer.transform = CATransform3DMakeRotation(M_PI, 0, 0, 1); }]; } else { //change the text and make arrow animation back [UIView animateWithDuration:0.25 animations:^{ refreshLabel.text = PULL_DOWN_REFRESH; [refreshArrow layer].transform = CATransform3DMakeRotation(M_PI * 2, 0, 0, 1); }]; } } } -(void)scrollViewDidEndDragging:(UIScrollView *)myscrollView willDecelerate:(BOOL)decelerate { isDraging = false; if (myscrollView.contentOffset.y < 0 - REFHEIGHT) { //start to loading and set the loading text still [UIView animateWithDuration:0.5 animations:^{ self.contentInset = UIEdgeInsetsMake(REFHEIGHT, 0, 0, 0); }]; refreshLabel.text = LOADING; isLoading = true; [refreshLoadingIcon startAnimating]; [refreshArrow setHidden:YES]; //set a timer to stop the loading, this is usually replace by real loading progress, http loading for example. [self performSelector:@selector(stopLoading) withObject:nil afterDelay:2.0]; } } [/java]

How to Solve Undefined Symbols Compiling Error

When you add this free IOS component in your apps, you may get the following error to cause your project building failed.

Undefined symbols for architecture armv7:
“_CATransform3DMakeRotation”,

To solve the above error, you need to add QuartzCore Framework to linked libraries.

Pull Down Refresh IOS Components Source Code

Here is the source code and example for Pull down refresh IOS component. The source code is tested in Xcode 4.2 with IOS 5 SDK.