iOS-导航栏背景色和透明度探究

首先,我们来看看通过以下设置将会对导航栏产生什么影响

1.设置背景色--backgroundColor

 UINavigationBar * bar = self.navigationController.navigationBar;
bar.backgroundColor = [UIColor redColor];

Snip20160819_1.png

效果:不透明,不是我们想要的纯红色

Snip20160819_3.png
UINavigationBar被设置为纯红色.

分析:

整个导航栏看上去之所以呈现淡红色,是因为上面还有几层遮盖,且遮盖并非cleancolor,效果叠加,所以显示出来不为纯红色.还有一点值得注意,导航栏下面颜色深,而上面一部分颜色较浅,这是因为UINavigationBar高度为44,而其上面的View的高度为64.

2.设置背景图片--BackgroundImage

• 首先封装了一个方法,用来生成背景图片

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

• 设置背景图片(这里alpha=1.0)

 UINavigationBar * bar = self.navigationController.navigationBar;
    UIImage *bgImage = [self imageWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 64) alphe:1.0];
    [bar setBackgroundImage:bgImage forBarMetrics:UIBarMetricsDefault];

Snip20160819_4.png
半透明红色,上下颜色均匀
Snip20160819_5.png
UINavigationBarBackground被设置为红色,与设置backgroundColor相比少了两层View

• 在这里图片的alpha值需要注意:无论图片alpha值是否等于1,都会有半透明效果,值越大不透明度越高,但是不可能变成完全不透明.(按理来说,我们设置的图片alpha=1.0,应该是不透明才对,但是这里仍然半透明,这一点在后面会解释)

3. 设置barTintColor

 UINavigationBar * bar = self.navigationController.navigationBar;
 bar.barTintColor = [UIColor redColor];

Snip20160819_8.png
均匀,不透明纯红色
Snip20160819_10.png
最上面一层View变为红色

4. translucent属性

• 该属性用来确定navigation bar背景是否为半透明.如果设置该属性为NO,那么就不会有上面半透明的效果.

Snip20160819_17.png

• 上面三种方式下,都设置translucent = NO,那么都不再有半透明效果.值得注意的是,当设置的是backgroundColor为红色时,如果设置translucent = NO,得到的是不透明的白色效果,而不是红色.这时因为设置backgroundColor影响的是下面的UINavigationBar,而translucent = NO影响的是处于上面的UINavigationBarBackground,此时UINavigationBarBackground为不透明白色,下面的红色也就看不到了.

  
  Snip20160819_21.png

---

为什么会出现上面的效果呢?

• 我们先来看看官方文档对translucent的解释

 New behavior on iOS 7.
 Default is YES.
 You may 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 < 1.0
 If you send setTranslucent:YES to a bar with an opaque custom background image
 it will apply a system opacity less than 1.0 to the image.
 If you 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 UIBarStyleBlackTranslucent

• 下面是个人对上面内容的总结

• 1.iOS 6.0及以前,默认NO(不透明),iOS7.0开始默认YES(半透明).如果barStyle设置为UIBarStyleBlackTranslucent,总是Yes
• 2.能够通过设置该属性为NO,强制改变背景为不透明
• 3.如果navigation bar有设置自定义的背景图片,那么默认值将根据该背景图片的alpha值而定,如果图片alpha值为1.0,那么默认值为YES
• 4.如果navigation bar拥有一个自定义不透明的背景图片,再设置setTranslucent = YES,那么该背景图片将采用系统不透明的alpha值(<1.0)
• 5.如果navigation bar拥有一个自定义半透明的背景图片,再设置translucent = NO,那么得到不透明效果. 如果设置了barTintColor,那么相当于通过设置barTintColor来完成.如果没有设置barTintColor,那么就是通过设置barStyle完成.黑色(UIBarStyleBlack),或者白色(UIBarStyleDefault)

• 从第3和第4点,就能理解为什么设置背景图片alpha=1.0,得到的却还是半透明效果.
• 第5点可以解释,为什么设置backgroundColor后再设置translucent = NO得到不透明的白色效果.因为默认barStyle = UIBarStyleDefault.如果设置barStyle = UIBarStyleDefault,的到的就是黑色效果.

Snip20160819_22.png

• 总的来说,只要是translucent = NO,得到的就一定是不透明效果.在translucent = YES时,设置barTintColor也能得到不透明效果.