Question

After use UITableView Style Grouped, it have a problem when use selectedBackgroundView with custom color.

it draw outside of there UITableViewCell.
Is it possible to clip them in bound ?

Answer 1

I had similar problems and didn’t find any simple and easy method to solve. I maked category for UIImage and used several images for catch all cases.

• single_cell_bg.png – image with all rounded corners
• top_cell_bg – image with rounded top corners
• …..

not so elegant but working

@interface UIImage (CellBacground)
- (UIImage *)backgroundCellViewforRow:(NSInteger)row totalRow:(NSInteger)total;
@end



#import "UIImage+CellBacground.h"

@implementation UIImage (CellBacground)

- (UIImage *)backgroundCellViewforRow:(NSInteger)row totalRow:(NSInteger)total {
    NSString *path = NULL;
    if (row == 0) {
        if(total == 1) {
            path = [[NSBundle mainBundle] pathForResource:@"single_cell_bg" ofType:@"png"];
        } else {
            path = [[NSBundle mainBundle] pathForResource:@"top_cell_bg" ofType:@"png"];
        }
    } else {
        if ((total - row) == 1) {
            path = [[NSBundle mainBundle] pathForResource:@"bottom_cell_bg" ofType:@"png"];
        } else {
            path = [[NSBundle mainBundle] pathForResource:@"middle_cell_bg" ofType:@"png"];
        }
    }
    UIImage *theImage = [[UIImage alloc] initWithContentsOfFile:path];
    UIEdgeInsets imInset = UIEdgeInsetsMake(10, 10, 10, 10);
    UIImage *strImage = [theImage resizableImageWithCapInsets:imInset];
    return strImage;
}
@end

Call in tableView:cellForRowAtIndexPath:

UIImage *backImage = [[UIImage alloc] init];
[backImage backgroundCellViewforRow:indexPath.row totalRow:[tableView numberOfRowsInSection:indexPath.section]];
UIImageView *backview = [[UIImageView alloc] initWithImage:backImage];
cell.selectedBackgroundView = backview;