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.

Have you tried just changing the button's customView property to a view with the pause image? — rdelmar, Aug 05 '13 at 15:53
Well I suggest to use images based on the different states. Set one image for UIControlStateNormal, and assign it play button and set another image for UIControlStateSelected and assign the pause button. Whenever the button is clicked toggle the state of button using a simlple rule like this; button.selected = !button.selected I hope this solves your problem. — Sandeep, Aug 05 '13 at 16:16

score 12 · Answer 1 · edited Feb 14 '18 at 23:08

12

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.

edited Feb 14 '18 at 23:08

juanjo

3,737
3
39
44

answered Jan 24 '15 at 14:01

Cristian Pena

2,139
1
19
31

rdelmar · Accepted Answer · 2013-08-06T15:50:13.627

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;
}

My actual problem is that I wanted to use the play from ios by using the identifier "play" in xcode interface. We are getting closer because I can change the backgroundImage with your method but why doesn't it work in the same way when I do the same but changing the picture? There are no way to update directly the image ? — Clad Clad, Aug 06 '13 at 08:46
I just checked for identifier changing but same results. creating : [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemPause target:self action:@selector(pushPlay:)]; and same for the play one then in my code setting self.play = pauseIco but it does nothing. — Clad Clad, Aug 06 '13 at 09:18
I finally succed to make it works by putting only my own images, so without using identifier, but if you know a way to do it with the identifier I would be grateful to you. Thanks a lot. — Clad Clad, Aug 06 '13 at 09:30
@CladClad I updated my answer to show how I did it using the system buttons. — rdelmar, Aug 06 '13 at 15:50
Finally I used 2 images and no identifiers for the moment but thanks for your help :) — Clad Clad, Aug 08 '13 at 08:11

score 1 · Answer 3 · answered Aug 05 '13 at 15:56

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!

P. LoThaR · Answer 4 · 2016-04-17T19:35:48.157

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;
}

score -1 · Answer 5 · answered Aug 05 '13 at 16:12

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

}

I can't used this because my item in not in the navigation bar but in a toolbar in the middle of the screen. — Clad Clad, Aug 06 '13 at 08:51

Updating UIImage on UiBarButtonItem from identifier to image

5 Answers5