Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Customizable background view for UITableViewCell in grouped table view
//
// 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
//
//
#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
@vgrichina

This comment has been minimized.

Copy link
Owner Author

vgrichina commented Nov 12, 2012

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;
    }
}
@vgrichina

This comment has been minimized.

Copy link
Owner Author

vgrichina commented Nov 13, 2012

Comment above has typo CellPositingSingle should be CellPositionSingle

@francesctovar

This comment has been minimized.

Copy link

francesctovar commented Jun 2, 2013

Nice!

@rolandjitsu

This comment has been minimized.

Copy link

rolandjitsu commented Dec 20, 2013

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.

@Performat

This comment has been minimized.

Copy link

Performat commented Mar 27, 2015

Still very useful today. Thanks a lot!

@susmita-fueled

This comment has been minimized.

Copy link

susmita-fueled commented Jun 24, 2016

Thanks! This is very useful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.