How to animate a button change in UINavigationBar?

I am calling the -(void)setEditing:(BOOL)editing animated:(BOOL)animated method in my code to swap between two buttons on the RHS of my navigation bar.

-(void)setEditing:(BOOL)editing animated:(BOOL)animated {  
  [super setEditing:editing animated:animated];  

  // Toggle ‘+’ and ‘Add To Order’ button.    

  if( editing ) {
    self.navigationItem.rightBarButtonItem = self.addItemButton;  
  else {           
    self.navigationItem.rightBarButtonItem = self.addToOrderButton;  

Where self.addItemButton and self.addToOrderButton are ivars containing predefined UIBarButtonItems, setup in awakefromNib.

  • “back” text displayed in iOS7 UINavigationBar when view title is long
  • iOS 7: Custom Back Indicator Image Position
  • How to add a right button to a UINavigationController?
  • UISearchBar in navigationbar
  • Centering Label Vertically in UINavigationBar TitleView
  • NSFontAttributeName has changed to String
  • The button in self.addToOrderButton is significantly wider then the one in self.addItemButton, so I’d like their to be a subtle animation between the two widths when the change in editing state is triggered (by tapping a standard editButtonItem on the LHS of the navigation.

    If I surround the whole if:else with [UIView beginAnimations:nil context:NULL]; and [UIView commitAnimations]; the button change does animate, but with their positions—flying into place individually from the top left—rather than in place and just animating their widths.

    How I animate the navigation bar elements so that each individual one (the RHS button, the title) animate in more appropriate, restrained ways?

    Solutions Collect From Internet About “How to animate a button change in UINavigationBar?”

    self.navigationItem.rightBarButtonItem = self.addToOrderButton; 

    There are specific methods you can use to animate the right and left bar button items:

     [self.navigationItem setRightBarButtonItem: self.addToOrderButton animated:YES];

    …which will animate it for you. If you need everything to animate (including the title) you can also use the setItems:animated: method of your navigation bar (pass it in an array of the navigation items you’d like to display)