iOS 導航欄的那些事兒

最近項目里有個需求和導航欄的樣式定制有關，深入之后發現之前理解的一些概念有些模糊，剛好趁著這次機會全面整理了一下。

從 iOS7 開始，蘋果采用了大量的扁平化和毛玻璃風格，剛升級到 iOS7 之后會發現界面的布局多多少少有一些偏差（當然現在新建的項目沒有這方面困擾，不需要經歷6到7的適配），適配過程中會發現如下一些屬性，

- edgesForExtendedLayout
- translucent
- extendedLayoutIncludesOpaqueBars
- automaticallyAdjustsScrollViewInsets

根據字面意思看上去這些屬性很好理解，但是發現他們組合之后會有一些不同的表現，一些奇怪的問題也不知道什么原因導致的。不用擔心，接下去我會全面的解析一下這幾個屬性的含義，保證你再也不怕各種奇怪的導航欄問題啦。

edgesForExtendedLayout + translucent

iOS7 以后，edgesForExtendedLayout 的默認設置是 UIRectEdgeAll，translucent 的默認值是 true。這種組合會使 rootView 的布局從（0，0）開始，即 view 的內容會被導航欄遮擋住，大多數情況下將 edgesForExtendedLayout 修改為 UIRectEdgeNone 就能解決布局被遮擋的問題。將 translucent 設置成 false 也會使 rootView 從導航欄底部開始，但是 translucent = false 時即使將 edgesForExtendedLayout 再改成 UIRectEdgeAll rootView 還是從導航欄底部開始布局。如何可以在導航欄不透明的情況下讓 rootView 從（0，0）開始布局呢？蘋果也考慮到了這種需求，提供了 extendedLayoutIncludesOpaqueBars 這個屬性。

小結：translucent 為 true，rootView 從（0，0）開始布局，修改 edgesForExtendedLayout 屬性可以改變布局；translucent 為 false，rootView 從導航欄底部開始布局，修改 edgesForExtendedLayout 屬性無法改變布局。

extendedLayoutIncludesOpaqueBars + translucent

前面我們知道了 translucent 為 false 時，修改 edgesForExtendedLayout 也無法使 rootView 從（0，0）開始布局。蘋果為此提供了 extendedLayoutIncludesOpaqueBars，字面上理解的意思就是在不透明的導航欄下也全屏顯示。

這里多提一點，在 ViewController 的生命周期中有 viewDidLoad，viewWillAppear，viewDidAppear，viewWillDisappear，viewDidDisappear，上述提到的這些屬性需要在 viewDidAppear 之前設置好，viewDidAppear 可以認為系統已經根據配置布局好了，在這里展示給用戶看。

automaticallyAdjustsScrollViewInsets

automaticallyAdjustsScrollViewInsets 默認值是 true，表示在全屏模式下會自動修改 第一個添加到 rootView 的 scrollview 的 contentInset 為(64,0,0,0) ，這樣 scrollview 就不會被導航欄遮擋了。

關于 scrollview 有一個問題比較常見，這里解析一下原因。我們經常會這么使用一個 tableView，

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColorgreenColor];
 
    self.navigationItem.title = @"Master";
    self.tableView = [[UITableViewalloc] initWithFrame:self.view.bounds];
    _tableView.backgroundColor = [UIColorwhiteColor];
    _tableView.delegate = self;
    _tableView.dataSource = self;
    [self.viewaddSubview:_tableView];
}

這樣在默認情況下(translucent = true, edgesForExtendedLayout = UIRectEdgeAll)，tableView的顯示沒有問題。但是當我們將 edgesForExtendedLayout 設置成 UIRectEdgeNone 時，當 tableView 的內容比較多時底部的內容反而顯示不下。這就很奇怪了，按照前面的結論，這時候 tableView是從導航欄底部開始布局的，contentInset 也是（0，0，0，0），怎么底部的內容會被遮擋一部分呢？原因在于 self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds]; 初始化時 rootView 的 frame 還是（0，0，screenWidth，screenHeight），只需要在 viewWillLayoutSubviews 中重新修改一下 tableview 的 frame 即可，

