Our original multimedia engine, mTropolis, didn’t support alpha. A pixel on the screen came from only one asset. But iOS supports alpha blending, so we can have translucent effects.
The idea is that the list smoothly fades out when it can be scrolled. It may be a subtle cue, but it looks better than a hard crop. (And in my opinion, looks much better than drawing a box around the list, which we usually had to do in the original.) The list above is feathered on both top and bottom.
The implementation is a UIView that embeds a UIScrollView, and sets a layer mask. It’s the scroll view’s delegate, and changes the mask so there’s no feathering if the view can’t scroll in a particular direction. Here’s what one of the key methods looks like:
if (fMaskStyle == kFeatherTop)
fMaskStyle = kFeatherTop;
// Set up a mask to fade just top
CAGradientLayer* gradientMask = [CAGradientLayer layer];
gradientMask.bounds = self.layer.bounds;
gradientMask.position = CGPointMake([self bounds].size.width / 2, [self bounds].size.height / 2);
NSObject* transparent = (NSObject*) [[UIColor clearColor] CGColor];
NSObject* opaque = (NSObject*) [[UIColor blackColor] CGColor];
[gradientMask setColors: [NSArray arrayWithObjects: transparent, opaque, opaque, nil]];
[gradientMask setLocations: [NSArray arrayWithObjects:
[NSNumber numberWithFloat: 0.0],
[NSNumber numberWithFloat: kPickListFeather / self.bounds.size.height],
[NSNumber numberWithFloat: 1.0],
self.layer.mask = gradientMask;
The iPhone screen is really small, and you need to pay attention to every pixel. Polish like this is really important. It may be subtle, but it just makes the app feel a little better.
* OK, I really wanted to use this word because its meaning is now so divorced from the original literal meaning.