Grouped UITableView with shadow

Question

I'm trying to add a shadow behind my grouped UITableView with a custom background. It's hard. I fail. I've been experimenting with the cell layer shadow parameters, but however I do it, the shadow ends up covering another cell on one side. I just want the shadow to appear evenly outside of the outline of each section in the tableview.

If anyone has ideas on how to solve this the easiest way, it would be much appreciated!

By "outside of the outline of the tableview" do you mean each 'Grouped' section? — theraven
I tried another approach: Using custom drawing with CGContextSetShadowWithColor in a cell background view but the shadows get clipped on the tablecell's bounds. So, also no success so far. — alexleutgoeb

eliego eliego · Accepted Answer · 2011-09-01T18:41:01

For future reference; in the end, I solved it by using a custom UITableView subclass which added a empty but shadowed layer in its layoutSubviews method:

ShadowTableView.h:

@interface ShadowTableView : UITableView {
    CALayer *shadowLayer;
}

@end

ShadowTableView.m:

#import "ShadowTableView.h"
#import <QuartzCore/QuartzCore.h>

@implementation ShadowTableView

- (id)initWithFrame:(CGRect)frame style:(UITableViewStyle)style {
    self = [super initWithFrame:frame style:style];
    if (self) {
        shadowLayer = [[CALayer alloc] init];

        shadowLayer.backgroundColor = [kCellBgColor CGColor];
        shadowLayer.cornerRadius = 10.0;
        shadowLayer.shadowOpacity = 1.6;
        shadowLayer.shadowOffset = CGSizeMake(0, 3);
        shadowLayer.shadowColor = [[UIColor blackColor] CGColor];
        shadowLayer.shadowRadius = 8.0;
    }
    return self;
}

- (void)dealloc {
    [shadowLayer release];

    [super dealloc];
}

- (void)layoutSubviews {
    [super layoutSubviews];

    if (!shadowLayer.superlayer) {
        [self.layer insertSublayer:shadowLayer atIndex:0];
    }

    shadowLayer.frame = CGRectMake(10.0, 10.0, 300.0,
        self.rowHeight * [self.dataSource tableView:self numberOfRowsInSection:0] + 1);
}

@end

Grouped UITableView with shadow

1 Answers