- (void)viewWillLayoutSubviews
{
    [super viewWillLayoutSubviews];
    _tableView.frame = self.view.bounds;
}

UINavigationBar 修改背景色

UINavigationBar 是 UIView 的子類，首先想到的是修改背景色，

self.navigationController.navigationBar.backgroundColor = [UIColor greenColor];

發現這并不是我們想要的效果，為什么綠色變淡了呢？通過 Xcode 的 ViewDebugging 我們可以看到 UINavigationBar 內部還有一些子視圖，這些子視圖的背景色會遮擋住我們設置的顏色。

查看 UINavigationBar 的接口我們發現 setBackgroundImage ，設置

[self.navigationController.navigationBarsetBackgroundImage:[UIImageimageWithColor:[UIColorgreenColor] size:CGSizeMake(1, 1)] forBarMetrics:UIBarMetricsDefault];

結果如下

小結：設置 UINavigationBar 的 backgroundImage 可以修改導航欄的背景色。

translucent 和 setBackgroundImage

前面提到我們可以通過修改背景圖片來修改導航欄的背景色，設置了背景圖片后在有些頁面我們會遇到一些奇怪的問題，發現原來布局正常的頁面顯示不對了，會多出一部分空白或者被導航欄遮擋住了。

通過打印出 translucent 的值我們發現設置了純色的背景圖后原來半透明的導航欄變成了不透明的，結合前面提到的 translucent 對布局起點的影響，如果頁面是按照半透明情況，即 rootView 從（0，0）開始布局來設置子視圖的 frame，那么設置了純色背景圖后 translucent 變成了 false，即 rootView 從（0，64）開始布局。為什么設置背景圖片會影響 translucent 呢，通過查看文檔發現了如下說明，

/*
 New behavioroniOS 7.
 Default is YES.
 Youmayforceanopaquebackgroundbysettingtheproperty to NO.
 If thenavigationbarhas a custombackgroundimage, thedefault is inferred
 fromthealphavaluesoftheimage—YESif ithasanypixelwithalpha 

也就是說背景圖片如果包含 alpha 的色值，系統會默認將 translucent 設置為 true，沒有包含 alpha 色值會將 translucent 設置為 false。這下真相大白了，原來我們前面設置了純綠色的背景圖片，是不包含 alpha 色值的，即系統默認將 translucent 設置成了 false。但這是針對沒有手動設置 translucent 值的情況， 如果我們手動設置了 translucent，那么系統就不會根據背景圖片的 alpha 來修改 translucent 。

至此，我們了解了蘋果是如何使用這幾個屬性的，針對 iOS7 以上，這里做一下總結：

1. iOS7 以后 translucent 默認為 true，rootView 從（0，0）開始布局，修改 edgesForExtendedLayout 屬性可以改變布局；

2. translucent 為 false，rootView 從導航欄底部開始布局，修改 edgesForExtendedLayout 屬性無法改變布局，可以通過設置 extendedLayoutIncludesOpaqueBars 從（0，0）開始布局；

3. automaticallyAdjustsScrollViewInsets 默認值是 true，表示在全屏模式下會自動修改 第一個添加到 rootView 的 scrollview 的 contentInset 為(64,0,0,0) ，用來糾正scrollview在全屏模式下的顯示；

4. 設置 UINavigationBar 的背景圖片可以改變導航欄背景色，如果背景圖片包含 alpha 的色值，系統會默認將 translucent 設置為 true，沒有包含 alpha 色值會將 translucent 設置為 false。但這是針對沒有手動設置 translucent 值的情況， 如果我們手動設置了 translucent，那么系統就不會根據背景圖片的 alpha 來修改 translucent 。

 

 

來自：http://ios.jobbole.com/90851/