Friday, February 22, 2013

Tutorial : Pull to Refresh ViewController

<data:blog.pageName/> - <data:blog.title/> <data:blog.pageTitle/>

Today you are going to learn about a new feature in iOS 6.0 , the Pull-to-Refresh control available for ViewControllers. The Pull to Refresh action is a common gesture for mobile apps-used by the likes of Twitter, Facebook, Tweetbot, and Sparrow for a variety of commands. iOS 6.0 SDK supports drop-down refresh feature , no longer need to use third-party code.
The best way to showcase this new control is to jump straight into code , You can find the source code here. which I used for this tutorial. 
Just add the following code inside the viewDidLoad of an ViewController where do you want actually. 


 - (void)viewDidLoad  
 {  
   [super viewDidLoad];  
   UIRefreshControl *refresh = [[UIRefreshControl alloc] init];  
   refresh.tintColor = [UIColor lightGrayColor];  
   refresh.attributedTitle = [[[NSAttributedString alloc] initWithString:@"Pull to Refresh"] autorelease];  
   [refresh addTarget:self action:@selector(refreshView:) forControlEvents:UIControlEventValueChanged];  
   self.refreshControl = refresh;  
   [refresh release];  
 } 

UIRefreshControl has to be created programmatically. You do the standard alloc and initi, set the tint color (this is optional but I wanted to show you that it can be done) and assign it to the table view controller's refreshControl property.
Run the project one more time and pull the table view down: Things


Things are looking good, But , the activity indicator never really stops !

This is because you need to respond to the valueChanged control event on the refresh control. To do this, add the few more methods as follows:
 -(void)refreshView:(UIRefreshControl *)refresh   
 {  
   if (refresh.refreshing) {  
     refresh.attributedTitle = [[[NSAttributedString alloc]initWithString:@"Refreshing data..."] autorelease];  
     [self performSelector:@selector(handleData) withObject:nil afterDelay:2];  
   }  
 }  
This refreshView() can shows the refreshing view attributes such as " Loding data" , " Refreshing data" and so on. and it will call the method for corresponding refresh viewController.
 -(void)handleData  
 {   
   NSDateFormatter *formatter = [[NSDateFormatter alloc] init];  
   [formatter setDateFormat:@"MMM d, h:mm:ss a"];  
   NSString *lastUpdated = [NSString stringWithFormat:@"Last updated on %@", [formatter stringFromDate:[NSDate date]]];  
   self.refreshControl.attributedTitle = [[[NSAttributedString alloc] initWithString:lastUpdated] autorelease];  
   self.count++;  
   [self.countArr addObject:[NSString stringWithFormat:@"%d. %@, http://iosindia.blogspot.com",self.count,[formatter stringFromDate:[NSDate date]]]];  
   [formatter release];  
   [self.refreshControl endRefreshing];  
   [self.tableView reloadData];  
 }  
this Handle data simply can refresh the View.  Here I just add lastUpdated time on tableView and reload the tableView data.  
God ahead and run the project one more time , pull the table view down and notice how the list of Last updated times are now showing on the tableView ! 



You can find the source code here.