Customizing Headers and Footers of a Table View in iOS7

In a plain stock Table View you can customize the header and footer by replacing these with your own custom views. In this tutorial we are going to fill the table with some sample country names and use custom UIViews to create a header and a footer of our Table View.

Update: Dec 10, 2014. The rewritten version in Swift for iOS 8 and Xcode 6 is available here.

Open Xcode and create a new Single View Application. For product name, use iOS7HeaderFooterTutorial and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices.

Go to the Storyboard and drag a Table View on top of the main view, resize the view so the status bar is still visible. The Storyboard should look like this.

Ctrl and drag from the Table View to the View Controller icon and select the dataSource outlet. Repeat this for the delegate outlet.

Next, go the the ViewController.m file and add the following property in the @interface section.

@property (nonatomic, strong) NSMutableArray *countries;

This property will contain the different countries. In ViewDidLoad , fill the array with some sample country names. Change viewDidLoad to

- (void)viewDidLoad 
[super viewDidLoad];

self.countries = [[NSMutableArray alloc] init];

NSArray *countriesInEurope = @[@"France",@"Spain",@"Germany",@"Great Britain", @"Italy", @"Portugal"];
NSDictionary *europeCountriesDict = @{@"countries" : countriesInEurope};
NSArray *countriesinAsia = @[@"Japan", @"China",@"India",@"Indonesia"];
NSDictionary *asiaCountriesDict = @{@"countries" : countriesinAsia};
NSArray *countriesinSouthAmerica = @[@"Argentinia", @"Brasil",@"Chile"];
NSDictionary *southAmericaCountriesDict = @{@"countries" : countriesinSouthAmerica};

[self.countries addObject:europeCountriesDict];
[self.countries addObject:asiaCountriesDict];
[self.countries addObject:southAmericaCountriesDict];

For each continent we create a dictionary containing an array of countries. These dictonaries are added to our countries property. Add the tableView:numberOfRowsInSection method

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section 
NSDictionary *dictionary = self.countries[section];
NSArray *array = dictionary[@"countries"];
return [array count];

For every dictionary the number of items are equal to the number of rows in a section. Next, add the numberOfSectionInTableView method

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { 
return [self.countries count];

For every dictionary in our countries property there will be a section. Next, implement the tableView:cellForRowAtIndexPath method

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
static NSString *cellIdentifier = @"cellIdentifier";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];

if (!cell)
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];

NSDictionary *dictionary = self.countries[indexPath.section];
NSArray *array = dictionary[@"countries"];
NSString *cellvalue = array[indexPath.row];

cell.textLabel.text = cellvalue;

return cell;

The textLabel of the cell will be updated with the corresponding index of the country inside the dictionary. Now it's finally time to customize our section header and footer. Implement the tableView:viewForHeaderInSection.

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
UIView *sectionHeaderView = [[UIView alloc] initWithFrame:
CGRectMake(0, 0, tableView.frame.size.width, 50.0)];
sectionHeaderView.backgroundColor = [UIColor cyanColor];

UILabel *headerLabel = [[UILabel alloc] initWithFrame:
CGRectMake(15, 15, sectionHeaderView.frame.size.width, 25.0)];

headerLabel.backgroundColor = [UIColor clearColor];
headerLabel.textAlignment = NSTextAlignmentCenter;
[headerLabel setFont:[UIFont fontWithName:@"Verdana" size:20.0]];
[sectionHeaderView addSubview:headerLabel];

switch (section) {
case 0:
headerLabel.text = @"Europe";
return sectionHeaderView;
case 1:
headerLabel.text = @"Asia";
return sectionHeaderView;
case 2:
headerLabel.text = @"South America";
return sectionHeaderView;

return sectionHeaderView;

In this method we will create a UIView with a height of 50, which contains a UILabel. We align the text to the center and change the font. According to the section, we assign the name of the continent to the Label.

For the footer view we'll need a gradient png file. You can download the file here and add it to the project. Add the following method to create the section footer view.

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
UIImage *myImage = [UIImage imageNamed:@"gradient.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:myImage];
imageView.frame = CGRectMake(10,10,1,30);

return imageView;

We create a image view containing our gradient image. The height of this image is 30 point. The only thing left to do is to adjust the height of our header and footer section. We can accomplish this using the following methods.

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section 
return 30.0f;

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
return 50.0f;

Build and Run, you should see our custom section header and footer in the Table Ciew.

You can download the source code of the iOS7HeaderFooterTutorial at the ioscreator repository on github.