How to stop unwanted UIButton animation on title change?

StackOverflow https://stackoverflow.com/questions/18946490

Question

In iOS 7 my UIButton titles are animating in and out at the wrong time - late. This problem does not appear on iOS 6. I'm just using:

[self setTitle:text forState:UIControlStateNormal];

I would prefer this happens instantly and without a blank frame. This blink is especially distracting and draws attention away from other animations.

Was it helpful?

Solution 2

This works for custom buttons:

[UIView setAnimationsEnabled:NO];
[_button setTitle:@"title" forState:UIControlStateNormal];
[UIView setAnimationsEnabled:YES];

For system buttons you need to add this before re-enabling animations (thank you @Klaas):

[_button layoutIfNeeded];

OTHER TIPS

Use the performWithoutAnimation: method and then force layout to happen immediately instead of later on.

[UIView performWithoutAnimation:^{
  [self.myButton setTitle:text forState:UIControlStateNormal];
  [self.myButton layoutIfNeeded];
}];

In Swift you can use :

UIView.performWithoutAnimation {
    self.someButtonButton.setTitle(newTitle, forState: .normal)
    self.someButtonButton.layoutIfNeeded()
}

Change button type to custom form interface builder.

enter image description here

This worked for me.

Please note :

when "buttonType" of _button is "UIButtonTypeSystem", below code is invalid：

[UIView setAnimationsEnabled:NO];
[_button setTitle:@"title" forState:UIControlStateNormal];
[UIView setAnimationsEnabled:YES];

when "buttonType" of _button is "UIButtonTypeCustom", above code is valid.

Starting in iOS 7.1 the only solution that worked for me was initializing the button with type UIButtonTypeCustom.

Swift 5

myButton.titleLabel?.text = "title"
myButton.setTitle("title", for: .normal)

so i find worked solution:

_logoutButton.titleLabel.text = NSLocalizedString(@"Logout",);
[_logoutButton setTitle:_logoutButton.titleLabel.text forState:UIControlStateNormal];

in first we change title for button, then resize button for this title

UIButton with system type has implicit animation on setTitle(_:for:). You can fix it two different ways:

  1. Set the button type to custom, either from code or Interface Builder:
let button = UIButton(type: .custom)

enter image description here

  1. Disable animation from code:
UIView.performWithoutAnimation {
    button.setTitle(title, for: .normal)
    button.layoutIfNeeded()
}

Set the button type to UIButtonTypeCustom and it'll stop flashing

I’ve made a Swift extension to do this:

extension UIButton {
    func setTitleWithoutAnimation(title: String?) {
        UIView.setAnimationsEnabled(false)

        setTitle(title, forState: .Normal)

        layoutIfNeeded()
        UIView.setAnimationsEnabled(true)
    }
}

Works for me on iOS 8 and 9, with UIButtonTypeSystem.

(The code is for Swift 2, Swift 3 and Objective-C should be similar)

Set UIButton type as Custom. That should remove fade in and out animations.

Usually simply setting the button type to Custom works for me, but for other reasons I needed to subclass UIButton and set the button type back to the default (System), so the blinking reappeared.

Setting UIView.setAnimationsEnabled(false) before changing the title and then to true again after that didn't avoid the blinking for me, no matter if I called self.layoutIfNeeded() or not.

This, and only this in the following exact order, worked for me with iOS 9 and 10 beta:

1) Create a subclass for UIButton (don't forget to set the custom class for the button in the Storyboard too).

2) Override setTitle:forState: as follows:

override func setTitle(title: String?, forState state: UIControlState) {

    UIView.performWithoutAnimation({

        super.setTitle(title, forState: state)

        self.layoutIfNeeded()
    })
}

In Interface Builder, you can leave the button type to System, no need to change it to Custom Type for this approach to work.

I hope this helps someone else, I've struggled for so long with the annoying blinking buttons that I hope to avoid it to others ;)

You can simply create Custom button and it will stop animate while changing the title. 

        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        [btn setTitle:@"the title" forState:UIControlStateNormal];

you also can do it in Storyboard checkbox: select the button in storyboard -> select the attributes inspector (fourth from left side) -> in the 'Type' drop down menu, select 'Custom' instead of 'System' that was probably selected.

Good luck!

Swift 4 version of Xhacker Liu answer

import Foundation
import UIKit
extension UIButton {
    func setTitleWithOutAnimation(title: String?) {
        UIView.setAnimationsEnabled(false)

        setTitle(title, for: .normal)

        layoutIfNeeded()
        UIView.setAnimationsEnabled(true)
    }
}

You can remove the animations from from the title label's layer:

    [[[theButton titleLabel] layer] removeAllAnimations];

