之前寫了一篇適配 iOS 11 的文章鏈接，如今 iPhone X 上市后杀餐，又要掀起一波適配潮了裙盾。對于開發(fā)者來說， iPhone X 并不像之前的產(chǎn)品那么容易適配郎任。因為齊劉海秧耗、虛擬 HomeIndicator，可以說是相當有特點了舶治。那么分井，X 到底做了哪些改變，怎么適配霉猛，下面我們就來詳細談談尺锚。
iPhone X 的一些改變
關(guān)于 iPhone X（后文中簡稱為 X）的屏幕尺寸，由于個性的劉海以及取消了物理 Home 按鍵而用虛擬按鍵 Home Indicator 取代惜浅，所以理所當然屏幕的高度會高一些瘫辩。我們知道，6坛悉、7伐厌、8的尺寸都一樣，是375 * 667 pt裸影，而 X 的尺寸是 375 * 812 pt弧械，寬度跟前者一樣，由于是 @3x空民，所以像素尺寸是1125 * 2436 px刃唐。即加長版的 iPhone 8。具體見下圖
關(guān)于細節(jié)高度變化界轩。Status Bar 的高度由之前的 20 pt 變?yōu)?44 pt画饥，增加了 24 pt 是為了適應劉海對頂部空間的影響。
如果沒有 Large Title浊猾，導航欄加狀態(tài)欄的總體高度是 44 + 44 = 88 pt抖甘。如果有 Large Title，總體高度達到 44 + 52 = 96 pt葫慎。這跟之前的 64 pt 還是有很大差距的衔彻。
另外薇宠，底部的虛擬鍵 Home Indicator 的高度是 34 pt，適配的時候注意內(nèi)容不能跟他有視圖層疊艰额，否則會很影響顯示效果澄港。底部的總高度為 49 + 34 pt = 83 pt。（其中 49 為 Tab Bar 高度）柄沮。
從上面數(shù)據(jù)不難看出回梧，X 的改變甚至比之前的 4 -> 5 的差別都大。
好消息是祖搓，大多數(shù)使用標準的狱意、系統(tǒng)提供的 UI 元素（如 UINavigationBar、UITableView拯欧、UICollectionView）將會自動適配 iPhone X详囤。背景將會延伸到屏幕的邊界，UI 元素將會被合適地放置镐作。比如 Navigation Bar 的背景色會自動延伸到 Status Bar 中藏姐，Tab Bar 、Tool Bar 會被合適的放置在 Home Indicator 上面滑肉，其背景色也會延伸到屏幕底端包各。
當然摘仅，現(xiàn)在大多項目中的很多控件都是各種自定義靶庙，而且上述系統(tǒng)控件也不是百分百場景下都能適配的，所以為了完美適配 iPhone X娃属，只能老老實實跟著筆者認識一下蘋果的這套適配方案六荒，適配工作才可能開展的順利一些。
修改啟動圖
適配過 iPhone 4 到 iPhone 5 的開發(fā)者應該都知道矾端，當年由于屏幕尺寸的較大變化掏击，如果沒做適配在 iPhone 5 運行就會有大大的黑邊。解決方案就是配置啟動圖（LaunchScreen.storyboard 啟動除外）秩铆。X 也是一樣砚亭。
如果項目使用的是圖集（Launch Images Asset），直接讓設(shè)計師多做一張像素 1125 * 2436 px 的啟動圖即可殴玛。
如果是用的故事板啟動圖（Launch Screen.storyboard）捅膘，則無需過多設(shè)置。
接下來滚粟，編譯運行一下項目寻仗，就沒有黑邊了，但取而代之的會看到頂部和底部擁擠的布局凡壤，那么我們下面來具體談一下怎么適配署尤。
通過 Safe Area 來適配 X
談到適配 iOS 11 || iPhone X耙替，不得不認識一下 Safe Area。Safe Area 的出現(xiàn)也是為了給適配 iPhone X 工作提供方便曹体。這部分我會盡可能詳細介紹一下 Safe Area俗扇，掌握了 Safe Area，也就基本完成了 X 的 UI 適配工作混坞。
認識 Safe Area 之前狐援，我們先花兩分鐘時間復習一下 topLayoutGuide 和 bottomLayoutGuide。
iOS 7 之后蘋果給 UIViewController 引入了 topLayoutGuide 和 bottomLayoutGuide究孕，目的就是保護內(nèi)容不被各種 Bar 遮擋啥酱，如（StatusBar, NavBar, ToolBar, TabBar）。這個屬性有一個 length 值( 如 topLayoutGuide.length)厨诸，這個值可能由當前的 ViewController 或者 NavigationController 或者 TabbarController 決定镶殷。
一個獨立的ViewController，不包含于任何其他的ViewController微酬。如果狀態(tài)欄可見绘趋，topLayoutGuide表示狀態(tài)欄的底部，否則表示這個ViewController的上邊緣颗管。
包含于其他ViewController的ViewController不對這個屬性起決定作用陷遮，而是由容器ViewController決定這個屬性的含義：
如果導航欄（Navigation Bar）可見，topLayoutGuide表示導航欄的底部垦江。
如果狀態(tài)欄可見帽馋，topLayoutGuide表示狀態(tài)欄的底部。
如果都不可見比吭，表示ViewController的上邊緣绽族。
這部分還比較好理解，總之是屏幕上方任何遮擋內(nèi)容的欄的最底部衩藤。
這兩個屬性是 VC 的屬性吧慢，平常用的場景可能不是太多。但是僅僅描述上和下的安全內(nèi)邊距在 iPhone X 之前是足夠使用的赏表，因為不管橫屏還是豎屏检诗，只需知道上下安全內(nèi)邊距即可。但是在 X 上就行不通了瓢剿，豎屏狀態(tài)大多場景下還好逢慌，可是橫屏情況下，要想適配酷酷的劉海和 Home Indicator跋选，僅僅這兩個屬性就力不從心了涕癣。蘋果只好重新構(gòu)思這塊代碼，自然就有了SafeArea 的解決方案（相信如果讓你來設(shè)計這塊代碼來幫助廣大開發(fā)者適配 X ，也應該很快想到類似方案）坠韩。
SafeArea距潘，顧名思義，是安全區(qū)域只搁。原則上所有的控制視圖都應該在這上面繪制音比，超出這個區(qū)域就會有可能被 NavBar 或 StatusBar 或 ToolBar 或 Home Indicator 等遮擋而影響交互體驗∏馔铮看下面這張官方文檔的示例圖：
在 iOS 11 中洞翩，蘋果置過期了上面的控制器 VC 屬性 top/bottomLayoutGuide，取而代之的是 View 屬性 safeAreaLayoutGuide焰望，safeAreaInsets骚亿。下面就細細說一下蘋果的這套 SafeArea 解決方案如何。
我們先說一下safeAreaInsets熊赖。
SafeAreaInsets
顧名思義来屠，它就是安全區(qū)域的內(nèi)邊距。
簡而言之震鹉，它的值是（StatusBarHeight + NavBarHeight, 0, HomeIndicatorHeight + TabBarHeight, 0）
在 X 上運行俱笛，即（44 + 44， 0传趾， 34 + 49迎膜， 0）。（當然浆兰，上面的公式中的控件都沒有隱藏磕仅。）
但是要注意，SafeAreaInsets這個屬性的取用時機要當心镊讼。在ViewDidLoad中這個值是 zero 的宽涌，通過下面打印平夜，可以看出端倪
viewDidLoad => {0, 0, 0, 0}
viewWillAppear: =>{0, 0, 0, 0}
viewSafeAreaInsetsDidChange =>{44, 0, 34, 0}
viewWillLayoutSubviews =>{44, 0, 34, 0}
viewDidLayoutSubviews =>{44, 0, 34, 0}
viewDidAppear: =>{44, 0, 34, 0}
綜上蝶棋，可以在viewSafeAreaInsetsDidChange方法中取值（view也有個類似方法，safeAreaInsetsDidChange）忽妒，也可以在viewWillLayoutSubviews取值玩裙。
我們?nèi)绻坝眠^ top/bottomLayoutGuide，就會很自然就知道了SafeAreaInsets的用法段直。很類似吃溅，這個屬性就是告訴開發(fā)者，添加的控件最好在這個安全內(nèi)邊距區(qū)域內(nèi)鸯檬。view.safeAreaLayoutGuide.layoutFrame就是通過該內(nèi)邊距計算獲得决侈。
- 用 Xib 創(chuàng)建視圖的話，如果是 iOS 9 +喧务，那么很簡單直接將控件的相對布局對象改為
safe area即可赖歌。 - 如果不是 Xib 視圖枉圃，或者要支持 iOS 8 +，那么用代碼也很簡單庐冯。以控制器為例孽亲，向控制器視圖中添加子控件布局的時候，布局不要直接以 View 為參照視圖展父，要用到
SafeAreaInsetsUIEdgeInsets insets = self.view.safeAreaInsets; [label mas_makeConstraints:^(MASConstraintMaker *make) { // ... make.bottom.mas_equalTo(-insets.bottom); }];
AdditionalSafeAreaInsets
當 view controller 的子視圖覆蓋了嵌入的子 view controller 的視圖的時候返劲。比如說， 當 UINavigationController 和 UITabbarController 中的 bar 是半透明(translucent) 狀態(tài)的時候, 就有 additionalSafeAreaInsets栖茉。
You might use this property to extend the safe area to include custom content in your interface. For example, a drawing app might use this property to avoid displaying content underneath tool palettes.
官方文檔舉的例子是在一個畫畫 App 中通過該屬性來延伸安全區(qū)域篮绿，從而避免畫筆畫到了畫板上。
注意這個屬性是在原來的基礎(chǔ)上疊加多少吕漂，不是改為了多少搔耕。
