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 looks like in iOS6.1 and earlier .

and here is what it looks like in iOS7 .

Here is the code:

self.theSegmentedControl.frame = CGRectMake(self.theSegmentedControl.frame.origin.x, self.theSegmentedControl.frame.origin.y, 320, 35);
[self.theSegmentedControl setBackgroundImage:[UIImage imageNamed:@"img_toggleInactive"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[self.theSegmentedControl setImage:[UIImage imageNamed:@"btn_onceActive"] forSegmentAtIndex:0];
[self.theSegmentedControl setImage:[UIImage imageNamed:@"btn_recurringInactive"] forSegmentAtIndex:1];
[self.theSegmentedControl setImage:[UIImage imageNamed:@"btn_scheduledInactive"] forSegmentAtIndex:2];
[self.theSegmentedControl setDividerImage:[UIImage imageNamed:@"separator"] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

Has anyone found a workaround to this?

it's not a but, it's a feature! Apple made the very strange choice to colour entirely the images in his segmented controls. I my app I used a seg to choose a colour, now my colours are all blue! — Martin, Nov 27 '13 at 07:45

score 61 · Accepted Answer · answered Sep 11 '13 at 04:44

61

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];

answered Sep 11 '13 at 04:44

kevmalek

1,373
2
12
13

2

That's not the 'workaround' it was explicitly called out in one of the WWDC videos as a needed thing to do in that case – Anya Shenanigans Sep 11 '13 at 08:14
25

The code without the new method worked in iOS6.1 and lower and stopped in 7. There is no indication in the docs or console to do anything differently. The onus of responsibility doesn't lie on me to watch all the WWDC videos. I'm gonna go ahead and call this one a bug, thank you. – kevmalek Sep 11 '13 at 15:51
2

Did you recompile your code using the new SDK? The docs *clearly* state that: Segment Icons You can use an image instead of title text for your segments. Note that a segment image will be automatically rendered as a template image within a segmented control, unless you explicitly set its rendering mode to UIImageRenderingModeAlwaysOriginal. For more information, see Template Images (I'm not linking to it, as the link is still pre-release) – Anya Shenanigans Sep 11 '13 at 20:24
1

You're right, the behavior is mentioned in the transition guide, thank you. – kevmalek Sep 11 '13 at 22:55
I tried this but the image I set in not scalling to fill the segment. see http://stackoverflow.com/questions/18850081/ios7-images-inuisegmentedcontrol-not-scaling – user1028028 Sep 19 '13 at 14:38
I try this snippet in my app,it`s worked.so,what`s the conclusion,should I use this ? – newlife Sep 24 '13 at 08:09
@newlife Yes use this. This is not a workaround, it's rather the new behavior for the UISegmentedControl going forward in iOS7. – kevmalek Sep 24 '13 at 20:46
I think the only problem is that the default `renderingMode` should be `UIImageRenderingModeAlwaysOriginal` – chunkyguy Dec 05 '13 at 23:07

João Nunes · Answer 2 · 2015-01-15T21:30:48.177

18

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];

edited Jan 15 '15 at 21:30

answered Sep 20 '13 at 11:30

João Nunes

3,751
31
32

How do you tell it to user the AlwaysOriginal Rendering Mode from the XIB/Interface Builder? – Speckpgh Sep 23 '13 at 01:36
2

I didnt see that option in IB at least for UISegmentedControl :( – João Nunes Sep 23 '13 at 14:08
1

As of Xcode 6 you can set the render mode in Assets catalog properties for each asset :D – João Nunes Sep 11 '14 at 13:28
Seems like iOS 7 ignores this setting. I'm using Xcode 6.1, and the setting works when running on iOS 8 but not iOS 7. – mahboudz Jan 14 '15 at 20:45
@mahboudz thanks, i have updated the answer. Didn't test myself on iOS 7 and too lazy now to do it :D – João Nunes Jan 15 '15 at 21:31
I found that even setting the asset property correctly is not sufficient; i need to give it a kick with something like this: – pickwick Feb 23 '15 at 18:15

score 7 · Answer 3 · answered Jan 27 '14 at 09:48

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];
}

score 2 · Answer 4 · answered Nov 27 '13 at 08:07

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];

`imageWithRenderingMode:` is already present in `UIImage`. Then why create category? Only available in iOS 7.0 onwards. — Akshit Zaveri, Mar 06 '14 at 13:04
Yes, `imageWithRenderingMode:` is also a `UIImage` method: this example is using it. Why create a category? Because it's less verbose and useful than configuring manually your controls. But of course, it's even better by creating your own `UISegmentedControl` class. — Martin, Mar 06 '14 at 17:11

UISegmentedControl setImage: Bug in iOS7

4 Answers4

Linked

Related