Fade UIBarButtonItem When Swapped

Question

When I change my UIBarButtonItems they change abruptly, unlike the default which gives a nice but speedy fade animation. You can see this when segueing between view controllers, for instance, the back button will fade in and out. How can I simulate the same effect?

score 12 · Accepted Answer · edited May 23 '17 at 12:24

12

Update - Based on this answer - https://stackoverflow.com/a/10939684/2649021

It looks like you would have to do something like this to make the button itself fade out.

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

And do something like this to make it fade in

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

Otherwise if you want more control over animation properties you would have to create a custom view I believe.

EDIT: I just confirmed that you can fade a UIBarButtonItem custom view using this.

As a test I created a simple project and dropped a UIBarButtonItem onto the navigation bar. I created an outlet to the view controller. In viewDidLoad on the view controller I setup a custom view

-(void)viewDidLoad{
    [super viewDidLoad];
    UILabel *lbl = [[UILabel alloc]initWithFrame:CGRectMake(0,0,40,40)];
    lbl.text = @"test";
    UIView *customView = [[UIView alloc]initWithFrame:CGRectMake(0,0,40,40)];
    [customView addSubview:lbl];
    self.barButtonItem.customView = customView;
}

As a test in viewDidAppear I animated it

 -(void)viewDidAppear:(BOOL)animated
{
    [UIView animateWithDuration:3.0 
                          delay:3.0 
                        options:UIViewAnimationOptionCurveEaseOut        
                            animations:^{
                                self.barButtonItem.customView.alpha = 0;
                   } 
                     completion:^(BOOL finished) {
                                NSLog(@"animation complete");
}];

EDIT: Here's a link to Apples Documentation for a full explanation of UIView animations. https://developer.apple.com/library/ios/documentation/windowsviews/conceptual/viewpg_iphoneos/animatingviews/animatingviews.html

edited May 23 '17 at 12:24

Community

1
1

answered Mar 08 '14 at 13:45

digitalHound

4,384
27
27

1

the UIBarButtonItem doesn't have an alpha property, because it's not a UIView subclass. – Nicola Miotto Mar 08 '14 at 13:49
I was looking for the same solution, and I've put the animation in prepareForSegue. as there is no alpha, I've try with setting the tintColor. result : at segue we don't see the change, when back from segue the change have been applied. Conclusion : good idea (I had the same ;-D) but it did not work - this is interesting question ! vote +1 and as favorite, for me – Armand DOHM Mar 08 '14 at 14:02
Good call, I was thinking of the regular UIButton. – digitalHound Mar 08 '14 at 14:02
Are you using a custom view at all? If you initWithCustomView you can set the alpha on the custom view. my button.customView.alpha = 0; – digitalHound Mar 08 '14 at 14:05
I'm not using a custom view for my buttons, I'm using UIBarButtonSystemItemAdd, UIBarButtonSystemItemTrash and UIBarButtonSystemItemCamera. – Michael Mangold Mar 08 '14 at 14:25
Ok, I just posted an update for custom views, I'll keep digging for what you're using. – digitalHound Mar 08 '14 at 14:29
@digitalHound, we are agree that this is the way to animate view, but Michael want a fade out during segue to child controller. I've try to do the animation in prepareForSegue and in viewWillDisappear, but it's to late (I think the transition is already started, and iOS did already take a shoot of the screen). May be the solution is to build a custom navigation controller and override `- (void)transitionFromViewController:(UIViewController *)fromViewController toViewController:(UIViewController *)toViewController duration:(NSTimeInterval)duration...` – Armand DOHM Mar 08 '14 at 14:40
@ArmandDOHM I've updated with someone else's solution. It seems to work during segue. – digitalHound Mar 08 '14 at 14:51
Thanks so much. The [self.navigationItem setRightBarButtonItem:myButton animated:YES]; works great. – Michael Mangold Mar 08 '14 at 21:36

score -1 · Answer 2 · answered Mar 08 '14 at 14:34

-1

You might have to create a custom bar button item using a view or an image, and then animate the properties of the view as digitalHound shows.

answered Mar 08 '14 at 14:34

Duncan C

128,072
22
173
272

Fade UIBarButtonItem When Swapped

2 Answers2