altinkonlineConcrete5 Xcode

Use EGOTableViewPullRefresh to add pull down to refresh functionality


Instead of clicking a button to refresh a UITableViewController, you simply pull down the UITableView and wait to see new content. It's a really intuitive way to update a UITableView and many mobile apps started to use it.

In this tutorial you would learn to use EGOTableViewPullRefresh in a Xcode project.


Start Xcode and create a new project based on the 'Empty Application' template.

Empty-Application.png

Creat a new file based on the 'UIViewController subclass' template. Give the new class a name (we use 'PDTRTableViewController') and select subclass of UITableViewController.

UIViewController.png

Open the AppDelegate.m, and import the "PDTRTableViewController.h".

// Add this line on top of your AppDelegate.m
#import "PDTRTableViewController.h"

Change the application:didFinishLaunchingWithOptions: method in your 'AppDelegate.m' with the code below. First of all create a 'PDTRTableViewController'. Then create a UINavigationController with the 'PDTRTableViewController' as the RootViewController.

Now we need to add the UINavigationController as a subview of the UIWindow.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
    // Override point for customization after application launch.
    self.window.backgroundColor = [UIColor whiteColor];
 
    PDTRTableViewController *myPDTRViewController = [[PDTRTableViewController alloc] 
                                                    initWithNibName:@"PDTRTableViewController" 
                                                    bundle:[NSBundle mainBundle]];
 
    UINavigationController *nav = [[UINavigationController alloc] 
                                   initWithRootViewController:myPDTRViewController];
 
    [[self window] addSubview:[nav view]];
 
    [self.window makeKeyAndVisible];
    return YES;
}

Download de compressed 'Pull Down To Refresh' folder from the attachments. Uncompress the downloaded .zip file. Ctrl-click in your projectfolder and add the uncompressed folder. Set the option 'Copy items into destination group's folder (if needed)' checked. Click on 'Finish'.

Add_pull_down_to_share.png


Before we could use EGOTableViewPullRefresh we need to add a framework. Add the frameworks 'QuartzCore' to your project.

Adding_Frameworks.png


After adding the required files open your 'PDTRTableViewController.h' and change your it with the code below. First of all import the 'EGORefreshTableHeaderView.h'. Then add the 'EGORefreshTableHeaderDelegate'. After that create the different needed objects.


Open your 'PDTRTableViewController.m' and synthesize the NSMutableArray tableViewItems.

#import "PDTRTableViewController.h"
 
@implementation PDTRTableViewController
 
@synthesize tableViewItems;

Now it's time to change your viewDidLoad: method in your 'PDTRTableViewController.m' with the code below. First create the NSMutableArray to hold the items for your UITableView. After that add the pull down to refresh functionality.

- (void)viewDidLoad
{
    [super viewDidLoad];
 
    [self setTableViewItems:[[NSMutableArray alloc] initWithObjects:@"altinkonline.nl", nil]];
 
    if (_refreshHeaderView == nil) {
 
		EGORefreshTableHeaderView *view = [[EGORefreshTableHeaderView alloc] 
                                           initWithFrame:CGRectMake(0.0f, 
                                                                    0.0f - self.tableView.bounds.size.height, 
                                                                    self.view.frame.size.width, 
                                                                    self.tableView.bounds.size.height)];
		view.delegate = self;
		[self.tableView addSubview:view];
		_refreshHeaderView = view;
		[view release];
 
	}
}
#import <UIKit/UIKit.h>
#import "EGORefreshTableHeaderView.h"
 
@interface PDTRTableViewController : UITableViewController <EGORefreshTableHeaderDelegate> {
    EGORefreshTableHeaderView *_refreshHeaderView;
    BOOL _reloading;
    NSMutableArray *tableViewItems;
}
 
@property (nonatomic, retain) NSMutableArray *tableViewItems;
 
- (void)reloadTableViewDataSource;
- (void)doneLoadingTableViewData;
 
@end

Customize the number of sections in the UITableView.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    // Return the number of sections.
    return 1;
}

Customize the number of rows in the current section of the UITableView.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    return [tableViewItems count];
}

Change the tableView:cellForRowAtIndexPath: with the code below.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] 
                 initWithStyle:UITableViewCellStyleDefault 
                 reuseIdentifier:CellIdentifier] autorelease];
    }
 
    // Configure the cell...
    [[cell textLabel] setText:[tableViewItems objectAtIndex:[indexPath row]]];
 
    return cell;
}

Add the code below to your 'PDTRTableViewController.m' before the @end.

#pragma mark -
#pragma mark Data Source Loading / Reloading Methods
 
- (void)reloadTableViewDataSource{
 
	//  should be calling your tableviews data source model to reload
	//  put here just for demo
	_reloading = YES;
}
 
- (void)doneLoadingTableViewData{
	//  model should call this when its done loading
	_reloading = NO;
	[_refreshHeaderView egoRefreshScrollViewDataSourceDidFinishedLoading:self.tableView];
}
 
 
#pragma mark -
#pragma mark UIScrollViewDelegate Methods
 
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{	
 
	[_refreshHeaderView egoRefreshScrollViewDidScroll:scrollView];
 
}
 
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
 
	[_refreshHeaderView egoRefreshScrollViewDidEndDragging:scrollView];
 
}
 
 
#pragma mark -
#pragma mark EGORefreshTableHeaderDelegate Methods
 
- (void)egoRefreshTableHeaderDidTriggerRefresh:(EGORefreshTableHeaderView*)view{
 
	[self performSelectorOnMainThread:@selector(reloadTableViewDataSource) withObject:nil waitUntilDone:NO];
 
}
 
- (BOOL)egoRefreshTableHeaderDataSourceIsLoading:(EGORefreshTableHeaderView*)view{
 
	return _reloading; // should return if data source model is reloading
 
}
 
- (NSDate*)egoRefreshTableHeaderDataSourceLastUpdated:(EGORefreshTableHeaderView*)view{
 
	return [NSDate date]; // should return date data source was last changed
 
}
 
@end

Change the reloadTableViewDataSource: method with the code below.

- (void)reloadTableViewDataSource{
 
	//  should be calling your tableviews data source model to reload
	//  put here just for demo
	_reloading = YES;
 
    [NSDateFormatter setDefaultFormatterBehavior:NSDateFormatterBehaviorDefault];
    NSDateFormatter *dateFormatter = [[[NSDateFormatter alloc] init] autorelease];
    [dateFormatter setDateStyle:NSDateFormatterShortStyle];
    [dateFormatter setTimeStyle:NSDateFormatterShortStyle];
 
    [[self tableViewItems] addObject:[NSString 
                                      stringWithFormat:@"%@", 
                                      [dateFormatter stringFromDate:[NSDate date]]]];
 
    [[self tableView] reloadData];
 
    [self doneLoadingTableViewData];
 
}

Now you're ready to run your project with a UITableViewController and pull down to refresh oppertunity!