首先,我們來看看通過以下設(shè)置將會對導(dǎo)航欄產(chǎn)生什么影響
1.設(shè)置背景色--backgroundColor
UINavigationBar * bar = self.navigationController.navigationBar;
bar.backgroundColor = [UIColor redColor];
Snip20160819_1.png
效果:不透明,不是我們想要的純紅色
Snip20160819_3.png
UINavigationBar被設(shè)置為純紅色.
分析:
整個導(dǎo)航欄看上去之所以呈現(xiàn)淡紅色,是因為上面還有幾層遮蓋,且遮蓋并非cleancolor,效果疊加,所以顯示出來不為純紅色.還有一點值得注意,導(dǎo)航欄下面顏色深,而上面一部分顏色較淺,這是因為UINavigationBar高度為44,而其上面的View的高度為64.
2.設(shè)置背景圖片--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;
}
- 設(shè)置背景圖片(這里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被設(shè)置為紅色,與設(shè)置backgroundColor相比少了兩層View
- 在這里圖片的alpha值需要注意:無論圖片alpha值是否等于1,都會有半透明效果,值越大不透明度越高,但是不可能變成完全不透明.(按理來說,我們設(shè)置的圖片alpha=1.0,應(yīng)該是不透明才對,但是這里仍然半透明,這一點在后面會解釋)
3. 設(shè)置barTintColor
UINavigationBar * bar = self.navigationController.navigationBar;
bar.barTintColor = [UIColor redColor];
Snip20160819_8.png
均勻,不透明純紅色
Snip20160819_10.png
最上面一層View變?yōu)榧t色
4. translucent屬性
- 該屬性用來確定navigation bar背景是否為半透明.如果設(shè)置該屬性為NO,那么就不會有上面半透明的效果.
Snip20160819_17.png
-
上面三種方式下,都設(shè)置translucent = NO,那么都不再有半透明效果.值得注意的是,當(dāng)設(shè)置的是backgroundColor為紅色時,如果設(shè)置translucent = NO,得到的是不透明的白色效果,而不是紅色.這時因為設(shè)置backgroundColor影響的是下面的UINavigationBar,而translucent = NO影響的是處于上面的UINavigationBarBackground,此時UINavigationBarBackground為不透明白色,下面的紅色也就看不到了.
Snip20160819_21.png
為什么會出現(xiàn)上面的效果呢?
- 我們先來看看官方文檔對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
- 下面是個人對上面內(nèi)容的總結(jié)
- 1.iOS 6.0及以前,默認(rèn)NO(不透明),iOS7.0開始默認(rèn)YES(半透明).如果barStyle設(shè)置為UIBarStyleBlackTranslucent,總是Yes
- 2.能夠通過設(shè)置該屬性為NO,強制改變背景為不透明
- 3.如果navigation bar有設(shè)置自定義的背景圖片,那么默認(rèn)值將根據(jù)該背景圖片的alpha值而定,如果圖片alpha值為1.0,那么默認(rèn)值為YES
- 4.如果navigation bar擁有一個自定義不透明的背景圖片,再設(shè)置setTranslucent = YES,那么該背景圖片將采用系統(tǒng)不透明的alpha值(<1.0)
- 5.如果navigation bar擁有一個自定義半透明的背景圖片,再設(shè)置translucent = NO,那么得到不透明效果. 如果設(shè)置了barTintColor,那么相當(dāng)于通過設(shè)置barTintColor來完成.如果沒有設(shè)置barTintColor,那么就是通過設(shè)置barStyle完成.黑色(UIBarStyleBlack),或者白色(UIBarStyleDefault)
- 從第3和第4點,就能理解為什么設(shè)置背景圖片alpha=1.0,得到的卻還是半透明效果.
- 第5點可以解釋,為什么設(shè)置backgroundColor后再設(shè)置translucent = NO得到不透明的白色效果.因為默認(rèn)barStyle = UIBarStyleDefault.如果設(shè)置barStyle = UIBarStyleDefault,的到的就是黑色效果.
Snip20160819_22.png
- 總的來說,只要是translucent = NO,得到的就一定是不透明效果.在translucent = YES時,設(shè)置barTintColor也能得到不透明效果.
