最近項(xiàng)目里有個(gè)需求和導(dǎo)航欄的樣式定制有關(guān)弦悉，深入之后發(fā)現(xiàn)之前理解的一些概念有些模糊矮冬，剛好趁著這次機(jī)會(huì)全面整理了一下钳恕。
從 iOS7 開(kāi)始炼彪，蘋果采用了大量的扁平化和毛玻璃風(fēng)格哄辣，剛升級(jí)到 iOS7 之后會(huì)發(fā)現(xiàn)界面的布局多多少少有一些偏差（當(dāng)然現(xiàn)在新建的項(xiàng)目沒(méi)有這方面困擾请梢，不需要經(jīng)歷6到7的適配），適配過(guò)程中會(huì)發(fā)現(xiàn)如下一些屬性力穗，
- edgesForExtendedLayout
- translucent
- extendedLayoutIncludesOpaqueBars
- automaticallyAdjustsScrollViewInsets
根據(jù)字面意思看上去這些屬性很好理解毅弧，但是發(fā)現(xiàn)他們組合之后會(huì)有一些不同的表現(xiàn)，一些奇怪的問(wèn)題也不知道什么原因?qū)е碌牡贝啊２挥脫?dān)心够坐，接下去我會(huì)全面的解析一下這幾個(gè)屬性的含義，保證你再也不怕各種奇怪的導(dǎo)航欄問(wèn)題啦。
edgesForExtendedLayout + translucent
iOS7 以后元咙，edgesForExtendedLayout 的默認(rèn)設(shè)置是 UIRectEdgeAll梯影，translucent 的默認(rèn)值是 true。這種組合會(huì)使 rootView 的布局從（0庶香，0）開(kāi)始甲棍，即 view 的內(nèi)容會(huì)被導(dǎo)航欄遮擋住，大多數(shù)情況下將 edgesForExtendedLayout 修改為 UIRectEdgeNone 就能解決布局被遮擋的問(wèn)題赶掖。將 translucent 設(shè)置成 false 也會(huì)使 rootView 從導(dǎo)航欄底部開(kāi)始感猛，但是 translucent = false 時(shí)即使將 edgesForExtendedLayout 再改成 UIRectEdgeAll rootView 還是從導(dǎo)航欄底部開(kāi)始布局。如何可以在導(dǎo)航欄不透明的情況下讓 rootView 從（0奢赂，0）開(kāi)始布局呢陪白？蘋果也考慮到了這種需求，提供了 extendedLayoutIncludesOpaqueBars 這個(gè)屬性膳灶。
小結(jié)：translucent 為 true咱士，rootView 從（0，0）開(kāi)始布局袖瞻，修改 edgesForExtendedLayout 屬性可以改變布局司致；translucent 為 false，rootView 從導(dǎo)航欄底部開(kāi)始布局聋迎，修改 edgesForExtendedLayout 屬性無(wú)法改變布局脂矫。
extendedLayoutIncludesOpaqueBars + translucent
前面我們知道了 translucent 為 false 時(shí)，修改 edgesForExtendedLayout 也無(wú)法使 rootView 從（0霉晕，0）開(kāi)始布局庭再。蘋果為此提供了 extendedLayoutIncludesOpaqueBars，字面上理解的意思就是在不透明的導(dǎo)航欄下也全屏顯示牺堰。
這里多提一點(diǎn)拄轻，在 ViewController 的生命周期中有 viewDidLoad，viewWillAppear伟葫，viewDidAppear恨搓，viewWillDisappear，viewDidDisappear筏养，上述提到的這些屬性需要在 viewDidAppear 之前設(shè)置好斧抱，viewDidAppear 可以認(rèn)為系統(tǒng)已經(jīng)根據(jù)配置布局好了，在這里展示給用戶看渐溶。
automaticallyAdjustsScrollViewInsets
automaticallyAdjustsScrollViewInsets 默認(rèn)值是 true辉浦，表示在全屏模式下會(huì)自動(dòng)修改第一個(gè)添加到 rootView 的 scrollview 的 contentInset 為(64,0,0,0)，這樣 scrollview 就不會(huì)被導(dǎo)航欄遮擋了茎辐。
關(guān)于 scrollview 有一個(gè)問(wèn)題比較常見(jiàn)掂恕，這里解析一下原因。我們經(jīng)常會(huì)這么使用一個(gè) 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];
}
這樣在默認(rèn)情況下(translucent = true, edgesForExtendedLayout = UIRectEdgeAll)懊亡，tableView的顯示沒(méi)有問(wèn)題。但是當(dāng)我們將 edgesForExtendedLayout 設(shè)置成 UIRectEdgeNone 時(shí)丐黄，當(dāng) tableView 的內(nèi)容比較多時(shí)底部的內(nèi)容反而顯示不下斋配。這就很奇怪了，按照前面的結(jié)論灌闺，這時(shí)候 tableView是從導(dǎo)航欄底部開(kāi)始布局的艰争，contentInset 也是（0，0桂对，0甩卓，0），怎么底部的內(nèi)容會(huì)被遮擋一部分呢蕉斜？原因在于 self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds]; 初始化時(shí) 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)這并不是我們想要的效果，為什么綠色變淡了呢璧亮？通過(guò) Xcode 的 ViewDebugging 我們可以看到 UINavigationBar 內(nèi)部還有一些子視圖萧诫，這些子視圖的背景色會(huì)遮擋住我們?cè)O(shè)置的顏色。
查看 UINavigationBar 的接口我們發(fā)現(xiàn) setBackgroundImage枝嘶，設(shè)置
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageWithColor:[UIColor greenColor] size:CGSizeMake(1, 1)] forBarMetrics:UIBarMetricsDefault];
結(jié)果如下
小結(jié)：設(shè)置
UINavigationBar的 backgroundImage 可以修改導(dǎo)航欄的背景色帘饶。
translucent 和 setBackgroundImage
前面提到我們可以通過(guò)修改背景圖片來(lái)修改導(dǎo)航欄的背景色，設(shè)置了背景圖片后在有些頁(yè)面我們會(huì)遇到一些奇怪的問(wèn)題群扶，發(fā)現(xiàn)原來(lái)布局正常的頁(yè)面顯示不對(duì)了及刻，會(huì)多出一部分空白或者被導(dǎo)航欄遮擋住了。
通過(guò)打印出 translucent 的值我們發(fā)現(xiàn)設(shè)置了純色的背景圖后原來(lái)半透明的導(dǎo)航欄變成了不透明的竞阐，結(jié)合前面提到的 translucent 對(duì)布局起點(diǎn)的影響提茁，如果頁(yè)面是按照半透明情況，即 rootView 從（0馁菜，0）開(kāi)始布局來(lái)設(shè)置子視圖的 frame，那么設(shè)置了純色背景圖后 translucent 變成了 false铃岔，即 rootView 從（0汪疮，64）開(kāi)始布局峭火。為什么設(shè)置背景圖片會(huì)影響 translucent 呢，通過(guò)查看文檔發(fā)現(xiàn)了如下說(shuō)明智嚷，
/*
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.
*/
@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
也就是說(shuō)背景圖片如果包含 alpha 的色值卖丸，系統(tǒng)會(huì)默認(rèn)將 translucent 設(shè)置為 true，沒(méi)有包含 alpha 色值會(huì)將 translucent 設(shè)置為 false盏道。這下真相大白了稍浆，原來(lái)我們前面設(shè)置了純綠色的背景圖片，是不包含 alpha 色值的猜嘱，即系統(tǒng)默認(rèn)將 translucent 設(shè)置成了 false衅枫。但這是針對(duì)沒(méi)有手動(dòng)設(shè)置 translucent 值的情況，如果我們手動(dòng)設(shè)置了 translucent朗伶，那么系統(tǒng)就不會(huì)根據(jù)背景圖片的 alpha 來(lái)修改 translucent弦撩。
至此，我們了解了蘋果是如何使用這幾個(gè)屬性的论皆，針對(duì) iOS7 以上益楼，這里做一下總結(jié)：
- iOS7 以后 translucent 默認(rèn)為 true，rootView 從（0点晴，0）開(kāi)始布局感凤，修改 edgesForExtendedLayout 屬性可以改變布局；
- translucent 為 false粒督，rootView 從導(dǎo)航欄底部開(kāi)始布局陪竿，修改 edgesForExtendedLayout 屬性無(wú)法改變布局，可以通過(guò)設(shè)置 extendedLayoutIncludesOpaqueBars 從（0坠陈，0）開(kāi)始布局萨惑；
- automaticallyAdjustsScrollViewInsets 默認(rèn)值是 true，表示在全屏模式下會(huì)自動(dòng)修改第一個(gè)添加到 rootView 的 scrollview 的 contentInset 為(64,0,0,0)仇矾，用來(lái)糾正scrollview在全屏模式下的顯示庸蔼；
- 設(shè)置
UINavigationBar的背景圖片可以改變導(dǎo)航欄背景色，如果背景圖片包含 alpha 的色值贮匕，系統(tǒng)會(huì)默認(rèn)將 translucent 設(shè)置為 true姐仅，沒(méi)有包含 alpha 色值會(huì)將 translucent 設(shè)置為 false。但這是針對(duì)沒(méi)有手動(dòng)設(shè)置 translucent 值的情況刻盐，如果我們手動(dòng)設(shè)置了 translucent掏膏，那么系統(tǒng)就不會(huì)根據(jù)背景圖片的 alpha 來(lái)修改 translucent。
歡迎大家關(guān)注我們團(tuán)隊(duì)的公眾號(hào)敦锌，不定期分享各類技術(shù)干貨
