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

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.

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’.

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.

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.

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;

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"]];
}

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;
}

Run the application and you will see the change in 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: 41% [?]