How to change a UIBarButtonItem in the iphone toolbar

I recently needed to add a custom button to the iPhone toolbar but it needed to have state. Specifically, I needed the ability to enable and disable it based on some conditions. I implemented this using two images for the button – one for enabled and one for disabled.

First, add the button to the toolbar:

UIBarButtonItem *flexibleSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
UIImage *shuffleButtonDisabledImage = [UIImage imageNamed:@"shuffle_button_disabled.png"];
UIButton *shuffleButton = [UIButton buttonWithType:UIButtonTypeCustom];
[shuffleButton setImage:shuffleButtonDisabledImage forState:UIControlStateNormal];
 
shuffleButton.frame = CGRectMake(0, 0, shuffleButtonDisabledImage.size.width, shuffleButtonDisabledImage.size.height);
[shuffleButton addTarget:self action:@selector(shuffleSelected) forControlEvents:UIControlEventTouchUpInside]; 
UIBarButtonItem *shuffleBarItem = [[UIBarButtonItem alloc]	initWithCustomView:shuffleButton];
 
toolbarItems = [NSMutableArray arrayWithObjects:flexibleSpace,shuffleBarItem,flexibleSpace,nil];
[toolbarItems retain];

I did this in my init function.

Next you need to implement the logic for disabling and enabling:

if(someFlag){
        shuffleActivated = YES;
        [(UIButton *)[[toolbarItems objectAtIndex:1] customView] setImage:[UIImage imageNamed:@"shuffle_button_small.png"] forState:UIControlStateNormal];
}else{
        shuffleActivated = NO;
	[(UIButton *)[[toolbarItems objectAtIndex:1] customView] setImage:[UIImage imageNamed:@"shuffle_button_small_disabled.png"] forState:UIControlStateNormal];
}

Update:
There is actually a better way to set enabled and disabled view states for a button anywhere in your iPhone application. You can specify which image to display based on the enabled or disabled state of the button, and then just manage the button state. One benefit to this is your disabled button won’t bounce like it is enabled. You also don’t have to create an image every time the button state changes. Of course you could have avoided both of these issues with a little more code, but this is a nice way to avoid both of those issues with a little less code. Here is what creating the toolbar will look like now:

UIBarButtonItem *flexibleSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
// this code is copied which is bad, should put in a utility class
UIImage *shuffleButtonDisabledImage = [UIImage imageNamed:@"shuffle_button_disabled.png"];
UIImage *shuffleButtonEnabledImage = [UIImage imageNamed:@"shuffle_button.png"];
UIButton *shuffleButton = [UIButton buttonWithType:UIButtonTypeCustom];
shuffleButton.adjustsImageWhenDisabled = YES;
[shuffleButton setEnabled:NO];
[shuffleButton setImage:shuffleButtonEnabledImage forState:UIControlStateNormal];
[shuffleButton setImage:shuffleButtonDisabledImage forState:UIControlStateDisabled];
 
shuffleButton.frame = CGRectMake(0, 0, shuffleButtonDisabledImage.size.width, shuffleButtonDisabledImage.size.height);
[shuffleButton addTarget:self action:@selector(shuffleSelected) forControlEvents:UIControlEventTouchUpInside]; 
UIBarButtonItem *shuffleBarItem = [[UIBarButtonItem alloc]	initWithCustomView:shuffleButton];
 
toolbarItems = [NSMutableArray arrayWithObjects:flexibleSpace,shuffleBarItem,flexibleSpace,nil];
[toolbarItems retain];

Again, this is done in my init function.

Your enabling/disabling logic would look like this:

if((numSelected == 1)&&(!shuffleActivated)){
	[(UIButton *)[[toolbarItems objectAtIndex:1] customView] setEnabled:YES];
}else if((numSelected == 0)&&(shuffleActivated)){
	[(UIButton *)[[toolbarItems objectAtIndex:1] customView] setEnabled:NO];
}
No TweetBacks yet. (Be the first to Tweet this post)
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • MySpace
  • Slashdot
  • StumbleUpon
  • Technorati
  • TwitThis

If you enjoyed this post, make sure you subscribe to my RSS feed!

This entry was posted in Software and tagged , , . Bookmark the permalink. Both comments and trackbacks are currently closed.

3 Comments

  1. Sascha
    Posted November 22, 2010 at 6:25 am | Permalink

    Thank you! Works great!

  2. Posted January 6, 2011 at 9:37 am | Permalink

    Thanks a lot !! You saved my life with this tip !

    It works perfectly !

  3. Todd
    Posted January 15, 2012 at 11:41 am | Permalink

    Thanks for posting this! Exactly what I was looking for!