Question

我想使用完全相同的图像重新创建UITabBarController对标签栏中的图像所做的效果。我已经围绕着一些使用遮蔽的想法，但我没有想出任何令人满意的东西。

任何人都有这样做的秘诀吗？

Answer 1

Three20的东西并没有太多帮助，但经过几个小时的黑客攻击后，我找到了一个满意的解决方案。需要知道的两个核心技巧是：

如何将图像转换为 DeviceGray色彩空间
如何屏蔽图像

评论与代码内联：

+ (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's 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示例应用程序中找到一个示例。

UITabBarController-like图像屏蔽效果

2 个答案: