Use iOS 6 Style Segmented Control in iOS 7?

Question

Is it possible to have a segmented control on an iOS 7 device show up as the iOS 6 version of the control?

We really aren't ready for an interface redesign and the new flat control doesn't jive with the rest of our UI. It would definitely be best to keep the iOS 6 style for now, if possible.

To clarify, I am compiling using the iOS 6.1 Base SDK. I am aware that this is the "obvious" answer to my question, but it does not work. Most other UI elements will show up with iOS 6 styling by doing this, but like the UIAlertView and UIActionSheet, the UISegmentedControl does not. However, unlike the UIAlertView and UIActionSheet, UISegmentedControls do not feel like a "system" item; they should be able to display in iOS 6 mode.

Edit: I thought it would be helpful if I finally included a picture with this (probably should have done this from the start). However, the answer I provided did fix the issue. Also, in retrospect, it looks like this might be the iOS 6 style after all, it's just displaying so wrong that it appears like iOS 7 style.

Answer 1

I just ran into this problem today myself. The app I'm working on updating is quite old, and still uses xib files, so I do not know if this works on storyboards or not. As others suggested above, you still need to use the iOS 6.1 SDK, but this alone is not enough. After performing the following steps, I was able to get the old UISegmentedControl appearance back:

1. Open the interface builder document in question
2. Go to the file inspector (first inspector tab; has a document icon)
3. Under the "Interface Builder Document" section, change "Opens in" to Xcode 4.6

I do believe this is a bug, and I would not be surprised if there isn't a workaround for UISegmentedControl instances created in code. I'm guessing this is somewhat related to the deprecation of the segmentedControlStyle property in iOS 7 (see https://developer.apple.com/library/ios/documentation/uikit/reference/UISegmentedControl_Class/DeprecationAppendix/AppendixADeprecatedAPI.html#//apple_ref/occ/instp/UISegmentedControl/segmentedControlStyle).

Hope this helps someone out there.

Answer 2

If you use images on any of your UISegmentedControl segments, you'll need to add some code to set those properly on iOS 7, otherwise they'll be used as a template image and the selected segment will be a cutout of the segment's background.

UISegmentedControl under iOS 7 interprets its images as being in rendering mode UIImageRenderingModeAlwaysTemplate unless otherwise specified. I had to use -[UIImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] on each segment's image for iOS 7 to achieve the previous behavior.

Answer 3

I manage to do a pretty good job of solving this problem by setting all the attributes manually, but it is not quite perfect.

This is what I ended up doing:

- (void)fixSegmentedControlForiOS7
{
    NSInteger deviceVersion = [[UIDevice currentDevice] systemVersion].integerValue;
    if(deviceVersion < 7) // If this is not an iOS 7 device, we do not need to perform these customizations.
        return;

    NSDictionary *attributes = [NSDictionary dictionaryWithObjectsAndKeys:
                                [UIFont boldSystemFontOfSize:12], UITextAttributeFont,
                                [UIColor whiteColor], UITextAttributeTextColor,
                                nil];
    [self.segmentedControl setTitleTextAttributes:attributes forState:UIControlStateNormal];
    NSDictionary *highlightedAttributes = [NSDictionary dictionaryWithObject:[UIColor whiteColor] forKey:UITextAttributeTextColor];
    [self.segmentedControl setTitleTextAttributes:highlightedAttributes forState:UIControlStateHighlighted];

    self.segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;
    self.segmentedControl.tintColor = [UIColor colorWithRed:49.0 / 256.0 green:148.0 / 256.0 blue:208.0 / 256.0 alpha:1];
}

Answer 4

To fix images assigned with InterfaceBuilder use this code:

- (void)fixImagesOfSegmentedControlForiOS7
{
    NSInteger deviceVersion = [[UIDevice currentDevice] systemVersion].integerValue;
    if(deviceVersion < 7) // If this is not an iOS 7 device, we do not need to perform these customizations.
        return;

    for(int i=0;i<toSegmentedControl.numberOfSegments;i++)
    {
        UIImage* img = [toSegmentedControl imageForSegmentAtIndex:i];
        UIImage* goodImg = [img imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        // clone image with different rendering mode
        [toSegmentedControl setImage:goodImg forSegmentAtIndex:i];
    }
}

Answer 5

Is it possible? Not really...

You could make your own custom segmented control.

Or you could use the UIAppearance proxy to customise your segmented control with images but then it's your responsibility to make it look like it was on iOS 6.

Answer 6

Yes, it is possible if you recreate the control by your own. Create a fake segmented control that looks like and work like one.