Customizable background view for UITableViewCell in grouped table view

CellBackgroundView.h

//
//  CellBackgroundView.h
//
//

#import <UIKit/UIKit.h>

typedef enum {
    CellPositionTop,
    CellPositionMiddle,
    CellPositionBottom,
    CellPositionSingle
} CellPosition;

@interface CellBackgroundView : UIView

@property(assign) CellPosition position;
@property(strong) UIColor *fillColor;
@property(strong) UIColor *borderColor;

@end

CellBackgroundView.m

//
//  CellBackgroundView.m
//
//

#import "CellBackgroundView.h"

static const CGFloat kCornerRadius = 10;

@implementation CellBackgroundView

@synthesize position, fillColor, borderColor;

- (void)drawRect:(CGRect)rect
{
    CGRect bounds = CGRectInset(self.bounds,
                                0.5 / [UIScreen mainScreen].scale,
                                0.5 / [UIScreen mainScreen].scale);
    UIBezierPath *path;
    if (position == CellPositionSingle) {
        path = [UIBezierPath bezierPathWithRoundedRect:bounds cornerRadius:kCornerRadius];
    } else if (position == CellPositionTop) {
        bounds.size.height += 1;
        path = [UIBezierPath bezierPathWithRoundedRect:bounds
                                     byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
                                           cornerRadii:CGSizeMake(kCornerRadius, kCornerRadius)];
    } else if (position == CellPositionBottom) {
        path = [UIBezierPath bezierPathWithRoundedRect:bounds
                                     byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight
                                           cornerRadii:CGSizeMake(kCornerRadius, kCornerRadius)];
    } else {
        bounds.size.height += 1;
        path = [UIBezierPath bezierPathWithRect:bounds];
    }

    [self.fillColor setFill];
    [self.borderColor setStroke];
    [path fill];
    [path stroke];
}

@end

Sample usage:

CellBackgroundView *backgroundView = [CellBackgroundView new];
cell.backgroundView = backgroundView;
backgroundView.backgroundColor = [UIColor clearColor];
backgroundView.borderColor = self.tableView.separatorColor;
backgroundView.fillColor = [UIColor colorWithWhite:137/255. alpha:1.0];

int rowsInSection = [self tableView:tableView numberOfRowsInSection:indexPath.section];
if (rowsInSection == 1) {
    backgroundView.position = CellPositingSingle;
} else {
    if (indexPath.row == 0) {
        backgroundView.position = CellPositionTop;
    } else if (indexPath.row == rowsInSection - 1) {
        backgroundView.position = CellPositionBottom;
    } else {
        backgroundView.position = CellPositionMiddle;
    }
}

Comment above has typo CellPositingSingle should be CellPositionSingle

Nice!

There is one thing missing though: [path addClip];. Sometimes you may get a black background under the corner radius, I tired a lot of things before I discovered that doing the just mentioned fixes it. I could not find an explanation why though :| And with latest XCode, there is no need to @synthesize anymore, the compiler does that for you runtime.

Still very useful today. Thanks a lot!

Thanks! This is very useful.