In one of my iPhone Apps that has a UITableView I wanted to make the background color of the UITableViewCells alternating. Having two different colors in the background of the cells help to improve the readability.
As you can see in the screenshot the odd cells are grey and the even cells are white.
The changes need to be done in the DataSource method cellForRowAtIndexPath.
- (UITableViewCell *)tableView:(UITableView *)tv cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tv dequeueReusableCellWithIdentifier:@"cell"];
if( nil == cell ) {
cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:@"cell"] autorelease];
}
Fruits *fruit = [fruits objectAtIndex:indexPath.row];
cell.textLabel.text = fruit.fruitName;
//start of important code for background color changes
cell.textLabel.backgroundColor = [UIColor clearColor];
UIView *bgColor = [cell viewWithTag:100];
if (!bgColor) {
CGRect frame = CGRectMake(0, 0, 320, 44);
bgColor = [[UIView alloc] initWithFrame:frame];
bgColor.tag = 100; //tag id to access the view later
[cell addSubview:bgColor];
[cell sendSubviewToBack:bgColor];
[bgColor release];
}
if (indexPath.row % 2 == 0){
bgColor.backgroundColor = [UIColor colorWithRed:233.0/255.0
green:233.0/255.0
blue:233.0/255.0
alpha:1.0];
} else {
bgColor.backgroundColor = [UIColor clearColor];
}
//end of important code
return cell;
}
Above is the whole method with all the additional code you need to get a white/grey background color alternation.
Lets go through the main changes in detail:
Make sure the cell text has a transparent background
cell.textLabel.backgroundColor = [UIColor clearColor];
This line makes sure your cell text has an transparent background, otherwise you end up with a result like in the screenshot below.
Create a view that holds the new background color
UIView *bgColor = [cell viewWithTag:100];
if (!bgColor) {
CGRect frame = CGRectMake(0, 0, 320, 44);
bgColor = [[UIView alloc] initWithFrame:frame];
bgColor.tag = 100; //tag id to access the view later
[cell addSubview:bgColor];
[cell sendSubviewToBack:bgColor];
[bgColor release];
}
First we check if the cell has already a view with tag id 100. If not, create a new view with the size of the cell(standard 320x44). Then the view gets add to the cell and send to the background.
If the view exists we don't need to create it again.
Set the color for odd and even cells
if (indexPath.row % 2 == 0){
bgColor.backgroundColor = [UIColor colorWithRed:233.0/255.0
green:233.0/255.0
blue:233.0/255.0
alpha:1.0];
} else {
bgColor.backgroundColor = [UIColor clearColor];
}
If the cell index is even (0, 2, 4, etc.) the background color of the background color view is set to grey. Else it is set to clear (white).
If you want it to be the other way around use:
if (indexPath.row % 2 == 0){
...
Hope that helps. Please let me know if you have any problems or questions.
