Change the alpha value of the navigation bar

Question

Is this possible?

I want to change the alpha value of the navigation bar in my view controller (in an animation), but if I do self.navigationController.navigationBar.alpha = 0.0;, the portion of the screen the navigationBar took up totally disappears and leaves a black box, which is not what I'd like (I'd prefer it to be the color of self.view's background).

Answer 1

Directly from the Apple Developer reference:

"there are only a handful of direct customizations you can make to the navigation bar. Specifically, it is alright to modify the barStyle, tintColor, and translucent properties, but you must never directly change UIView-level properties such as the frame, bounds, alpha, or hidden properties directly."

You can however set the translucence property of the navigation bar. If you do [self.navigationController.navigationBar setTranslucent:YES]; should solve your problem. You can also try seeing if any of the UIBarStyle enums are something you want.

Answer 2

Swift3

var navAlpha = // Your appropriate calculation   
self.navigationController!.navigationBar.backgroundColor =  UIColor.red.withAlphaComponent(navAlpha)

Answer 3

If you just want to get rid of the navigationBar in an animated way you could do:

[self.navigationController setNavigationBarHidden:YES animated:YES];

If you want to control the animation and its necessary to set the alpha to 0.0, read on:

The "black box" you are seeing is from the underlying view or window. If you just want your views color instead of the "black box" do:

self.navigationController.view.backgroundColor = self.view.backgroundColor;

[UIView animateWithDuration:1.0 delay:1.0 options:0 animations:^{
    self.navigationController.navigationBar.alpha = 0.0;
} completion:NULL];

If you want your actual view to be where the navigationBar was, you need to increase the height of your view:

[UIView animateWithDuration:1.0 delay:1.0 options:0 animations:^{
    self.navigationController.navigationBar.alpha = 0.0;

    CGFloat navigationBarHeight = self.navigationController.navigationBar.frame.size.height;

    CGRect frame = self.view.frame;
    frame.origin.y -= navigationBarHeight;
    frame.size.height += navigationBarHeight;
    self.view.frame = frame;
} completion:NULL];

Answer 4

MickBraun's answer in Swift:

1. In AppDelegate.swift add these lines in didFinishLaunchingWithOptions:

   // create background images for the navigation bar
   let gradientImage44 = UIImage.imageWithColor(UIColor(red: 1.0, green: 0.0, blue: 1.0, alpha: 0.2))
   let gradientImage32 = UIImage.imageWithColor(UIColor(red: 1.0, green: 0.0, blue: 1.0, alpha: 0.2))
   
   // customize the appearance of UINavigationBar
   UINavigationBar.appearance().setBackgroundImage(gradientImage44, forBarMetrics: .Default)
   UINavigationBar.appearance().setBackgroundImage(gradientImage32, forBarMetrics: .Compact)
   UINavigationBar.appearance().barStyle = .Default
   

2. Implement convenience methods to programmatically create UIImage objects.

   class func imageWithColor(colour: UIColor) -> UIImage {
       let rect = CGRectMake(0, 0, 1, 1)
   
       // Create a 1 by 1 pixel content
       UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
       colour.setFill()
       UIRectFill(rect)
   
       let image = UIGraphicsGetImageFromCurrentImageContext()
       UIGraphicsEndImageContext()
   
       return image
   }
   

Answer 5

You have a few options depending, in part, upon the barStyle of your UINavigationBar. The main thing is realizing that you likely don't necessarily have to animate the alpha property to get the effect you're describing.

UIBarStyleDefault or UIBarStyleBlackOpaque Option A is to set your UINavigationBar translucent property to YES, then animate the alpha:

            navigationBar.translucent = YES; // ideally set this early, in the nib/storyboard, or viewDidLoad

...

            [UIView animateWithDuration: 1.0
                             animations: ^{

                                 // toggle:
                                 navigationBar.alpha = navigationBar.alpha == 0 ? 1.0 : 0.0;

                             }];

In this scenario your view will be positioned behind your navbar, even when its alpha is 1.0. The downside to this scenario is that even with a 1.0 alpha you might see a tinge of your view's background color behind the UINavigationBar. Also, all of your subviews will need to be positioned 44 points down from the top.

UIBarStyleDefault or UIBarStyleBlackOpaque Option B is to hide the navbar in a cross-disolve transition animation. This will expose the superview of the UINavigationBar. If you're using a UINavigationController then the black background of the UINavigationController view is what you'll see - but you can set the background color of the UINavigationController view to match your view to get the effect that you want:

    UINavigationBar* navigationBar = self.navigationController.navigationBar;

    self.navigationController.view.backgroundColor = self.view.backgroundColor;
    [UIView transitionWithView: navigationBar
                      duration: 1.0
                       options: UIViewAnimationOptionTransitionCrossDissolve
                    animations: ^{
                        // toggle:
                        navigationBar.hidden = !navigationBar.hidden;
                    }
                    completion: nil];

One thing to watch out for with this solution might be a layout issue if the UINavigationController updates your view frame because you hid the UINavigationBar. This would be fine except that your subviews might shift up 44 pixels if they're anchored to the top left. To work around this you might consider anchoring your subviews to the bottom of your view instead (either with springs or with layout constraints).

UIBarStyleDefault or UIBarStyleBlackOpaque Option C is to cover up the UINavigationBar with another view, again using a cross-disolve transition animation:

        UINavigationBar* navigationBar = self.navigationController.navigationBar;

        [UIView transitionWithView: navigationBar
                          duration: 1.0
                           options: UIViewAnimationOptionTransitionCrossDissolve | UIViewAnimationOptionAllowAnimatedContent
                        animations: ^{

                            // toggle:
                            const int tag = 1111; 
                            UIView* navOverlayView = [navigationBar viewWithTag: tag];
                            if ( navOverlayView == nil )
                            {
                                navOverlayView = [[UIView alloc] initWithFrame: CGRectInset( navigationBar.bounds, 0, -3 ) ];
                                navOverlayView.backgroundColor = self.view.backgroundColor;
                                navOverlayView.tag = tag;
                                [navigationBar addSubview: navOverlayView];
                            }
                            else
                            {
                                [navOverlayView removeFromSuperview];
                            }
                        }
                        completion: nil];

UIBarStyleBlackTranslucent: This option is the easiest, as the UINavigationBar is already translucent, and your view is already behind it. Simply animate the alpha:

    [UIView animateWithDuration: 1.0
                     animations: ^{

                         // toggle:
                         navigationBar.alpha = navigationBar.alpha == 0 ? 1.0 : 0.0;

                     }];

Answer 6

This should get you the effect you desire:

self.navigationController.navigationBar.alpha = 0.0;
self.navigationController.navigationBar.frame = CGRectMake(0,0,320,0);

Did not try this in an animation, works in my viewDidAppear though, hope it works.