UISegmentedControl setImage: Bug in iOS7

Question

I have a UISegmentedControl in my app. As of iOS7 GM, the images I use are not showing up when run on iOS7 devices. Anyone else having this problem?

Here\'s what it

Answer 1

Woohoo! Here's the workaround:

//Add clear color to mask any bits of a selection state that the object might show around the images
self.theSegmentedControl.tintColor = [UIColor clearColor];

UIImage *onceActive;
UIImage *recurringActive;
UIImage *scheduledActive;
UIImage *separator;

//Setting imageWithRenderingMode: to imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal for iOS7 is key
if ([UIImage instancesRespondToSelector:@selector(imageWithRenderingMode:)]) {
    onceActive = [[UIImage imageNamed:@"btn_onceActive"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    recurringActive = [[UIImage imageNamed:@"btn_recurringInactive"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    scheduledActive = [[UIImage imageNamed:@"btn_scheduledInactive"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    separator = [[UIImage imageNamed:@"separator"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

}
else {
    onceActive = [UIImage imageNamed:@"btn_onceActive"];
    recurringActive = [UIImage imageNamed:@"btn_recurringInactive"];
    scheduledActive = [UIImage imageNamed:@"btn_scheduledInactive"];
    separator = [UIImage imageNamed:@"separator"];
}


[self.theSegmentedControl setImage:onceActive forSegmentAtIndex:0];
[self.theSegmentedControl setImage:recurringActive forSegmentAtIndex:1];
[self.theSegmentedControl setImage:scheduledActive forSegmentAtIndex:2];
[self.theSegmentedControl setDividerImage:separator forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

Answer 2

Use this Code to set Image on Segment Control in iOS 7 with xCode 5.0

if ([UIImage instancesRespondToSelector:@selector(imageWithRenderingMode:)]) {

    [segmentControl setImage:[[UIImage imageNamed:@"image.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] forSegmentAtIndex:0];

}
else {
    [segmentControl setImage:[UIImage imageNamed:@"image.png"] forSegmentAtIndex:0];
}

Answer 3

UPDATE for Xcode 6/iOS 8

Now you can do it in Interface builder

Just add the image file in the asset catalog and set its "render as" original image instead of default

Xcode 5

The new UISegmented control uses the tint color to tint the images using the template mode. You will need to render these images as original and not templates.

As suggested in the comments do this:

UIImage* onceActive = [UIImage imageNamed:@"btn_onceActive"];
if (IOS_7_MACRO)
    onceActive = [onceActive imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[self.theSegmentedControl setImage:onceActive forSegmentAtIndex:0];

Answer 4

It could be useful to create a category:

@interface UISegmentedControl (UISegmentedControlAdditions)
    -(void)setImageRenderingMode:(UIImageRenderingMode)renderingMode;
@end    

@implementation UISegmentedControl (UISegmentedControlAdditions)
    -(void)setImageRenderingMode:(UIImageRenderingMode)renderingMode {
        for (int index=0; index < [self numberOfSegments]; index++) {
            UIImage * image = [self imageForSegmentAtIndex:index];
            [self setImage:[image imageWithRenderingMode:renderingMode] forSegmentAtIndex:index];
        }
    }

... and just call

if([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0)
    [colorSegmentedControl setImageRenderingMode:UIImageRenderingModeAlwaysOriginal];