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!

Answer 1

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