iOS中UIViewController對(duì)象如果通過(guò)push方式呈現(xiàn)马僻，是由UINavigationController利用類棧結(jié)構(gòu)去維護(hù)的；而UINavigationBar則是“寄生”在是UINavigationController上的屬性對(duì)象懦底，但棧頂?shù)腢IViewController對(duì)象卻可以操作自身navigationItem屬性（UINavigationItem對(duì)象）去決定這么多controller共享的UINavigationBar的視覺(jué)和交互表現(xiàn)……一言以蔽之，貴圈真亂！但UINavigationBar這么較特殊的存在，落到程序猿手中黍瞧，還是得老老實(shí)實(shí)為需求服務(wù)。且恕筆者才疏學(xué)淺原杂，就不展開(kāi)那么多啦印颤，單單就聊一聊關(guān)于UINavigationBar背景色的那些事。
曲徑初探
閑話休表穿肄，直接拎出可能會(huì)影響UINavigationBar背景色表現(xiàn)的那些屬性瞧瞧吧
0x01. backgroundColor
這個(gè)不用多介紹了年局，從UIView基類上繼承而來(lái)，最常用的背景色設(shè)置手段咸产，可惜UINavigationBar偏偏不那么尋常
- 先給UINaigationBar設(shè)backgroundColor為純綠色矢否，
self.navigationController.navigationBar.backgroundColor = [UIColor greenColor];
實(shí)際效果如下：
這種朦朧的味道，仿佛是三月春風(fēng)吹拂過(guò)茫茫草原……呃脑溢，可是這明顯不是純正綠色敖├省？
碰上這種幕后的小動(dòng)作屑彻，就該Xcode自帶神器Debug View Hierarchy派上用場(chǎng)了验庙，讓我們瞧瞧是誰(shuí)在里面搗亂？
<font color="#4590a3">（此處以iOS 9.3為例社牲，但iOS10中導(dǎo)航欄結(jié)構(gòu)其實(shí)發(fā)生了變化粪薛，但層級(jí)相似）</font>
居然純綠色的UINavigationBar前面還有好幾層啊，最可惡的就是淡綠色的那層搏恤，完全遮蓋住了那純正的味道汗菜。從View Hierarchy可見(jiàn)，這個(gè)玩意原來(lái)是名為_(kāi)UIBackdropEffectView的某個(gè)私有類對(duì)象挑社，而且還非UINavigationBar的直接子視圖陨界，中間還隔了_UIBackdropView類對(duì)象。果然幕后好多見(jiàn)不得人的勾當(dāng)……
- 接下再找另外一個(gè)頁(yè)面練練手痛阻，如法炮制菌瘪，設(shè)置UINaigationBar其backgroundColor為純紅色
self.navigationController.navigationBar.backgroundColor = [UIColor redColor];
但是效果卻神奇的發(fā)生了變化！見(jiàn)下圖
呵呵，隔著屏幕放佛也能聽(tīng)到某些人內(nèi)心OS：這傻子連這都寫(xiě)不對(duì)……但我以蘋(píng)果爸爸的聲譽(yù)起誓俏扩，代碼寫(xiě)的沒(méi)錯(cuò)糜工！那問(wèn)題是出在哪呢？
正在苦苦思索中的我不小心瞥到了這么一句代碼：
self.navigationBar.translucent = NO;
貌似translucent屬性默認(rèn)值為YES吧录淡，難道是這家伙在搗鬼捌木？那么就先把這個(gè)屬性給扒個(gè)干凈吧
0x02. translucent
@property(nonatomic,assign,getter=isTranslucent) BOOL translucent NS_AVAILABLE_IOS(3_0) UI_APPEARANCE_SELECTOR; // Default is NO on iOS 6 and earlier. Always YES if barStyle is set to UIBarStyleBlackTranslucent
Description
A Boolean value indicating whether the navigation bar is translucent (YES) or not (NO).
The default value is YES. If the navigation bar has a custom background image, the default is YES if any pixel of the image has an alpha value of less than 1.0, and NO otherwise.
If you set this property to YES on a navigation bar with an opaque custom background image, the navigation bar will apply a system opacity less than 1.0 to the image.
If you set this property to NO on a navigation bar with a translucent custom background image, the navigation bar provides an opaque background for the image using black if the navigation bar has UIBarStyleBlack style, white if the navigation bar has UIBarStyleDefault, or the navigation bar’s barTintColor if a custom value is defined.
Availability iOS (3.0 and later), tvOS (3.0 and later)
原來(lái)這家伙會(huì)根據(jù)UINavigationBar設(shè)置的自定義的背景圖片(見(jiàn)setBackgroundImage:forBarMetrics:方法)，去判定是否為背景圖添加透明度嫉戚！
根據(jù) 1 中的探究刨裆，translucent屬性還會(huì)影響UINavigationBar backgroundColor的體現(xiàn)與否，不僅如此彬檀，諸位還記得UIViewController在iOS7.0中引入的如下兩個(gè)屬性嗎：
@property(nonatomic,assign) UIRectEdge edgesForExtendedLayout NS_AVAILABLE_IOS(7_0); // Defaults to UIRectEdgeAll
@property(nonatomic,assign) BOOL extendedLayoutIncludesOpaqueBars NS_AVAILABLE_IOS(7_0); // Defaults to NO, but bars are translucent by default on 7_0.
特別是extendedLayoutIncludesOpaqueBars帆啃，在iOS7.0后默認(rèn)為NO，然而若UINavigationBar translucent屬性為YES窍帝，則UINavigationController其topViewControll.view是包含UINavigationBar和UIStatusBar下面覆蓋的那片區(qū)域的纪挎。但若translucent屬性為NO涯鲁，則除非設(shè)置controller的extendedLayoutIncludesOpaqueBars屬性為YES侈净，topViewControll.view都是不包含此區(qū)域的肢簿。
這也是經(jīng)常見(jiàn)到與頁(yè)面大小一致的控件卻往往會(huì)有兩種不同的frame指定方式的原因：
self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, NAV_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT-NAV_HEIGHT) style:UITableViewStylePlain];
或
self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, self.view.bounds.size.height) style:UITableViewStylePlain];
平心而論，我個(gè)人以為同一個(gè)iOS App項(xiàng)目?jī)?nèi)深浮，最好統(tǒng)一規(guī)范controller這些屬性設(shè)置压怠，以免這兩種思路碰撞出的不是火花，而是排版錯(cuò)亂的各種bug……
既然使用backgroundColor可能會(huì)受其他屬性的干擾略号，那還是要嘗試一些能更直接了當(dāng)?shù)姆绞剑热缦旅孢@個(gè)原生方法~
0x03. setBackgroundImage:forBarMetrics:方法
其完全體聲明如下
- (void)setBackgroundImage:(nullable UIImage *)backgroundImage forBarMetrics:(UIBarMetrics)barMetrics NS_AVAILABLE_IOS(5_0) UI_APPEARANCE_SELECTOR;
看到這個(gè)方法洋闽，我們不禁陷入沉思：既然可以設(shè)置背景圖玄柠，那么用純色去填充生成UIImage對(duì)象，然后再利用該方法不就解決了問(wèn)題嗎诫舅？思路很簡(jiǎn)單羽利，實(shí)現(xiàn)很明了：
//KPAppImage
+ (UIImage *)createImageWithColor:(UIColor *)color size:(CGSize)size {
CGRect rect = CGRectMake(0.0f, 0.0f, size.width, size.height);
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
CGContextFillRect(context, rect);
UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return theImage;
}
//UINavigationBar+Color
- (void)KPSetBackgroundColor:(UIColor*)color
{
UIImage *img = [KPAppImage createImageWithColor:color size:CGSizeMake(1, 1)];
[self setBackgroundImage: forBarMetrics:UIBarMetricsDefault];
}
嗯，參照視覺(jué)大大要求刊懈，設(shè)置背景色為0xf8f8f8的效果新鮮出爐这弧！
呃，怎么感覺(jué)有那么一絲不對(duì)勁虚汛？??
毋需動(dòng)用視覺(jué)大大的像素眼匾浪，我們已經(jīng)發(fā)現(xiàn)了端倪！
這不是列表支持下拉刷新的loading indicator嗎卷哩，居然還薄紗披身半遮面……
哎蛋辈，不用多說(shuō)，八成還是translucent屬性搞的鬼！
立馬把這些可惡的UINavigationBar的translucent屬性改為NO冷溶，沒(méi)想到不一會(huì)各路bug如??般翩然而至：“消息頁(yè)面怎么導(dǎo)航欄底下留了一塊空白渐白？”“為啥頁(yè)面排版都錯(cuò)亂？”“iOS同學(xué)你們?cè)诟闵耨R逞频，沒(méi)有bug都改出bug了纯衍！”……
飽含著眼淚的程序猿啊，默默的把代碼回滾了……哎苗胀，剛剛還提醒大家注意呢襟诸，結(jié)果自己踩進(jìn)大坑，各路UINavigationController translucent屬性設(shè)置不一致的歷史遺留問(wèn)題太可惡了柒巫，任務(wù)這么緊急励堡，可再不敢隨便改動(dòng)了。那怎么才能讓效果過(guò)得了視覺(jué)大大的像素眼呢堡掏？只好再去瞅瞅UINavigationBar的視圖層級(jí)結(jié)構(gòu)应结，看看有啥治病偏方木有
洞天石扉，訇然中開(kāi)
0x04. 探查UINavigationBar View Hierarchy(before iOS10 vs iOS10)
借助Xcode View Hierarchy Debug工具泉唁，查看僅通過(guò)方案3設(shè)置背景色且translucent屬性為YES的UINavigationBar對(duì)象鹅龄，可得iOS10之前的視圖結(jié)構(gòu)如下：
而iOS10的UINavigationBar視圖結(jié)構(gòu)如圖：
同時(shí)打印選中的UIImageView對(duì)象其description如下，可見(jiàn)是默認(rèn)其alpha通道非1.0即略微透明：
<UIImageView: 0x7fa87ec42d60; frame = (0 0; 320 64); alpha = 0.909804; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x60000042e060>> - (null)
當(dāng)然亭畜，如果關(guān)閉translucent屬性扮休，自然不會(huì)有導(dǎo)航欄透視的問(wèn)題，但假如是存在前述的“歷史遺留問(wèn)題”拴鸵，這種修正影響頁(yè)面會(huì)比較龐多的情況玷坠，有沒(méi)有附帶傷害更小的解決方案呢？
自然是天無(wú)絕人之路劲藐，程序猿們總能想出一些詭計(jì)來(lái)實(shí)現(xiàn)期望的效果八堡。很明顯，如若避免透視導(dǎo)航欄其層級(jí)之下內(nèi)容聘芜，讓其渲染背景色的視圖（before iOS10:_UINavigationBarBackground, iOS10:_UIBarBackground)以及其子視圖不透明就可以了嘛兄渺，那么自然會(huì)有兩個(gè)方案：
- 方案1：把這些alpha值不為1.0的控件設(shè)置為不透明
- 方案2：利用別的視圖遮蔽掉這些透明控件
很不幸的是，我對(duì)方案1的嘗試失敗了汰现，特別是有設(shè)置backgroundColor的情況下挂谍，UINavigationBar其subviews（或迭代包含的subviews）還包括了_UIBackDropView（before iOS10)、UIVisualEffectView（iOS10)等模糊效果控件瞎饲，對(duì)其設(shè)置alpha或背景色效果可能無(wú)效甚至表現(xiàn)有問(wèn)題口叙，故此方案暫告一段落。
那么方案2的表現(xiàn)呢嗅战？
啊哦庐扫，終于達(dá)成了為導(dǎo)航欄完美設(shè)置0xf8f8f8背景色的需求！
再來(lái)剖析一下此時(shí)的View Hierarchy
眼尖的同學(xué)可能發(fā)現(xiàn)，與之前的View Hierarchy相比形庭，_UIBarBackground的subviews中似乎多了一個(gè)UIView對(duì)象——沒(méi)錯(cuò)铅辞，這個(gè)UIView對(duì)象即擔(dān)負(fù)著填充背景色且遮擋可能出現(xiàn)模糊透視的任務(wù)的關(guān)鍵視圖。
Talk is cheap, show me the code~~
- (UIView *)overlay
{
return objc_getAssociatedObject(self, &overlayKey);
}
- (void)setOverlay:(UIView *)overlay
{
objc_setAssociatedObject(self, &overlayKey, overlay, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
- (void)KPSetBackgroundColor:(UIColor *)backgroundColor
{
if (!self.overlay) {
[self setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
UIView *backgroundView = [self KPGetBackgroundView];
self.overlay = [[UIView alloc] initWithFrame:backgroundView.bounds];
self.overlay.userInteractionEnabled = NO;
self.overlay.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
[backgroundView insertSubview:self.overlay atIndex:0];
}
self.overlay.backgroundColor = backgroundColor;
}
- (UIView*)KPGetBackgroundView
{
//iOS10之前為 _UINavigationBarBackground, iOS10為 _UIBarBackground
//_UINavigationBarBackground實(shí)際為UIImageView子類萨醒，而_UIBarBackground是UIView子類
//之前setBackgroundImage直接賦值給_UINavigationBarBackground斟珊，現(xiàn)在則是設(shè)置后為_(kāi)UIBarBackground增加一個(gè)UIImageView子控件方式去呈現(xiàn)圖片
if ([currentSystemVersion floatValue] >= 10.0) {
UIView *_UIBackground;
NSString *targetName = @"_UIBarBackground";
Class _UIBarBackgroundClass = NSClassFromString(targetName);
for (UIView *subview in self.subviews) {
if ([subview isKindOfClass:_UIBarBackgroundClass.class]) {
_UIBackground = subview;
break;
}
}
return _UIBackground;
}
else {
UIView *_UINavigationBarBackground;
NSString *targetName = @"_UINavigationBarBackground";
Class _UINavigationBarBackgroundClass = NSClassFromString(targetName);
for (UIView *subview in self.subviews) {
if ([subview isKindOfClass:_UINavigationBarBackgroundClass.class]) {
_UINavigationBarBackground = subview;
break;
}
}
return _UINavigationBarBackground;
}
}
#pragma mark - shadow view
- (void)KPHideShadowImageOrNot:(BOOL)bHidden
{
UIView *bgView = [self KPGetBackgroundView];
//shadowImage應(yīng)該是只占一個(gè)像素，即1.0/scale
for (UIView *subview in bgView.subviews) {
if (CGRectGetHeight(subview.bounds) <= 1.0) {
subview.hidden = bHidden;
}
}
}
設(shè)置overlay的設(shè)計(jì)是比較普遍使用的一種辦法富纸，但上述實(shí)現(xiàn)還針對(duì)iOS10之前與之后UINavigationBar不同的View Hierarchy去更精準(zhǔn)地插入overlay囤踩；同時(shí)還可以很方便的定位導(dǎo)航欄下方的陰影條，可以隨心所欲地設(shè)置其隱藏或顯現(xiàn)晓褪。
0x05. 歸去來(lái)兮
綜上所述堵漱，僅僅是設(shè)置UINavigationBar背景色這么簡(jiǎn)簡(jiǎn)單單的效果，卻可能會(huì)涉及這么多關(guān)聯(lián)因素涣仿。(以上語(yǔ)錄都可以入選裝逼遭雷劈的典型案例了吧……??）
不得不感嘆勤庐，縱然牛逼如蘋(píng)果，把UI相關(guān)的設(shè)計(jì)和接口做到純粹的簡(jiǎn)約清晰也還是很有難度好港。
但是忽然想到愉镰，冥冥之中居然還遺漏了UINavigationBar的一個(gè)關(guān)鍵屬性，即 barTintColor
@property(nullable, nonatomic,strong) UIColor *barTintColor NS_AVAILABLE_IOS(7_0);
Description
The tint color to apply to the navigation bar background.
This color is made translucent by default unless you set the translucent property to NO.
看描述似乎我們上面那一番勞累難道白費(fèi)了钧汹？丈探？拿事實(shí)說(shuō)話，來(lái)瞧一瞧為translucent為YES的UINavigationBar對(duì)象設(shè)置其barTintColor為0xf8f8f8 RGB色值后的表現(xiàn)：
效果居然出乎意料的不錯(cuò)拔莱。不過(guò)用xscope仔細(xì)探查像素發(fā)現(xiàn)碗降，雖然顏色看起來(lái)差不多，但實(shí)際取到色值卻是在0xf4f4f4~0xf9f9f9之間塘秦，并不是完全純正的0xf8f8f8讼渊。這是怎么回事呢？照舊Debug View Hierarchy大法好~
<font color="#4590a3">（此處以iOS 10作為測(cè)試版本）</font>
又出現(xiàn)了UIVisualEffectView這家伙嗤形！前面提到過(guò)精偿，它是負(fù)責(zé)產(chǎn)生模糊透明特效的弧圆，而View Hierarchy中看到它自己本身是透明的赋兵，關(guān)鍵還是_UIVisualEffectBackdropView以及兩個(gè)_UIVisualEffectFilterView共3個(gè)私有子視圖，且明顯可以看出搔预，前者是有實(shí)時(shí)模糊生成（根據(jù)其層級(jí)之下的展現(xiàn)內(nèi)容驗(yàn)算）霹期，中者則是設(shè)置了半透明的背景色，后者則為純正的0xf8f8f8顏色但alpha值不為1拯田，這兩者背景色合成之后的結(jié)果历造，才代表最終展現(xiàn)的導(dǎo)航欄顏色（不管你信不信，反正我是暈了）……利用console debug命令探查這三者alpha值、背景色屬性如下
//_UIVisualEffectBackdropView對(duì)象
(lldb) po (CGFloat)self.navigationController.navigationBar.subviews[0].subviews[1].subviews[0].alpha
1
(lldb) po self.navigationController.navigationBar.subviews[0].subviews[1].subviews[0].backgroundColor
0x0000000000000000
//第一個(gè)_UIVisualEffectFilterView對(duì)象
(lldb) po (CGFloat)self.navigationController.navigationBar.subviews[0].subviews[1].subviews[1].alpha
1
(lldb) po self.navigationController.navigationBar.subviews[0].subviews[1].subviews[1].backgroundColor
UIExtendedGrayColorSpace 0.97 0.8
//第二個(gè)_UIVisualEffectFilterView對(duì)象
(lldb) po (CGFloat)self.navigationController.navigationBar.subviews[0].subviews[1].subviews[2].alpha
0.85000002384185791
(lldb) po self.navigationController.navigationBar.subviews[0].subviews[1].subviews[2].backgroundColor
UIExtendedSRGBColorSpace 0.972549 0.972549 0.972549 1
實(shí)事也呼應(yīng)了barTintColor屬性描述中那段話
This color is made translucent by default unless you set the translucent property to NO.
0x06.恍如隔世
這么一番曲折的經(jīng)歷下來(lái)吭产，除了腦袋搞暈了之外侣监，還能得出什么結(jié)論嗎？哎臣淤，姑且以我的一家之言收尾吧：
想要為UINavigationBar設(shè)置某個(gè)色值的純色背景橄霉，則
-
一、translucent屬性為YES:
- 如果想要通過(guò)視覺(jué)大大一絲不茍的像素眼邑蒋，請(qǐng)參照 0x04 中的方案2
- 否則若只是要求肉眼不容易發(fā)覺(jué)（請(qǐng)不要吐槽我的隨便）姓蜂，請(qǐng)利用 barTintColor屬性
- 如果要求放松到無(wú)所謂的程度，透不透視都不關(guān)心医吊，請(qǐng)使用 setBackgroundImage:forBarMetrics: 方法或者干脆用 backgroundColor屬性
-
二钱慢、translucent屬性為NO:
- 如果想要通過(guò)視覺(jué)大大一絲不茍的像素眼，依舊參照 0x04 中的方案2
- 否則若只是要求肉眼不容易發(fā)覺(jué)（請(qǐng)不要吐槽我的隨便）卿堂，使用barTintColor 或者 setBackgroundImage:forBarMetrics: 方法(仍然存在混色問(wèn)題束莫，例如設(shè)置純紅色，view hierarchy看單個(gè)視圖取色為0xff0000御吞，而直接從App中取色則前者效果為0xfb2930,后者效果為0xfc0d1b麦箍，相對(duì)而言后者更精準(zhǔn))
- backgroundColor設(shè)置則是無(wú)效的，請(qǐng)放棄該方式
（更新） iOS11 導(dǎo)航欄適配
升級(jí)到iOS11的同學(xué)想必發(fā)現(xiàn)了一個(gè)問(wèn)題陶珠，定制過(guò)的返回按鈕樣式發(fā)生了偏移挟裂，參照了stackoverflow上大神回復(fù)之后的解決方案如下：
UIImage *origImage = [UIImage imageNamed:@"fanhui_black"];
//系統(tǒng)返回按鈕處的title偏移到可視范圍之外
//iOS11 和 iOS11以下分別處理
UIOffset offset = currentSystemVersion.floatValue >= 11.0 ? UIOffsetMake(-200, 0) : UIOffsetMake(0, -80);
[[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:offset forBarMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:offset forBarMetrics:UIBarMetricsCompact];
[[UINavigationBar appearance] setBackIndicatorImage:origImage];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:origImage];
