Added shadow for UIImageView on UITableView, killing performance ... why?

Question

I have a UITableView that has three UIImageView per cell, while three cells are displayed on the screen (a total of nine UIImageView views). Think of it like a bookshelf. Sometimes I can have as many as 500 books.

I added a shadow to the UIImageView with this code:

 UIImageView *itemImageView = [[UIImageView alloc] initWithFrame:CGRectMake(25, 7, 65, 75)]; itemImageView.contentMode = UIViewContentModeScaleAspectFit; itemImageView.tag = 6; itemImageView.layer.shadowColor = [UIColor blackColor].CGColor; itemImageView.layer.shadowOffset = CGSizeMake(3, -1); itemImageView.layer.shadowOpacity = 0.7; itemImageView.layer.shadowRadius = 3.0; itemImageView.clipsToBounds = NO; [cell.contentView addSubview:itemImageView]; 

When I add the shadow code, as seen above, the scroll performance is just completely killed and becomes volatile. Each image has a different Rect , so a shadow should be created for each element when it scrolls. Anyone have any tips on adding shadows to my images on a UITableView without this problem?

Answer 1

You can see the performance improvement if you add

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

But in general, operations with such layers will kill performance in the form of a table. I experienced the exact same problem and we simply ruled out the shadow effect. It wasn’t worth it.

Answer 2

You should watch WWDC's CoreAnimation best practices videos. You can request caching a rasterized copy of the shadow in memory. Cocoa is definitely fast enough to render these shadows on the fly, without returning to a pre-rendered image.

Example:

 itemImageView.layer.shouldRasterize = YES; 

I also raised a question about UIBezierPath. This is also mentioned in best practices, but setting the CALayer shadow path is a huge performance boost. You can also create interesting effects by manipulating the shadow path.

Answer 3

Shadows are expensive and will kill your productivity.

The best approach is to display the shaded image in the background, cache / save it and display on the screen when it is ready.

Edit: you want to look at Core Graphics / CGImage programs. In particular, CGContextSetShadowWithColor will draw a shadow.

http://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CGContext/Reference/reference.html

Answer 4

Do you activate reuse? If not, the cells will be redone every time the view changes (for example, during scrolling). It certainly eats up a lot of work.

Answer 5

Check my question: The application is slow due to UIImageViews

I would use this code:

 imageView.layer.masksToBounds = NO; UIBezierPath *path = [UIBezierPath imageView.bounds]; imageView.layer.shadowPath = path.CGPath; 

Answer 6

I have the same problem with adding shadow for labels inside tableviewcell. I tried to compose the elements inside cellForRowAtIndexPath when the cell was created:

 if(cell == nil){ //layout cell 

They optimized scrolling a bit, but its pretty choppy.

To optimize image quality, you should also add rasterization if you activated "shouldRasterize":

 aLabel.layer.shouldRasterize = YES; aLabel.layer.rasterizationScale = [[UIScreen mainScreen] scale]; 

Maybe someone has ideas on how to optimize the code to get a normal iOS scroll. THX