UISegmentedControl in iOS 7 divider image is wrong during animation

Question

I have a custom UISegmentedControl. In iOS 6 and bellow it works fine. Under iOS 7.. it looks fine until I press the control, at which time, the divider image looks weird fo

Answer 1

To add a little more detail to Wyatt's answer, what is happening is that the "divider" image and the new "selected" image are changed instantly on touchUp, but the previously-selected segment's transition from the "selected" image to the "unselected" image is performed via an animated crossfade.

If you have a wide "divider" image with high contrast between the "divider" image and the "selected" image, this leads to an annoying flash.

Answer 2

I was experiencing a similar problem and figured out that there are two things going on. One of them you've already dealt with (setting up images for the highlighted/selected combos). The other is that UISegmentedControl does a color highlight when you select a new segment like UITableViewCells do when you select them. And, even though I've customized all the art and the text, it's still fading to a dark color (my text even inverts) and then it comes back. During that fade, the edges of my dividers are easily seen.

I had to turn on Slow Animations in the Simulator to see this more clearly. Unfortunately, I have not been able to find a way to disable those default animations.

Answer 3

I solved this in a way similar to what user2128193 describes, but instead of adding a target for the value changed event, I subclassed UISegmentedControl and added these two methods:

- (void)sendActionsForControlEvents:(UIControlEvents)controlEvents
{
    [super sendActionsForControlEvents:controlEvents];

    if (controlEvents & UIControlEventValueChanged) {
        [self removeAnimationsRecursivelyForView:self];
    }
}

- (void)removeAnimationsRecursivelyForView:(UIView *)view
{
    [view.layer removeAllAnimations];

    for (UIView *subview in [view subviews]) {
        [self removeAnimationsRecursivelyForView:subview];
    }
}

Obviously this is still not a perfect solution, in that it relies on the internals of UISegmentedControl, but at least it will keep your code a bit cleaner.

Answer 4

Try setting the tintcolor property of segment control. I had this issue. I set the tint colour to selection colour and no images were set for divider. Since this is IOS 7 you can do so for IOS 7 and keep divider image code for IOS 6. To make things clear I am talking tintcolor instance level property of UISegmentControl.

Answer 5

TL;DR Just remove all the animations in each segment. See the Code Below

I have been able to fix this issue by removing the default animations for the backgroundImage and titles (UILabel) by calling removeAllAnimations on the segment's layer and also calling removeAllAnimations on the UILabel nested inside of each segment. I placed this code inside the IBAction method that is called when the UISegmentedControl valueChanged event is fired.

- (IBAction)tabSelected:(id)sender
{
    UISegmentedControl *segmentedControl = (UISegmentedControl *)sender;

    for (UIView *segment in [segmentedControl subviews]) {
        [segment.layer removeAllAnimations];

        for (UIView *view in [segment subviews]) {
            if ([view isKindOfClass:[UILabel class]]) {
                [view.layer removeAllAnimations];
            }
        }
    }
}

I haven't tested this on content that is a UIImage but I see no reason why it wouldn't work as long as you change this line:

[view isKindOfClass:[UILabel class]

to match for the UIImage class like so:

[view isKindOfClass:[UIImage class]

Answer 6

I solved this by overriding touchesEnded in a subclass and disabling animations for CATransaction

override func touchesEnded(touches: Set<NSObject>, withEvent event: UIEvent) {
    CATransaction.setDisableActions(true)
    super.touchesEnded(touches, withEvent: event)
}