adding shadow to cell causes laggy scrolling

Question

So I have a UIView which has a shadow:

[containerFrame.layer setShadowOffset:CGSizeMake(0, 1)];
[containerFrame.layer setShadowRadius:4.0];
[containerFrame.layer setShadowColor:[UIColor colorWithRed:34/255.f green:25/255.f blue:25/255.f alpha:1.0].CGColor];
[containerFrame.layer setShadowOpacity:0.4];

with this in place, my scrolling FPS drops to 20-30. Remove the shadow and then boom, my FPS is back to 60 and scrolling is as smooth as butter. Now the question is I need ti have a shadow effect around this box/container view. How do I achieve this without slowing down scrolling?

Michael Robinson · Accepted Answer · 2012-07-31T05:05:08.223

16

Try setting the shadow path:

[containerFrame.layer setShadowOffset:CGSizeMake(0, 1)];
[containerFrame.layer setShadowRadius:4.0];
[containerFrame.layer setShadowColor:[UIColor colorWithRed:34/255.f green:25/255.f blue:25/255.f alpha:1.0].CGColor];
[containerFrame.layer setShadowOpacity:0.4];

// New line
[containerFrame.layer setShadowPath:[UIBezierPath bezierPathWithRect:containerFrame.bounds].CGPath];

If you have to animate this view (and especially if it’s part of a UITableViewCell) you will probably notice stutters in the animation. This is because calculating the drop shadow for your view requires Core Animation to do an offscreen rendering pass to determine the exact shape of your view in order to figure out how to render its drop shadow. (Remember, your view could be any complex shape, possibly even with holes in it.)

From On the importance of setting shadowPath.

edited Jul 31 '12 at 05:05

answered Jul 31 '12 at 04:58

Michael Robinson

29,278
12
104
130

how do I set the radius and stuff with a path? – aherlambang Jul 31 '12 at 04:59
I am not seeing my shadow after adding that line – aherlambang Jul 31 '12 at 05:03
@aherlambang there was a bug in my paste - use `containerFrame.bounds` instead of `self.bounds` at the end of my inserted line. – Michael Robinson Jul 31 '12 at 05:05
Got it! So which is actually faster using rasterize or using shadowPath? – aherlambang Jul 31 '12 at 05:07
nice! just adding the shadowpath and now scrolling works like a charm! thanks – MRD Oct 25 '12 at 10:03
@MichaelRobinson its wokring . but my app supported in both orienation and UIBezierPath shadow is not working properly when orientation change. Please suggest me to resolved this. – Hitarth Feb 09 '13 at 07:28
@Coder you'd get the best results by opening a question on this site! – Michael Robinson Feb 09 '13 at 09:11
orientation changes cause a `UIView` animation, but `shadowPath` is not animatable by the normal `UIView` animation. To animate `shadowPath` you must use a `CABasicAnimation` on the layer, see [this question](http://stackoverflow.com/q/5924734/1693173). – progrmr Jul 01 '14 at 16:51

score 1 · Answer 2 · answered Jul 31 '12 at 04:59

1

Set containerFrame.layer.shouldRasterize = YES; The reason it slows down is because calculating the shadow is expensive. Rasterizing will collapse the view into an image so it will be much quicker.

answered Jul 31 '12 at 04:59

borrrden

33,256
8
74
109

I tried rasterizing it.. but it's not as fast as I wanted, it is faster – aherlambang Jul 31 '12 at 05:00
3

Too fast? Is that seriously what you mean? – borrrden Jul 31 '12 at 05:04
so which one is better, using shadowPath or using rasterize? – aherlambang Jul 31 '12 at 05:08
2

It depends on your situation. If your view changes a lot, use shadow path, if your view is static use rasterize. There is no need to keep the views separate for rendering if the view's appearance doesn't change often. – borrrden Jul 31 '12 at 05:08

adding shadow to cell causes laggy scrolling

2 Answers2