Clear answer on how to Mask a UIView as a UITableViewCell selectedBackgroundView

Question

I've read and tried a few answers I have found on StackOverflow. I've also read and tried a few things from blogs, but nothing seems to accomplish what I am looking for.

I create a UIView and set it's background color to my desired UITableViewCell selection color (instead of the standard blue or gray selection colors). I add this UIView to my cell's selectedBackgroundView and this works fine, my cell changes to the desired color on user selection.

This method works great on Plain UITableViews; not so well on Grouped. On a grouped UITableView, the 1st and last cell do not conform to clip / mask bounds as demonstrated in the below screenshots.

I know there is no way to round just the top-left and top-right corners only.

I want to do this strictly by code, without images.

Question

Does anyone know of a nice little work around to change the selectedBackgroundView color of a UITableViewCell using only the UIView and not images AND to make the 1st and last cell conform to the rounded corner boundaries?

Example

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString * CellIdentifier = @"Cell";
    WCSBadgedCell   * cell = [[WCSBadgedCell alloc] initWithStyle:UITableViewCellStyleSubtitle andBadgeStyle:0 reuseIdentifier:CellIdentifier]; 
    if (cell == nil) {
        cell = [[WCSBadgedCell alloc] initWithStyle:UITableViewCellStyleDefault andBadgeStyle:0 reuseIdentifier:CellIdentifier];
    }

    UIView *bgColorView = [[UIView alloc] init];
    [bgColorView setBackgroundColor:DARKBROWN];
    [bgColorView setClipsToBounds: YES];
    [cell.layer setMasksToBounds:YES];
    [cell setSelectedBackgroundView:bgColorView];

    [cell.textLabel setText: @"Testing a Cell"];

    return cell;
}

Screenshots

enter image description here

Solution

I Accepted CodaFis answer because he added a comment which pointed to a pretty nice (yet lengthy) solution. I had to do quite a bit of revamping, but in the end, I now have the selectedBackgroundView's I needed which round the corners on the 1st and last cells, thanks again!

Here is a n example of how I achieved this.

I marked it as such because there are a ton of people who don't know a lot about this site who have the same question. But you're right, thanks. — WrightsCS, Apr 19 '12 at 17:15

CodaFi · Accepted Answer · 2012-04-18T23:48:34.417

I assume that you are using a UITableViewCell subclass because of the complexity of your cell. This is how I've been doing it:

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    if ((self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]))
    {
        self.clipsToBounds = YES;

        UIView* bgView = [[UIView alloc] init];
        bgView.backgroundColor = [UIColor colorWithWhite:0.f alpha:0.25f];
        self.selectedBackgroundView = bgView;
                //other code

    }
    return self;
}

This produces a sort of dark grey overlay on the cell, not images required!

In your case, the exact color of your selected cell (thanks to the handy dandy Digital Color Meter) would be

[UIColor colorWithRed:106.0f/255.0f green:51.0f/255.0f blue:6.0f/255.0f alpha:1.0f];

and the white text would be

- (void)setSelected:(BOOL)sel animated:(BOOL)animated
{
    [super setSelected:sel animated:animated];

    if (sel)
    {
        self.textLabel.textColor = [UIColor whiteColor];

        }
    else
    {
        self.textLabel.textColor = [UIColor colorWithRed:(105.f/255.f) green:(50.f/255.f) blue:(6.f/255.f) alpha:1.f];  

    }
}

That answer seems to work somewhat, I suppose I can work off of that. The only issue I a have with the code in that link is the selection thinks its always on the first cell, so the mask is always a '1st cell mask". — WrightsCS, Apr 19 '12 at 00:05

ZeCodea · Answer 2 · 2012-12-12T18:58:30.883

I had the same problem, and fixed it by overriding -(void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated in my UITableViewCell subclass and setting no selection style when creating the cell

//set no selection style in the cell
...
[self setSelectionStyle:UITableViewCellSelectionStyleNone];
...

//override setHighlighted to manually set the regular/highlighted background colors
-(void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated {
    [super setHighlighted:highlighted animated:animated];
    if(highlighted){
        self.backgroundColor = [UIColor greenColor];
    }
    else {
        self.backgroundColor = [UIColor redColor];
    }
}

Clear answer on how to Mask a UIView as a UITableViewCell selectedBackgroundView

Question

Example

Screenshots

Solution

2 Answers2

Linked