CODEWITHSUNDEEP
iosobjective-cuitableviewscrollshadow
Leverin
Leverin

Reputation: 739

Shadow in UITableViewCell moving from bottom to top on scroll up

I have a UITableView with custom cells that I want to have bottom shadows / drop shadows. For that I use this code:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    static NSString *cellIdentifier = @"cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"myTableViewCell" forIndexPath:indexPath];

    cell.layer.shouldRasterize = YES;
    cell.layer.rasterizationScale = [UIScreen mainScreen].scale;
    cell.layer.shadowColor = [[UIColor blackColor] CGColor];
    cell.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
    cell.layer.shadowRadius = 1.0f;
    cell.layer.shadowOpacity = 1.0f;

    CGPathRef shadowPath = [UIBezierPath bezierPathWithRect:cell.bounds].CGPath;
    cell.layer.shadowPath = shadowPath;

    return cell;
}

When the tableview is scrolled down or hasn't been scrolled at all, the shadows look as intended: http://oi62.tinypic.com/ev1gn4.jpg

However, whenever it is scrolled up, the shadows are moved from the bottom of the cells to the top: http://oi60.tinypic.com/2r4kdjl.jpg

I suspect it has something to do with the shadows being rendered each time the tableview is scrolled, but I don't know how to solve it.

Where am I going wrong?

Thanks a lot in advance.

Upvotes: 3

Views: 2633

Answers (2)

KHellkvist
KHellkvist

Reputation: 66

First of all I would recommend not fiddeling with the cells layer in every cell. That is IF you have more than one screen full of cells, it makes the TableView scroll very un-smooth. I did the same thing but in an ImageView added to the cell and it was terrible. My solution would be to create a UIImage/UIView that contains the shadow and add that as a subview, Not very good with shadows but an easy way of getting it kindof done is this:

- (UIView*)shadowWithRect:(CGRect)rect {
    UIView* v = [[UIView alloc] initWithFrame:rect];
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = v.bounds;
    gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor], (id)[[UIColor clearColor] CGColor], nil];
    [v.layer insertSublayer:gradient atIndex:0];
    return v;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *cellIdentifier = @"shadowCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier forIndexPath:indexPath];
    [cell addSubview:[self shadowWithRect:cell.bounds]];
    return cell;
}

And maybe "save" that view in a property or something to avoid it being recreated everytime. Also don't forget to remove/not add the "shadow" more than one, or else it looks wierd.

Upvotes: 4

rmaddy
rmaddy

Reputation: 318955

You've setup the shadow to be around the entire cell. Depending on the order the cells are drawn, you will see either the top shadow or the bottom shadow. Setup the shadow so it only appears at the bottom of the cell and not the top. Play with the shadowOffset to shift the shadow down so it doesn't appear at the top of the cell. You may need to change the shadowRadius as well.

Upvotes: 2

Related Questions