IOS- navigation bar background color and transparency

First, let’s take a look at what impact the navigation bar will have

1 set the background color –backgroundColor

UINavigationBar * bar = self.navigationController.navigationBar; bar.backgroundColor = [UIColor redColor];
IOS- navigation bar background color and transparency

Effect: opaque, not pure red
we want

IOS- navigation bar background color and transparency

UINavigationBar is set to pure red


The navigation bar is looked pale red, because there are a few top cover, and the cover is not cleancolor, so the display effect, not for pure red. It is noteworthy that the navigation bar below and above a deep color, color is shallow, this is because the UINavigationBar height is 44, and the height of the the above View is 64

2 set the background image –BackgroundImage

  • First encapsulates a method to generate the background image
- (UIImage) imageWithFrame: (CGRect) frame alphe: (CGFloat alphe) {frame = CGRectMake (0, 0, frame.size.width, frame.size.height); UIColor *redColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:alphe]; UIGraphicsBeginImageContext (frame.size); CGContextRef context = UIGraphicsGetCurrentContext (CGContextSetFillColorWithColor (context); [redColor, CGColor]); CGContextFillRect (context, frame) UIImage; *theImage = UIGraphicsGetImageFromCurrentImageContext (UIGraphicsEndImageContext); (return); theImage;}
  • Set background image (here alpha=1.0)
UINavigationBar * bar = self.navigationController.navigationBar; UIImage = *bgImage [self imageWithFrame:CGRectMake ([UIScreen mainScreen].bounds.size.width, 0, 0, 64) alphe:1.0] [bar setBackgroundImage:bgImage forBarMetrics: UIBarMetricsDefault];
IOS- navigation bar background color and transparency

translucent red, uniform color

IOS- navigation bar background color and transparency

UINavigationBarBackground is set to red, compared with the setting of backgroundColor two View

  • Here the picture alpha need to pay attention to: whether the picture alpha value is equal to 1, there will be a translucent effect, the greater the value of transparency is high, but can not become completely opaque. (logically speaking, we set the picture alpha=1.0, should be opaque to, but there is still a little behind the translucent. Would explain)

3 set barTintColor

UINavigationBar * bar = self.navigationController.navigationBar; bar.barTintColor = [UIColor redColor];
IOS- navigation bar background color and transparency

uniform, opaque red

IOS- navigation bar background color and transparency

top layer View to red

4 translucent attributes

  • This property is used to determine whether the navigation bar background is semi transparent. If you set this property to NO, you will not have a translucent effect
IOS- navigation bar background color and transparency
  • The above three ways, set translucent = NO, then there is no longer a translucent effect. It is worth noting that, when the backgroundColor is set to red, if you set translucent = NO, the effect is white opaque, not red. This is because the backgroundColor effect is arranged below the UINavigationBar, and translucent = NO is in effect the above UINavigationBarBackground, the UINavigationBarBackground is an opaque white, the red also could not see
    IOS- navigation bar background color and transparency

Why the above effect?

  • Let’s take a look at the official document on the interpretation of translucent
New behavior on iOS is YES. You May 7 Default force an opaque background by setting the property to NO. If the navigation bar has a custom background image, the default is inferred from the alpha values of the image YES if it has any pixel with alpha < If you send setTranslucent:YES 1; to a bar with an opaque custom background image it will apply a system opacity less than the image. If you 1 to send setTranslucent:NO to a bar with a translucent custom background image it will provide an opaque background for the image using the bar's barTintColor if defined, or black for UIBarStyleBlack or white for UIBarStyleDefault if barTintColor is nil. Default is NO on iOS 6 and earlier. Always YES if barStyle is set to UIBarStyleB LackTranslucent
  • The following is a personal summary of 1.iOS on content above 6 and before, the default NO (opaque), iOS7.0 default YES (translucent). If barStyle is set to UIBarStyleBlackTranslucent, Yes 2 can always by setting this property to NO, forced to change the background for 3 if navigation bar is opaque to set custom background image, then the default value will be according to the background and the value of alpha, if the alpha value is 1, then the default value is 4 if the navigation YES bar has a custom opaque background image, and then set setTranslucent = YES, then the background image will use the system opaque alpha value (< 1) if navigation bar has a 5 custom transparent background image, and then set translucent = NO, then get the opaque effect. If barTintColor is set, it is equivalent to barTin by setting the TColor to complete. If you do not set the barTintColor, then is completed by setting barStyle. Black (UIBarStyleBlack), or white (UIBarStyleDefault)
  • From third and fourth points, you can understand why set the background image alpha=1.0, but still get translucent effect
  • The fifth explains why white effect after setting up backgroundColor set translucent = NO are opaque. Because the default barStyle = UIBarStyleDefault. if set barStyle = UIBarStyleDefault, the effect is to black.
IOS- navigation bar background color and transparency
  • In general, as long as it is translucent = NO, it must be a transparent effect. At translucent = YES, set the barTintColor can also get opaque effect