iOS 導覽列

標籤：蘋果   總結   automatic   nbsp   end   list   偏差   bar   nav   

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

 

從 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 = [UIColor greenColor];

 

    self.navigationItem.title = @"Master";

    self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds];

    _tableView.backgroundColor = [UIColor whiteColor];

    _tableView.delegate = self;

    _tableView.dataSource = self;

    [self.view addSubview:_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.navigationBar setBackgroundImage:[UIImage imageWithColor:[UIColor greenColor] size:CGSizeMake(1, 1)] forBarMetrics:UIBarMetricsDefault];

 

結果如下

 

小結：設定 UINavigationBar 的 backgroundImage 可以修改導覽列的背景色。

 

translucent 和 setBackgroundImage

 

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

 

通過列印出 translucent 的值我們發現設定了純色的背景圖後原來半透明的導覽列變成了不透明的，結合前面提到的 translucent 對布局起點的影響，如果頁面是按照半透明情況，即 rootView 從（0，0）開始布局來設定子視圖的 frame，那麼設定了純色背景圖後 translucent 變成了 false，即 rootView 從（0，64）開始布局。為什麼設定背景圖片會影響 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

 

也就是說背景圖片如果包含 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。

    

 

iOS 導覽列