Custom Grouped Cell Tutorial

UITableView has Plain and Grouped style. When you use grouped style top cell will have upper corners rounded, middle cell don’t have any of corners rounded and bottom cell have lower corners rounded. I’ll show you how to customize UITableView grouped look, so you’ll need 3 cell images: top, middle and bottom image. You’ll also need fourth image in case there is only one cell in section, but you can easily add this by yourself later.

Images I use you can download from this link.

Create some new project, add UITableViewController and define Grouped style for UITableView in Attributes inspector. In my project I also defined background color “Ocean” for table view.

After you define how many sections and rows there will be in table view, set up cells in cellForRowAtIndexPath method. I use UITableViewCell with default style: UITableViewCellStyleDefault. Set text label background color to clear color, set alignment to center, text color to white and set selection style to none.

// text label transparent background
 cell.textLabel.backgroundColor = [UIColor clearColor];
 // text alignment center
 cell.textLabel.textAlignment = UITextAlignmentCenter;
 // text color white
 cell.textLabel.textColor = [UIColor whiteColor];
 // cell selection style none
 cell.selectionStyle = UITableViewCellSelectionStyleNone;

For each cell define some text to display:

cell.textLabel.text = @"cell text".

Images I use have height 50 pixels and heightForRowAtIndexPath method should return same height. When you set up some other images don’t forget to change this value if those images will have different height.

-(CGFloat)tableView:(UITableView *)tableView
 heightForRowAtIndexPath:(NSIndexPath *)indexPath
 {
 // row height
 return 50.0f;
 }

Now we need to check is our cell first in section, last in section or some cell in between and based on that we’ll display corresponding image. We’ll check this in willDisplayCell method. First cell check is easy: it’ll have indexPath.row equal to zero. To check is it last cell we need to compare current indexPath.row with number of rows in current section subtracted by one. All other cells are in between of first and last cell.

-(void)tableView:(UITableView *)tableView
 willDisplayCell:(UITableViewCell *)cell
 forRowAtIndexPath:(NSIndexPath *)indexPath
 {
 // cell background image view
 UIImageView *background;

// first cell check
 if (indexPath.row == 0) {
 background = [[UIImageView alloc] initWithImage:
 [UIImage imageNamed:@"top-cell.png"]];
 // last cell check
 } else if (indexPath.row ==
 [tableView numberOfRowsInSection:indexPath.section] - 1) {
 background = [[UIImageView alloc] initWithImage:
 [UIImage imageNamed:@"bottom-cell.png"]];
 // middle cells
 } else {
 background = [[UIImageView alloc] initWithImage:
 [UIImage imageNamed:@"middle-cell.png"]];
 }
 // set background view
 [cell setBackgroundView:background];
 // release image view
 [background release];
 }

Final result will look like this:

If there is only one cell in section we’ll need to show forth image that will, in this case, have upper left and lower right corner rounded. You can now easily check is there only cell in willDisplayCell method using [tableView numberOfRowsInSection:indexPath.section] value.

Thanks for reading!