In iOS 6/7, I have used UISegmentedControl
with background images to create an effect like so:
I accomplished this by setting the background image for the UISegmentedControl
for each of standard states, like so:
UIImage *segmentedControlBackgroundImage = [UIImage imageNamed:@"profileSegmentedControlBackground"];
UIImage *segmentedControlBackgroundSelectedImage = [UIImage imageNamed:@"profileSegmentedControlBackgroundSelected"];
[self.segmentedControl setBackgroundImage:segmentedControlBackgroundImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[self.segmentedControl setBackgroundImage:segmentedControlBackgroundImage forState:UIControlStateDisabled barMetrics:UIBarMetricsDefault];
[self.segmentedControl setBackgroundImage:segmentedControlBackgroundSelectedImage forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];
[self.segmentedControl setBackgroundImage:segmentedControlBackgroundSelectedImage forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
When a segment becomes select or is highlighted, it has the nice blue bar underneath and I set text attributes to change the text color to be blue. There's some extra code for the dividers, but I think that's unrelated so I've omitted it.
My problem is that in iOS 8, there are a couple of actions that cause the background of the segment to turn gray and look bad; One being when you change your selection, the cell you tapped turns gray until the transition completes, and the other is that if you tap and hold an already selected segment, it turns gray. Both look identical and can be seen below.
Some extra pieces of possibly relevant information:
- The
tintColor
for the segmentedControl is clear - I'm not subclassing
UISegmentedControl
- I haven't changed any properties for
UISegmentedControl
using its appearance proxy - I am using 1 point wide images for the background images and
UISegmentedControl
is automatically determining the capInsets and tiling the image
Just in case, in Swift that would be (UPD for Swift 4)
segmentedControl.setBackgroundImage(image, forState: .selected, barMetrics:.Default)
segmentedControl.setBackgroundImage(image, forState: .highlighted, barMetrics:.Default)
The reason the segment turns grey on selecting an already selected segment is because the segmented control is missing the state for selected and highlighted at the same time.
In your case calling:
should fix that problem.
I couldn't reproduce that one, but perhaps this will fix both issues.