iOS and its programs is all about the looks. We’ve seen a lot of functional programmes previously. But this is iPhone that put a lot of focus on how the app presents its data. One of the ways to make your views a bit more eye-candy is adding shadows.

Let’s say we have a table view that should have elements that drop a shadow in every cell. iOS SDK helps you with that. You simply set few parameters in superview of views you would like to see dropping a shadow and voila!

c.contentView.layer.shadowColor = [[UIColor blackColor] CGColor];
c.contentView.layer.shadowOffset = CGSizeMake(0, 2);
c.contentView.layer.shadowRadius = 5.0;
c.contentView.layer.shadowOpacity = 1.0;

You add a bit of the code and it’s done.

Or is it?

As long as you test it on your simulator everything looks ok. But the moment you’ll put it on a device a new problem will pop up. Your app is loosing its smootheness! If you will – in example add a shadow on elements inside a table view, scrolling a table view will become a nightmare!

Why does that happen? Isn’t it obvious? Calculating how to drop shadow is very CPU consuming and is done every time the view renders itself. We deal with a handset that’s slower than normal, stand alone computer that has a dedicated, high-performance GPU. But there’s a quite a simple way of fixing this. You could simply prerender the shadows – set it inside of the cell – push it to the background… and that’s it! Application regains it’s smootheness.

if (!c.prerenderedBackground)
{
    // There's no prerendered background yet - so
    // We configure view for shadow (like in version above:
    c.contentView.layer.shadowColor = [[UIColor blackColor] CGColor];
    c.contentView.layer.shadowOffset = CGSizeMake(0, 2);
    c.contentView.layer.shadowRadius = 5.0;
    c.contentView.layer.shadowOpacity = 1.0;
 
    // Now - we make a "screenshot" of that view
    UIGraphicsBeginImageContextWithOptions(c.contentView.frame.size,
                                           NO, 0.0);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    [c.contentView.layer renderInContext:context];
    CGContextRestoreGState(context);
 
    UIImage *screenShot = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    c.prerenderedBackground = [[UIImageView alloc]
                                      initWithImage:screenShot];
    [c.contentView addSubview:c.prerenderedBackground];
    [c.prerenderedBackground release];
    [c.contentView sendSubviewToBack:c.prerenderedBackground];
 
    // And now - disable shadow
    c.contentView.layer.shadowOpacity = 0.0;
}

I’ve made a simple app that implements the same table in three ways: no shadow, standard shadow and prerendered shadow. If you don’t believe me it really works – test it yourself