Custom Selected Background Color for Grouped UITableViewCell

Question

Is there a good way to set a custom selected background color on a grouped table view cell? I don't want to make four images and keep track of which one is appropriate for which cell.

I would have used UITableViewCell's backgroundView and selectedBackgroundView properties, but they break the grouped table view style's rounded corners.

Right now, I have a UITableViewCell subclass that overrides -setHighlighted:animated: and -setSelected:animated: to toggle the cell's backgroundColor. This works perfectly, except it doesn't animate, even though backgroundColor is an animatable property, and changes to it are wrapped in calls to -beginAnimations:context: and -commitAnimations when appropriate.

Answer 1

You might want to have a look at TableDesignRevisited by Matt Gallagher. I really like the way he is constructing and managing UITableViews.

The only other solution I know for changing the selection style of grouped tableview cells is using 4 backgrounds (top, bottom, middle, top&bottom) and applying them based on the cell position in the table.

Answer 2

I designed following solution:

Subclass UITableViewCell. Define colors of background for selected and not selected cell, e.g.:

#define SELECTED_BACKGROUND_COLOR [UIColor redColor]
#define NOT_SELECTED_BACKGROUND_COLOR [UIColor whiteColor]

(You can create specially designed properties also)

Then, you have to override two methods of the UITableViewCell. I introduce also simple animation, since as @lemnar stated, backgroundColor property is not animatable. The animation could be much better, with the use of NSTimers, but this will make the code even longer.

- (void) mixBackgroundColorWithSelectedColorMultiplier:(NSNumber *)multiplier 
{
    CGFloat *selComponents = (CGFloat *) CGColorGetComponents(SELECTED_BACKGROUND_COLOR.CGColor);
    CGFloat *notSelComponents = (CGFloat *) CGColorGetComponents(NOT_SELECTED_BACKGROUND_COLOR.CGColor);

    if((CGColorGetNumberOfComponents(SELECTED_BACKGROUND_COLOR.CGColor) == 2)
    {
        selComponents[2] = selComponents[1] = selComponents[0];
    }

    if((CGColorGetNumberOfComponents(NOT_SELECTED_BACKGROUND_COLOR.CGColor) == 2)
    {
        notSelComponents[2] = notSelComponents[1] = notSelComponents[0];
    }

    CGFloat m = [multiplier floatValue];
    self.backgroundColor = [UIColor colorWithRed:(notSelComponents[0]) * (1.0 - m) + (selComponents[0]) * m
                                                                                 green:(notSelComponents[1]) * (1.0 - m) + (selComponents[1]) * m
                                                                                    blue:(notSelComponents[2]) * (1.0 - m) + (selComponents[2]) * m
                                                                                 alpha:1.0];
    [self setNeedsDisplay];
}

- (void) setSelected:(BOOL)selected animated:(BOOL)animated 
{
    if(selected) 
    {
        if(animated)
        {
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:0.2] afterDelay:0.08];
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:0.4] afterDelay:0.16];
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:0.6] afterDelay:0.24];
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:0.8] afterDelay:0.32];
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:1.0] afterDelay:0.40];
        }
        else
        {
            [self mixBackgroundColorWithSelectedColorMultiplier:[NSNumber numberWithFloat:1.0]];
        }
    }
    else
    {
        if(animated)
        {
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:0.8] afterDelay:0.08];
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:0.6] afterDelay:0.16];
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:0.4] afterDelay:0.24];
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:0.2] afterDelay:0.32];
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:0.0] afterDelay:0.40];
        }
        else
        {
            [self mixBackgroundColorWithSelectedColorMultiplier:[NSNumber numberWithFloat:0.0]];
        }
    }
    [super setSelected:selected animated:animated];
}

- (void) setHighlighted:(BOOL)highlighted animated:(BOOL)animated 
{
    if(highlighted) 
    {
        if(animated)
        {
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:0.2] afterDelay:0.08];
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:0.4] afterDelay:0.16];
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:0.6] afterDelay:0.24];
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:0.8] afterDelay:0.32];
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:1.0] afterDelay:0.40];
        }
        else
        {
            [self mixBackgroundColorWithSelectedColorMultiplier:[NSNumber numberWithFloat:1.0]];
        }
    }
    else
    {
        if(animated)
        {
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:0.8] afterDelay:0.08];
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:0.6] afterDelay:0.16];
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:0.4] afterDelay:0.24];
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:0.2] afterDelay:0.32];
            [self performSelector:@selector(mixBackgroundColorWithSelectedColorMultiplier:) withObject:[NSNumber numberWithFloat:0.0] afterDelay:0.40];
        }
        else
        {
            [self mixBackgroundColorWithSelectedColorMultiplier:[NSNumber numberWithFloat:0.0]];
        }
    }
    [super setHighlighted:highlighted animated:animated];
}