這是一個故事:
故事背景
iPhone X 劉海機于9月份發布以來,備受詬病,給科技帶來一個宴會.給coder卻帶來一份淡淡的涼意---> 怎么適配呢?
我們的APP會不會被遮住,多出來一個劉海? 我們底下的Tabbar會變成什么樣? Home鍵去哪了?
據說WWDC大會上給出了適配建議,打開看了(好吧,我承認我聽不懂).最近項目需要做適配,就在網上搜集了一些資料,總結一下,放在這里.供大家參考.
先看看iPhone各機型的尺寸吧.
下面是iPhone X 對比其他機型的變化圖.iPhone X和iPhone 8 在寬度上是一致的,在垂直方向上多出了145pt,這就意味著首頁可以展示更多的內容,這對于一些大IP來說可能是一個巨大的價值,但是對于眾多小眾APP來說,我們還是關心適配的問題吧.
布局
如上圖所示,我們會發現,劉海會遮住我們的視圖控件,所以我們設計的時候要避免關鍵內容被遮蓋.
iPhone X可以展示的區域以及坐標系統如下圖:
Status Bar 狀態欄
我們用系統的navigationBar會發現,它會自動變高,如下圖所示.其實是上面原先20pt的Status Bar變高了,我們通過打印Status Bar的frame可以發現,它變成了44pt.
住:如果你的APP是隱藏狀態欄的,建議重新考慮,首先,狀態欄包含了用戶想要的信息,其次,如果隱藏了,你的上邊的劉海兩側的空白會很難看
另外還有一點，用戶在使用 iPhone X 打電話的時候，StatusBar 的高度也不會發生變化了。
底部區域
iPhone X取消了Home鍵,但是蘋果公司給用戶流出來一個一個叫做Home Indicator的區域,在這個區域,你向上滑動,就等同于原來點擊了Home鍵,就會回到手機桌面. 這部分的高度是固定的--34pt.(除了iPhone X,其他手機沒有這個區域,因為Home鍵還在).
如果你的底部是 TabBar，那么 Home Indicator 背景會來自于 TabBar 背景的延伸，如果我們是一個 feed 流的頁面，那么底部會展示 feed 流的局部。意思是如果有 TabBar，那么那個區域會延展你的 barTintColor；沒有的話，就顯示透明的（參照 Setting）。之所以這么設計，是為了讓 indicator 清晰可見，告訴用戶你可以滑動這部分區域。所以蘋果不建議我們的 UI 元素過于靠近這部分區域。
SafeArea --> 安全區域
這個是很坑的一個地方.
iOS 11 廢棄了 iOS 7 之后出現的 topLayoutGuide/bottomLayoutGuide，取而代之的是safeLayoutGuide 概念。我們的UI元素都應該布局在這些區域之內，避免被各種 bar（NavgationBar、ToolBar、TabBar、StatusBar）遮擋。
如果我們用了 AutoLayout，并且開啟了 safeAreaLayoutGuide，布局會自動加上這些 safeLayoutGuide，你的視圖不會超出這部分 SafeArea。如下圖所示，如果你需要增加 Guide 的區域，那么可以設置 self.additionalSafeAreaInsets 來增加區域。
默認的 SafeArea 和 self.additionalSafeAreaInsets = UIEdgeInsetsMake(64, 0, 0, 0);
劉海打理
- 我們的頁面大多會上移,這屬于于“狀態欄變高系列”，解決方案就是把固定的20pt高度改成 [[UIApplication sharedApplication] statusBarFrame].size.height]。
2 搜索頁面輸入框的位置發生了偏移，這是因為 iOS 11 的導航欄的視圖層級結構發生了變化，和 iPhone X 的并無直接關系。iOS 11 導航欄的視圖層級關系如下：
適配方式是：取到這個 _UIButtonBarStackView 的位置和尺寸信息，然后更改 PFBNavigationBarContainerView 的 X 坐標。
- iOS 11 之后 scrollview 多出來一個 adjustedContentInset 區域。UItableView 會發生偏移.那為什么會發生偏移？這個偏移的值又是怎么確定的？其實是當 Tableview 的 frame 超出了 safeArea 范圍之后，系統會調整內容的位置。系統通過設置 adjustedContentInset 為 safeAreaInset 的值讓 Tableview 偏移.注意一下這個 adjustedContentInset 是 readOnly 的屬性。我們可以通過設置 Tableview.contentInsetAdjustmentBehavior=UIScrollViewContentInsetAdjustmentNever 來糾正這個位置。當然還可以通過設置 tableview.contentOffset 來抵消這個值，但還是推薦第一種。
iOS 11的適配
① xib 里適配 iPhone X 的話，可以開啟 UseSafeAreaLayoutGuides（但是這個是需要在 iOS 9 之后才能用，需要看你的 App 最低支持的版本）。
2.如果用的系統 SearchViewController，發現沒有灰色蒙層了，可以這么試試。之所以可以這么改，是因為 iOS 11 的 NavigationBar 和 SearchViewController 集成在一塊兒了。
-
橫屏下的 UITableView，SenctionHeader 的背景顏色不是設置的那個顏色。
iOS 11 橫屏 Tableview 的作用方式
這個問題的原因是：橫屏下的 UITableView，Cell 都是和屏幕一樣寬，但是 Cell 的 ContentView 會被 inset 到 SafeArea 區域。
解決方法是：可以通過調整 Tableview 的默認行為，改變 contentView 的屬性（如上圖 inset To SafeArea）來讓 contentview 頂到邊緣，弊端是會改變整個 cell 的內容顯示，而且 contentView 的 layoutMargin 依然還是相對于 SafeArea 的。
最佳方案是：改變 UITableViewHeaderFooterView.backgroundView 的 backgroundColor。
本文章轉自美團點評的一篇文章 和一些博客.
最后總結:
1.狀態欄高度發生變化,解決方案:布局的時候這個高度不要寫死,通過方法獲取高度.
2.導航欄的視圖層級結構發生變化而導致 UI(titleView、UIBarButtonItem) 問題。
3.safeAreaInset 導致 Scrollview 偏移。
4.Tabbar發生變化,建議用系統的tabbar.
如何把文章排版變得更好看,點擊:Markdown使用指南(常用語法,干貨).