You can actually set the title outside of an animation block, just be sure to call layoutIfNeeded() inside a performWithoutAnimation:

button1.setTitle("abc", forState: .Normal)
button2.setTitle("abc", forState: .Normal)
button3.setTitle("abc", forState: .Normal)
UIView.performWithoutAnimation {
    self.button1.layoutIfNeeded()
    self.button2.layoutIfNeeded()
    self.button3.layoutIfNeeded()
}

If you have a bunch of buttons, consider just calling layoutIfNeeded() on the super view:

button1.setTitle("abc", forState: .Normal)
button2.setTitle("abc", forState: .Normal)
button3.setTitle("abc", forState: .Normal)
UIView.performWithoutAnimation {
    self.view.layoutIfNeeded()
}

I've found that this workaround works with UIButtonTypeSystem as well but will only work if the button is enabled for some reason.

[UIView setAnimationsEnabled:NO];
[_button setTitle:@"title" forState:UIControlStateNormal];
[UIView setAnimationsEnabled:YES];

So you'll have to add these if you need the button to be disabled when setting its title.

[UIView setAnimationsEnabled:NO];
_button.enabled = YES;
[_button setTitle:@"title" forState:UIControlStateNormal];
_button.enabled = NO;
[UIView setAnimationsEnabled:YES];

(iOS 7, Xcode 5)

Combining above great answers results in following workaround for UIButtonTypeSystem:

if (_button.enabled)
{
    [UIView setAnimationsEnabled:NO];
    [_button setTitle:@"title" forState:UIControlStateNormal];
    [UIView setAnimationsEnabled:YES];
}
else // disabled
{
    [UIView setAnimationsEnabled:NO];
    _button.enabled = YES;
    [_button setTitle:@"title" forState:UIControlStateNormal];
    _button.enabled = NO;
    [UIView setAnimationsEnabled:YES];
}

I got the ugly animation problem when changing button titles in view controllers within a UITabBarController. The titles that were originally set in the storyboard showed up for a short while before fading into their new values.

I wanted to iterate through all subviews and use the button titles as keys to get their localized values with NSLocalizedString, such as; 

for(UIView *v in view.subviews) {

    if ([v isKindOfClass:[UIButton class]]) {
        UIButton *btn = (UIButton*)v;
        NSString *newTitle = NSLocalizedString(btn.titleLabel.text, nil);
        [btn setTitle:newTitle];
    }

}

I found out that what's triggering the animation is really the call to btn.titleLabel.text. So to still make use of the storyboards and have the components dynamically localized like this I make sure to set every button's Restoration ID (in Identity Inspector) to the same as the title and use that as key instead of the title;

for(UIView *v in view.subviews) {

    if ([v isKindOfClass:[UIButton class]]) {
        UIButton *btn = (UIButton*)v;
        NSString *newTitle = NSLocalizedString(btn.restorationIdentifier, nil);
        [btn setTitle:newTitle];
    }

}

Not ideal, but works..

The Xhacker Liu extension converted to Swift 3 :

extension UIButton {
    func setTitleWithoutAnimation(title: String?) {
        UIView.setAnimationsEnabled(false)

        setTitle(title, for: .normal)

        layoutIfNeeded()
        UIView.setAnimationsEnabled(true)
    }
}

A convenient extension for animated button title change in Swift that plays nicely with the default implementation:

import UIKit

extension UIButton {
  /// By default iOS animated the title change, which is not desirable in reusable views
  func setTitle(_ title: String?, for controlState: UIControlState, animated: Bool = true) {
    if animated {
      setTitle(title, for: controlState)
    } else {
      UIView.setAnimationsEnabled(false)
      setTitle(title, for: controlState)
      layoutIfNeeded()
      UIView.setAnimationsEnabled(true)
    }
  }
}

I got it to work with a combination of answers:

[[[button titleLabel] layer] removeAllAnimations];

    [UIView performWithoutAnimation:^{

        [button setTitle:@"Title" forState:UIControlStateNormal];

    }];

Maybe generating 2 animations and 2 buttons is a better solution, to avoid the problem that is appearing with animating and changing the text of a button?

I created a second uibutton and generated 2 animation, this solution works with no hickups. 

    _button2.hidden = TRUE;
    _button1.hidden = FALSE;

    CGPoint startLocation = CGPointMake(_button1.center.x, button1.center.y - 70);
    CGPoint stopLocation  = CGPointMake(_button2.center.x, button2.center.y- 70);


    [UIView animateWithDuration:0.3 animations:^{ _button2.center = stopLocation;} completion:^(BOOL finished){_button2.center = stopLocation;}];
    [UIView animateWithDuration:0.3 animations:^{ _button1.center = startLocation;} completion:^(BOOL finished){_button1.center = startLocation;}];
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top