How to animate a button change in UINavigationBar?

creednmd picture creednmd · Feb 15, 2011 · Viewed 14.9k times · Source

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.

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?

Answer

lxt picture lxt · Feb 15, 2011
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)