UITabBarController image masking effect

Question

I would like to recreate the effect that the UITabBarController makes with images on the tab bar using exactly the same images. I teamed up with several ideas using disguise, but I did not come up with anything satisfactory.

Does anyone have a recipe for this?

Answer 1

The Three20 didn't help too much, but after several hours of hacking, I came up with a satisfactory solution to the problem. The two main tricks you need to know are:

• how to convert image to DeviceGray color space
• how to mask an image

Comments are embedded in the code:

+ (UIImage*) tabBarLikeIconWith:(UIImage*)tabBarIconImage
{
/*
 *  1. 
 *  The output is going to be an image the exact same size as the tabBarIconImage
 */
CGSize size = CGSizeMake(tabBarIconImage.size.width, tabBarIconImage.size.height);
CGRect bounds = CGRectMake(0, 0, tabBarIconImage.size.width, tabBarIconImage.size.height);

/*
 *  2.
 *  The background image is a fairly big (50x50) image used to create whatever gradient
 *  effect is desired for the final image. We clip & move the image to proper size.
 *
 *  This could probably be cleverly composed on the fly using Quartz functions too. 
 */
static UIImage* backgroundImage = nil;
if (backgroundImage == nil) {
    backgroundImage = [UIImage imageNamed:@"TabBarLikeTransition.png"];
}

UIGraphicsBeginImageContext(size);
[backgroundImage drawAtPoint:CGPointMake(( size.width - backgroundImage.size.width) / 2, ( size.height - backgroundImage.size.height ) / 2)];

UIImage* workingBackgroundImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

/*
 *  3.
 *  We cannot deal with alpha levels in the tabBarIconImage, so we composite
 *  it with a white background to get a solid image.
 */
UIGraphicsBeginImageContext(size);

[[UIColor whiteColor] set];
UIRectFill(bounds);
[tabBarIconImage drawAtPoint:CGPointMake(0, 0)];

UIImage* maskImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

/*
 *  4.
 *  Next we convert the maskImage to the 'DeviceGray' colorspace
 *  needed by Apple masking functions. Why this isn't done automatically
 *  is something of a mystery to me.
 */
CGColorSpaceRef grayscaleColorSpace = CGColorSpaceCreateDeviceGray();
CGContextRef bitmapContext = CGBitmapContextCreate(NULL,
                                            size.width,
                                            size.height,
                                            8,
                                            8 * size.width,
                                            grayscaleColorSpace,
                                            0
                                            );

CGContextDrawImage(bitmapContext, bounds, maskImage.CGImage);
CGImageRef maskImageRef = CGBitmapContextCreateImage(bitmapContext);

maskImage = [UIImage imageWithCGImage:maskImageRef];

CGContextRelease(bitmapContext);
CGImageRelease(maskImageRef);
CGColorSpaceRelease(grayscaleColorSpace);

/*
 *  5.
 *  Mask the background and our new grayscale mask and we're off the races.
 *  I'd probably clean up these variables names if I had free time.
 *
 *  This cleverness comes from here:
 *  http://iosdevelopertips.com/cocoa/how-to-mask-an-image.html
 */
CGImageRef maskRef = maskImage.CGImage; 
CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
                                    CGImageGetHeight(maskRef),
                                    CGImageGetBitsPerComponent(maskRef),
                                    CGImageGetBitsPerPixel(maskRef),
                                    CGImageGetBytesPerRow(maskRef),
                                    CGImageGetDataProvider(maskRef), NULL, true);

CGImageRef masked = CGImageCreateWithMask([workingBackgroundImage CGImage], mask);

CGImageRelease(mask);

return  [UIImage imageWithCGImage:masked];
}

Answer 2

Three20 . TTMaskStyle. , . TTCatalog.