iOS 導(dǎo)航欄的屬性相關(guān)
轉(zhuǎn)載:http://www.open-open.com/lib/view/open1487577515404.html
iOS 導(dǎo)航欄的背景色
轉(zhuǎn)載:http://ios.jobbole.com/90851/
從 iOS7 開始,蘋果采用了大量的扁平化和毛玻璃風(fēng)格,剛升級到 iOS7 之后會發(fā)現(xiàn)界面的布局多多少少有一些偏差(當(dāng)然現(xiàn)在新建的項目沒有這方面困擾,不需要經(jīng)歷6到7的適配),適配過程中會發(fā)現(xiàn)如下一些屬性,
- edgesForExtendedLayout
- translucent
- extendedLayoutIncludesOpaqueBars
- automaticallyAdjustsScrollViewInsets
他們組合之后會有一些不同的表現(xiàn),一些奇怪的問題也不知道什么原因?qū)е碌摹2挥脫?dān)心,接下去我會全面的解析一下這幾個屬性的含義,保證你再也不怕各種奇怪的導(dǎo)航欄問題啦。
edgesForExtendedLayout + translucent
iOS7 以后,edgesForExtendedLayout 的默認設(shè)置是 UIRectEdgeAll,translucent 的默認值是 true。這種組合會使 rootView 的布局從(0,0)開始,即 view 的內(nèi)容會被導(dǎo)航欄遮擋住,大多數(shù)情況下將 edgesForExtendedLayout 修改為 UIRectEdgeNone 就能解決布局被遮擋的問題。將 translucent 設(shè)置成 false 也會使 rootView 從導(dǎo)航欄底部開始,但是 translucent = false 時即使將 edgesForExtendedLayout 再改成 UIRectEdgeAll rootView 還是從導(dǎo)航欄底部開始布局。如何可以在導(dǎo)航欄不透明的情況下讓 rootView 從(0,0)開始布局呢?蘋果也考慮到了這種需求,提供了 extendedLayoutIncludesOpaqueBars 這個屬性。
小結(jié):translucent 為 true,rootView 從(0,0)開始布局,修改 edgesForExtendedLayout 屬性可以改變布局;translucent 為 false,rootView 從導(dǎo)航欄底部開始布局,修改 edgesForExtendedLayout 屬性無法改變布局。
extendedLayoutIncludesOpaqueBars + translucent
前面我們知道了 translucent 為 false 時,修改 edgesForExtendedLayout 也無法使 rootView 從(0,0)開始布局。蘋果為此提供了 extendedLayoutIncludesOpaqueBars,字面上理解的意思就是在不透明的導(dǎo)航欄下也全屏顯示。
這里多提一點,在 ViewController 的生命周期中有 viewDidLoad,viewWillAppear,viewDidAppear,viewWillDisappear,viewDidDisappear,上述提到的這些屬性需要在 viewDidAppear 之前設(shè)置好,viewDidAppear 可以認為系統(tǒng)已經(jīng)根據(jù)配置布局好了,在這里展示給用戶看。
automaticallyAdjustsScrollViewInsets
automaticallyAdjustsScrollViewInsets 默認值是 true,表示在全屏模式下會自動修改第一個添加到 rootView 的 scrollview 的 contentInset 為(64,0,0,0),這樣 scrollview 就不會被導(dǎo)航欄遮擋了。
關(guān)于 scrollview 有一個問題比較常見,這里解析一下原因。我們經(jīng)常會這么使用一個 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的顯示沒有問題。但是當(dāng)我們將 edgesForExtendedLayout 設(shè)置成 UIRectEdgeNone 時,當(dāng) tableView 的內(nèi)容比較多時底部的內(nèi)容反而顯示不下。這就很奇怪了,按照前面的結(jié)論,這時候 tableView是從導(dǎo)航欄底部開始布局的,contentInset 也是(0,0,0,0),怎么底部的內(nèi)容會被遮擋一部分呢?
原因在于 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];
發(fā)現(xiàn)這并不是我們想要的效果,為什么綠色變淡了呢?通過 Xcode 的 ViewDebugging 我們可以看到 UINavigationBar
內(nèi)部還有一些子視圖,這些子視圖的背景色會遮擋住我們設(shè)置的顏色。
查看 UINavigationBar 的接口我們發(fā)現(xiàn) setBackgroundImage設(shè)置
[self.navigationController.navigationBar setBackgroundImage:
[UIImage imageWithColor:[UIColor greenColor]
forBarMetrics:UIBarMetricsDefault];
小結(jié):設(shè)置 UINavigationBar 的 backgroundImage 可以修改導(dǎo)航欄的背景色。
translucent 和 setBackgroundImage
前面提到我們可以通過修改背景圖片來修改導(dǎo)航欄的背景色,設(shè)置了背景圖片后在有些頁面我們會遇到一些奇怪的問題,發(fā)現(xiàn)原來布局正常的頁面顯示不對了,會多出一部分空白或者被導(dǎo)航欄遮擋住了。
通過打印出 translucent 的值我們發(fā)現(xiàn)設(shè)置了純色的背景圖后原來半透明的導(dǎo)航欄變成了不透明的,結(jié)合前面提到的 translucent 對布局起點的影響,如果頁面是按照半透明情況,即 rootView 從(0,0)開始布局來設(shè)置子視圖的 frame,那么設(shè)置了純色背景圖后 translucent 變成了 false,即 rootView 從(0,64)開始布局。為什么設(shè)置背景圖片會影響 translucent 呢,通過查看文檔發(fā)現(xiàn)了如下說明,
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 的色值,系統(tǒng)會默認將 translucent 設(shè)置為 true,沒有包含 alpha 色值會將 translucent 設(shè)置為 false。這下真相大白了,原來我們前面設(shè)置了純綠色的背景圖片,是不包含 alpha 色值的,即系統(tǒng)默認將 translucent 設(shè)置成了 false。但這是針對沒有手動設(shè)置 translucent 值的情況,如果我們手動設(shè)置了 translucent,那么系統(tǒng)就不會根據(jù)背景圖片的 alpha 來修改 translucent。
至此,我們了解了蘋果是如何使用這幾個屬性的,針對 iOS7 以上,這里做一下總結(jié):
iOS7 以后 translucent 默認為 true,rootView 從(0,0)開始布局,修改 edgesForExtendedLayout 屬性可以改變布局;
translucent 為 false,rootView 從導(dǎo)航欄底部開始布局,修改 edgesForExtendedLayout 屬性無法改變布局,可以通過設(shè)置 extendedLayoutIncludesOpaqueBars 從(0,0)開始布局;
automaticallyAdjustsScrollViewInsets 默認值是 true,表示在全屏模式下會自動修改第一個添加到 rootView 的 scrollview 的 contentInset 為(64,0,0,0),用來糾正scrollview在全屏模式下的顯示;
設(shè)置 UINavigationBar
的背景圖片可以改變導(dǎo)航欄背景色,如果背景圖片包含 alpha 的色值,系統(tǒng)會默認將 translucent 設(shè)置為 true,沒有包含 alpha 色值會將 translucent 設(shè)置為 false。但這是針對沒有手動設(shè)置 translucent 值的情況,如果我們手動設(shè)置了 translucent,那么系統(tǒng)就不會根據(jù)背景圖片的 alpha 來修改 translucent。