Use iOS 6 Style Segmented Control in iOS 7?

Question

Is it possible for a segmented control on an iOS 7 device to appear as an iOS 6 control version?

We are really not ready to redesign the interface, and the new flat control will not surpass the rest of our interfaces. Surely it would be better to keep the style of iOS 6, if possible.

To clarify, I am compiling using the iOS 6.1 Base SDK. I know this is the "obvious" answer to my question, but it does not work. Most of the other user interface elements will be displayed using iOS 6 styles while doing this, but like UIAlertView and UIActionSheet , UISegmentedControl does not. However, unlike UIAlertView and UIActionSheet , UISegmentedControls do not feel like a "system" element; they should be able to display in iOS 6 mode.

Edit: I thought it would be useful if I finally included a picture with this (probably should have done this from the very beginning). However, the answer I gave fixed the problem. Also, in retrospect, it looks like this might be an iOS 6 style, it just looks so wrong that it looks like iOS 7 style.

Answer 1

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

Here is what I did:

 - (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 2

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 3

Today I ran into this problem. The application I'm working on updating is quite outdated and still uses xib files, so I don’t know if this works on storyboards or not. As suggested above, you still need to use the iOS 6.1 SDK, but that’s not enough. After completing the following steps, I was able to return the old UISegmentedControl appearance:

• Open the corresponding interface designer
• Go to the file inspector (the first inspector tab, there is a document icon)
• In the "Interface Designer Document" section, change "Opens" to Xcode 4.6

I really think this is a mistake, and I won’t be surprised if there is no workaround for the UISegmentedControl instances created in the code. I assume this is somewhat related to the deprecated 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 4

If you save the iPhoneOS6.1.sdk file from a previous version of Xcode and add it to Xcode 5 in the same way, you can then create an application against the 6.1 SDK so that when you start 7 it will be like 6. Linking to the iOS7 SDK tells iOS to everything looked like iOS7, if possible. Essentially, you have an iOS6 application, but its creation with Xcode 5.

Answer 5

If you use images in any of the UISegmentedControl segments, you will need to add code to install them correctly on iOS 7, otherwise they will be used as a template image, and the selected segment will cut out the background segment.

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

Answer 6

Or you could:

• Do not update the application for iOS7 until you are ready to make some changes to the user interface. Applications compiled against the iOS6 SDK will work in iOS6 compatibility mode on iOS7 and will look exactly the same as on iOS6.
• Apply custom background images, separator, etc. to your segmented controls that mimic the look they had in iOS6.

Answer 7

Is it possible? Not really ...

You can create your own segmented control.

Or you could use the UIAppearance proxy to set up a segmented image control, but then it's your responsibility to make it look like it was on iOS 6.

Answer 8

Yes, it is possible if you recreate the control yourself. Create a fake segmented control that looks and works like one.

Answer 9

In my application, I set the Segmented element to "Bar". It displays in ios6 style on my ios7 iphone5 (whoa, 5,6,7). However, the text inside the segments is trimmed and has three “...” points, regardless of how wide the viewpoint is. So rendering with ios6 segmented control in ios7 seems really wrong