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

As I support Colin's answer, I want to give you an additional hint to customize the appearance of an UINavigationBar including the alpha.

The trick is to use UIAppearance for your NavigationBar. This enables you to assign an UIImage to your NavigationBar's backgroundImage. You can generate these UIImages programmatically and use for that UIColors and set the colors' alpha properties as you want. I've done this in one of my own applications and it works as expected.

Here I give you some code snippets:

1. E.g. in your ..AppDelegate.m add these lines in didFinishLaunchingWithOptions:

   //create background images for the navigation bar
   UIImage *gradientImage44 = nil; //replace "nil" with your method to programmatically create a UIImage object with transparent colors for portrait orientation
   UIImage *gradientImage32 = nil; //replace "nil" with your method to programmatically create a UIImage object with transparent colors for landscape orientation
   
   //customize the appearance of UINavigationBar
   [[UINavigationBar appearance] setBackgroundImage:gradientImage44 forBarMetrics:UIBarMetricsDefault];
   [[UINavigationBar appearance] setBackgroundImage:gradientImage32 forBarMetrics:UIBarMetricsLandscapePhone];
   [[UINavigationBar appearance] setBarStyle:UIBarStyleDefault];
   

2. Implement convenience methods to programmatically creates UIImage objects, e.g. create a new category for UIImage:

   //UIImage+initWithColor.h
   //
   #import <UIKit/UIKit.h>
   
   @interface UIImage (initWithColor)
   
   //programmatically create an UIImage with 1 pixel of a given color
   + (UIImage *)imageWithColor:(UIColor *)color;
   
   //implement additional methods here to create images with gradients etc.
   //[..]
   
   @end
   
   //UIImage+initWithColor.m
   //
   #import "UIImage+initWithColor.h"
   #import <QuartzCore/QuartzCore.h>
   
   @implementation UIImage (initWithColor)
   
   + (UIImage *)imageWithColor:(UIColor *)color
   {
       CGRect rect = CGRectMake(0, 0, 1, 1);
   
       // create a 1 by 1 pixel context 
       UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0);
       [color setFill];
       UIRectFill(rect);
   
       UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
       UIGraphicsEndImageContext();
   
       return image;
   }
   

3. Re-work your image creation in 1. (#import "UIImage+initWithColor.h" in AppDelegate.m and replace the "nil"s):

This is your spot of interest: by changing your colors' alpha property you are influencing the opacity level of you NavigationBar as well!

            UIImage *gradientImage44 = [UIImage imageWithColor:[UIColor colorWithRed:1.0 green:0.0 blue:1.0 alpha:0.2]];
            UIImage *gradientImage32 = [UIImage imageWithColor:[UIColor colorWithRed:1.0 green:0.0 blue:1.0 alpha:0.2]];

I created a small demo project and add you two screenshots: the view itself has a yellow backgroundColor. The backgroundImages of the NavigationBar have a red color. Screenshot 1 shows a NavigationBar with a value for alpha = 0.2. Screenshot 2 shows a NavigationBar with a value for alpha = 0.8.

Answer 2

The most straightforward way of doing this is modifying the alpha component of navigationBar background view, which at this time (iOS9) is a first navigationBar subview. Note however that we never know if the subview hierarchy will be changed by apple in later releases, so gotta be careful.

let navigationBackgroundView = self.navigationController?.navigationBar.subviews.first
navigationBackgroundView?.alpha = 0.7

Answer 3

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