Updating UIImage on UiBarButtonItem from identifier to image

Question

I am currently making an application for IOS but I am having trouble changing an image... what a shame...

The situation is like this : I have a toolbar containing my items, and one of this items is the play button created from the identifier "Play". So I have my Play button without problem. Now I just want to change it to a pause image when I click on item and then switch again etc. So I liked in my .h the item giving me :

@property (weak, nonatomic) IBOutlet UIBarButtonItem *play;

I tried many answers I found on this website and none of them did work on my case :/ The last one I tried was something like this :

UIButton *button1=[UIButton buttonWithType:UIButtonTypeCustom];
[button1 setFrame:CGRectMake(10.0, 2.0, 45.0, 40.0)];
[button1 addTarget:self action:@selector(showLeft:) forControlEvents:UIControlEventTouchUpInside];
[button1 setImage:[UIImage imageNamed:@"pause.png"] forState:UIControlStateNormal];
UIBarButtonItem *button = [[UIBarButtonItem alloc]initWithCustomView:button1];
self.play = button;

I also tried :

self.play.customView = button1;

But none of them really work, I can get the image by doing

self.view = button1;

But that only the picture (so the creation of the UIImage is okay) in the middle of the screen so....

(If you can also tell me how to go back to the play using identifier it would also be very helpful thanks a lot)

Thanks for your help.

Answer 1

I think this should work.

-(IBAction)buttonClick:(UIBarButtonItem *)sender {

    if ([[sender backgroundImageForState:UIControlStateNormal barMetrics:UIBarMetricsDefault] isEqual:[UIImage imageNamed:@"Play.jpg"]]) {
        [sender setBackgroundImage:[UIImage imageNamed:@"Pause.jpg"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
    }else{
        [sender setBackgroundImage:[UIImage imageNamed:@"Play.jpg"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
    }
}

Of course, you'll have to set the background image initially (in viewDidLoad) to the "Play" image for this to work.

After Edit:

If you want to use the system play and pause button, as far as I know, you have to replace the button. I don't think there's a way to just change the image. So, I did it this way. The button was set up in IB with the outlet playPauseButton, and the action playClick. I also made an outlet to the tool bar (toolBar).

-(IBAction)playClick:(UIBarButtonItem *)sender {
    UIBarButtonItem *pause = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemPause target:self action:@selector(pauseClick:)];
    NSMutableArray *tbItems = [self.toolBar.items mutableCopy];
    [tbItems removeObject:self.playPauseButton];
    self.playPauseButton = pause;
    [tbItems addObject:pause];
    self.toolBar.items = tbItems;
}

-(void)pauseClick:(UIBarButtonItem *)sender {
    UIBarButtonItem *play = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemPlay target:self action:@selector(playClick:)];
    NSMutableArray *tbItems = [self.toolBar.items mutableCopy];
    [tbItems removeObject:self.playPauseButton];
    self.playPauseButton = play;
    [tbItems addObject:play];
    self.toolBar.items = tbItems;
}

Answer 2

If the button is already created and you have an outlet for it, you can simply set it like this:

UIImage* backgroundImage = [UIImage yourImage];
[self.barButtonItem setImage:backgroundImage];

Works like charm.

Answer 3

Create a custom button. Change the size of the button to match the image. Set image of the button. Add button view to UIBarButton play.

.h

IBOutlet UIBarButtonItem *play;

@property(nonatomic, retain) IBOutlet UIBarButtonItem *play;

.m

UIImage *image = [UIImage imageNamed:@"image.png"];
UIButton *button1 = [UIButton buttonWithType:UIButtonTypeCustom];
button1.bounds = CGRectMake( 0, 0, image.size.width, image.size.height );
[button1 setImage:image forState:UIControlStateNormal];
play = [[UIBarButtonItem alloc] initWithCustomView:button1];

Make sure you connect your outlet for the UIBarButtonItem in Interface Builder.

Good luck!

Answer 4

The answer of rdelmar it's great. I would like to add an enhancement that avoid a flickering of the button because the remove and add of the button.

-(void)pauseClick:(UIBarButtonItem *)sender {
    UIBarButtonItem *play = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemPlay target:self action:@selector(playClick:)];
    NSMutableArray *tbItems = [self.toolBar.items mutableCopy];
    self.playPauseButton = play;
    //instead of remove and add the new button, use the replaceObjectAtIndex method.
    [tbItems replaceObjectAtIndex:2 withObject:play];
    self.toolBar.items = tbItems;
}

Answer 5

You can try something like this for your custom button as one of the UIBarButtonItem.

 - (void)viewDidLoad
 {
   // add our custom image button as the nav bar's custom right view
   UIBarButtonItem *addButton = [[UIBarButtonItem alloc] initWithImage:[UIImage    imageNamed:@"email.png"]
                                style:UIBarButtonItemStyleBordered target:self  action:@selector(action:)];
   self.navigationItem.rightBarButtonItem = addButton;
   [addButton release];
 }

- (IBAction)action:(id)sender
{
    // the custom icon button was clicked, handle it here
    // change image here

}