Retina Support for custom UITabBarController-like highlighting of UIImage?

Question

I'm using BCTabBarController in my app, and I'm trying to customize it so that it uses Core Graphics to highlight the images automatically, so that I don't need four copies of each image. (Retina, Retina-selected, Legacy, Legacy-selected)

User Ephraim has posted a great starting point for this, but it returns legacy sized images. I've played with some of the settings, but I'm not very familiar with Core Graphics, so I'm shooting in the dark.

Ephraim's Code:

- (UIImage *) imageWithBackgroundColor:(UIColor *)bgColor 
                       shadeAlpha1:(CGFloat)alpha1 
                       shadeAlpha2:(CGFloat)alpha2
                       shadeAlpha3:(CGFloat)alpha3 
                       shadowColor:(UIColor *)shadowColor 
                      shadowOffset:(CGSize)shadowOffset 
                        shadowBlur:(CGFloat)shadowBlur { 

UIImage *image = self;

CGColorRef cgColor = [bgColor CGColor];
CGColorRef cgShadowColor = [shadowColor CGColor];

CGFloat components[16] = {1,1,1,alpha1,1,1,1,alpha1,1,1,1,alpha2,1,1,1,alpha3};
CGFloat locations[4] = {0,0.5,0.6,1};

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();  

CGGradientRef colorGradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, (size_t)4);

CGRect contextRect;
contextRect.origin.x = 0.0f;
contextRect.origin.y = 0.0f;
contextRect.size = [image size];
//contextRect.size = CGSizeMake([image size].width+5,[image size].height+5);  
// Retrieve source image and begin image context
UIImage *itemImage = image;
CGSize itemImageSize = [itemImage size];
CGPoint itemImagePosition; 
itemImagePosition.x = ceilf((contextRect.size.width - itemImageSize.width) / 2);
itemImagePosition.y = ceilf((contextRect.size.height - itemImageSize.height) / 2);
UIGraphicsBeginImageContext(contextRect.size);
CGContextRef c = UIGraphicsGetCurrentContext();
// Setup shadow
CGContextSetShadowWithColor(c, shadowOffset, shadowBlur, cgShadowColor);
// Setup transparency layer and clip to mask
CGContextBeginTransparencyLayer(c, NULL);
CGContextScaleCTM(c, 1.0, -1.0);
CGContextClipToMask(c, CGRectMake(itemImagePosition.x, -itemImagePosition.y, itemImageSize.width, -itemImageSize.height), [itemImage CGImage]);
// Fill and end the transparency layer
CGContextSetFillColorWithColor(c, cgColor);     
contextRect.size.height = -contextRect.size.height;
CGContextFillRect(c, contextRect);
CGContextDrawLinearGradient(c, colorGradient,CGPointZero,CGPointMake(contextRect.size.width*1.0/4.0,contextRect.size.height),0);
CGContextEndTransparencyLayer(c);
//CGPointMake(contextRect.size.width*3.0/4.0, 0)
// Set selected image and end context
UIImage *resultImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

CGColorSpaceRelease(colorSpace);
CGGradientRelease(colorGradient);

return resultImage;

}

To implement this code, I've added a category to UIImage in my project, and then made the following changes to BCTab.h:

- (id)initWithIconImageName:(NSString *)imageName {
if (self = [super init]) {
    self.adjustsImageWhenHighlighted = NO;
    self.background = [UIImage imageNamed:@"BCTabBarController.bundle/tab-background.png"];
    self.rightBorder = [UIImage imageNamed:@"BCTabBarController.bundle/tab-right-border.png"];
    self.backgroundColor = [UIColor clearColor];

//      NSString *selectedName = [NSString stringWithFormat:@"%@-selected.%@",
//                                 [imageName stringByDeletingPathExtension],
//                                 [imageName pathExtension]];


    UIImage  *defImage = [UIImage imageNamed:imageName];

    [self setImage:[defImage imageWithBackgroundColor:[UIColor lightGrayColor] shadeAlpha1:0.4 shadeAlpha2:0.0 shadeAlpha3:0.6 shadowColor:[UIColor blackColor] shadowOffset:CGSizeMake(0.0, -1.0f) shadowBlur:3.0] forState:UIControlStateNormal];
    [self setImage:[defImage imageWithBackgroundColor:[UIColor redColor] shadeAlpha1:0.4 shadeAlpha2:0.0 shadeAlpha3:0.6 shadowColor:[UIColor blackColor] shadowOffset:CGSizeMake(0.0, -1.0f) shadowBlur:3.0]  forState:UIControlStateSelected];

}
return self;
}

How can I use Ephraim's code to work correctly with Retina display?

Moshe Moshe · Accepted Answer · 2012-02-12T20:09:41

After digging around the internet, a Google search lead me back to StackOverflow. I found this answer to this question which discusses a different method which should be used to set the scale factor of the UIImageGraphicsContext when it is initialized.

UIGraphicsBeginImageContext(contextRect.size); needs to be changed to UIGraphicsBeginImageContextWithOptions(contextRect.size, NO, scale);, where "scale" is the value of the scale you want to use. I grabbed it from [[UIScreen mainScreen] scale].

Retina Support for custom UITabBarController-like highlighting of UIImage?

1 Answers