iPhone SDK Tutorial – {Part 4} Tips for UITableView Design [Add Header, Footer, Background Images & change Design]

I am going to write series of UITableView tutorials (Video Tutorials as well). My target is to make the customized UITableView using UITableViewCell which is requested on “Request Tutorial” page. Following are the list of tutorials, which I will be posting on this blog:

1. Create a Simple UITableView [Populate UITableView With Array]
2. Navigatation in UITableView [Navigatation on UITableView using didSelectRowAtIndexPath]
3. Grouped UITableView [Using Interface builder]
4. Tips for UITableView Design [Change UITableView properties i.e background colour, accessory type, add footer and header]
5. Add, Delete & Re-order UITableView rows
6. Creating UITableView using UITableViewCell
7. Adding Pictures into your UITableView using Interface builder
8. UITableView & UITableViewCell examples and tips

[Note: If you want more tutorials on UITableView or UITableViewCell, then add a comment on "Request Tutorial" Page]

This tutorial will explain, how you can change the background of UITableView in Plain and Grouped Style. Also give you some tips how you can change the alpha, accessory type, deselect row, add pictures in header & footer and change height for header and footer of UITableView. So this tutorial will give you some tips and tricks to change UITableView design. Out put of this tutorial will look like this
Picture 1 iPhone SDK Tutorial   {Part 4} Tips for UITableView Design [Add Header, Footer, Background Images & change Design]
Picture 2 iPhone SDK Tutorial   {Part 4} Tips for UITableView Design [Add Header, Footer, Background Images & change Design]

Follow these steps to achieve the output like above:

Step 1. Open the SimpleTable project in Xcode (you can grab this code form here). I found a image from google and made few images using photoshop. Place all those images to my resources folder by dragging those to Xcode.

Picture 7 iPhone SDK Tutorial   {Part 4} Tips for UITableView Design [Add Header, Footer, Background Images & change Design]
Picture 8 iPhone SDK Tutorial   {Part 4} Tips for UITableView Design [Add Header, Footer, Background Images & change Design]

Step 2. Open SimpleTableViewController.xib file. Press cmd + shift + l (open library) and drag an ‘image view’ over UITableView. Press cmd + 3 (image inspector) and change the image x to 0, y to 0, width to 320 and height to 460. Now in Interface builder click on Layout from menu and select ‘Send to Back’.

Picture 4 iPhone SDK Tutorial   {Part 4} Tips for UITableView Design [Add Header, Footer, Background Images & change Design]
Picture 5 iPhone SDK Tutorial   {Part 4} Tips for UITableView Design [Add Header, Footer, Background Images & change Design]
Picture 6 iPhone SDK Tutorial   {Part 4} Tips for UITableView Design [Add Header, Footer, Background Images & change Design]

Step 3. Close Interface build and open Xcode. Run the application and it has no effect of the design. (All code changes will be in SimpleTableViewController.m file). Now, In SimpleTableViewController.m file, viewDidLoad method clear UITable background color by adding this line.

tblSimpleTable.backgroundColor = [UIColor clearColor];

Step 4. Run the application by pressing cmd + r and you will see a background image of UITableView.

Picture 9 iPhone SDK Tutorial   {Part 4} Tips for UITableView Design [Add Header, Footer, Background Images & change Design]

Step 5. Now I want to add a accessory type to the cell. For that you have to add a accessoryType to your cell in cellForRowAtIndexPath method. So before return cell line add the following code:

cell.accessoryType =  UITableViewCellAccessoryDisclosureIndicator;
//UITableViewCellAccessoryDetailDisclosureButton,
//UITableViewCellAccessoryCheckmark

Step 6. Run the application by pressing cmd + r and you will see accessory type added to your cell.

Picture 10 iPhone SDK Tutorial   {Part 4} Tips for UITableView Design [Add Header, Footer, Background Images & change Design]

Step 7. Now if you click on your running application in simulator, you will navigate to next view. Click on back button and you will see a selected row which you clicked before. So you want to remove the selection when user select any row in Table. Main purpose of this is to show no selection when user come back to UITableView. For that you have to add one line in didSelectRowAtIndexPath method. So add this line anywhere in this method:

[tableView deselectRowAtIndexPath:indexPath animated:YES];

Step 8. Run the application and test it. I hope that will resolve the issue. Now next step is to make background image more visible. For that you have to change the alpha of your UITableView. Add this line of code in viewDidLoad method:

tblSimpleTable.alpha = 0.9;

Picture 11 iPhone SDK Tutorial   {Part 4} Tips for UITableView Design [Add Header, Footer, Background Images & change Design]

Step 9. Last tip for this tutorial is to add images for your header and footer. For that, I already added 4 images which you can find in my code. Add the following lines in SimpleTableViewController.m file

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
return 60.0;
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{
return 60.0;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
if(section == 0)
return [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"AppleProductHeader.png"]];
else
return [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"AdobeSoftwareHeader.png"]];
}

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section{
if(section == 0)
return [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"AppleProductFooter.png"]];
else
return [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"AdobeSoftwareFooter.png"]];
}

Picture 12 iPhone SDK Tutorial   {Part 4} Tips for UITableView Design [Add Header, Footer, Background Images & change Design]

Thats it for grouped table tips. If you want to change the background color for your UITableView which has plain style. Simply change the style in interface builder like below Picture. Then change in numberOfSectionsInTableView method, so that it return 1.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}

Picture 13 iPhone SDK Tutorial   {Part 4} Tips for UITableView Design [Add Header, Footer, Background Images & change Design]

Run the application and you will see the change in design.

Picture 14 iPhone SDK Tutorial   {Part 4} Tips for UITableView Design [Add Header, Footer, Background Images & change Design]

You can grab this code from group UITableView here. For plain UITableView you can grab the code here.

You can watch the screen cast for group UITableView here.

You can watch the screen cast for plain UITableView here.

Popularity: 40% [?]

My name is Adeem M Basraa. I am a software engineer from Lahore, PK. I’ve been involved in software development for nearly 4 years, with the last 1 year focused on application development for mobile devices (iPhone & Android).

12 Comments on "iPhone SDK Tutorial – {Part 4} Tips for UITableView Design [Add Header, Footer, Background Images & change Design]"

  1. Marco says:

    That is a great tutorial, it makes it very easy to learn how to customize the UITableView.

    I have a question, how would you go about setting a background image for each row in the UITableView?

  2. uriash says:

    Very good tutorial, as always..
    In step 2, I think you forgot to add that one should choose the image name in the attributes window in order for it to display anything.

  3. uriash says:

    one more thing:
    On step 8 you need to add this:
    cell.textLabel.backgroundColor = [UIColor clearColor];
    to the cellForRowAtIndexPath method
    so cells would become transparent as the rest of the tableview.

  4. Jens Krarup says:

    Great Tutorials. Just for ease for doing the tutorial, can you post a link to the image that you used?

  5. sundeep says:

    I need a tutorial on how to upload a video on facebook and twitter.
    thankx in advance

Trackbacks for this post

  1. iPhone SDK Tutorial + Video Tutorial - {Part 3} Grouped UITableView | iPhone Diary | Tutorial
  2. iPhone SDK Tutorial + Video Tutorial - {Part 1} UITableView using NSArray | iPhone Diary | Tutorial
  3. iPhone SDK Tutorial + Video Tutorial - {Part 2} Navigation in UITableView | iPhone Diary | Tutorial
  4. Complete List of UITableView UITableViewCell Tutorials + Video Tutorials | iPhone Diary | Tips
  5. iPhone SDK Tutorial - {Part 6}: Creating custom UITableViewCell Using Interface Builder [UITableView] | iPhone Diary | Tutorial
  6. iPhone SDK Tutorial or Video Tutorial – {Part 5}: Add, Delete & Reorder UITableView Rows | iPhone SDK Tutorial for Beginners | Cydia
  7. iPhone Tutorial – {Part 7}: Adding Pictures into your table’s using Interface builder | iPhone Tutorial for Beginner | Programmer | Developer | Tips

Got something to say? Go for it!