iPhone X 劉海機於9月13日發佈，給科技小春晚帶來一波高潮。做爲開發人員卻多出來一份憂慮，iPhone X 怎麼適配？咱們 App 的腦殼會不會也長一劉海出來？Tabbar 會不會被圓角？先來看一下美團 App 的表現：html
圖 1.1 啓動時的 App 表現 圖 1.2 下拉刷新以後的表現ios
圖 1.3 搜索的表現 圖 1.4 「個人Tab」表現session
在圖1.1中乍一看錶現還不錯，但是在圖1.2中，下拉刷新以後，咱們的導航欄仍是被劉海擋住了。搜索也中槍，搜索首頁沒有辦法取消，「熱門搜索區域」也多出來一起空白。另外，「個人Tab」頁部分如圖1.三、圖1.4所示，導航欄回不去了，右上角的三個UIBarButtonItem也不見了。其餘還有不少UI上的Bug，等着咱們去一一發現並修改。app
針對可能出現的問題，蘋果在 developer.apple.com 上給出了一些建議。其中一個是 HIG (Human Interface Guideline)。另外 WWDC 會議官方 App 的做者，也給出了適配時的一些經驗。iphone
咱們來看看他們是怎麼說的。ide
HIG部分
首先看一下各個機型尺寸的變化。佈局
圖 2.1 各版本 iPhone 的尺寸ui
下圖是 iPhone X 對比其餘機型的變化部分。iPhone X 和 iPhone 8 的寬度一致，在垂直方向上多了145pt，這就意味着首頁能夠展現更多的內容，多出來的這20%的垂直空間，也許能夠掛上更高價值的運營位。this
圖2.2 iPhone X 和其餘設備的尺寸對比spa
佈局
注意圖2.2藍色部分，你會發現這些都算在了展現內容的區域。因此咱們在設計的時候，要避免內容被圓角、劉海給擋住。Like this：
圖 2.3 CGRectMake(0,0,100,100)
iPhone X 的座標系統以及能顯示內容的區域以下圖所示：
圖 2.4 iPhone X 的顯示區域
Status Bar
iPhone X 上的 StatusBar 高度比以前的 iPhone 高一些，也就是說，咱們若是寫死20pt高度的 frame 佈局，都要大面積修(tu)改(xue)。在 iPhone X 上，經過打印 [[UIApplication sharedApplication] statusBarFrame] 能夠看到，高度是44pt。
圖 2.5 iPhone X 的狀態欄高度
"若是你的 App 是隱藏 StatusBar 的，建議從新考慮。iPhone X 爲用戶在垂直空間上提供了更多展現餘地，且狀態欄中也包含了用戶須要知道的信息，除非能經過隱藏狀態欄帶給用戶額外的價值，不然蘋果建議你們將狀態欄還給用戶。"
另外還有一點，用戶在使用 iPhone X 打電話的時候，StatusBar 的高度也不會發生變化了。
屏幕底部
由於沒有了 Home 鍵，iPhone X 的底部是預留給系統功能的一個區域 - Home Indicator，這部分的高度是34pt。
圖 2.6 iPhone X 的 Home Indicator 區域
「若是你的底部是 TabBar，那麼 Home Indicator 背景會來自於 TabBar 背景的延伸，若是咱們是一個 feed 流的頁面，那麼底部會展現 feed 流的局部。」
意思是若是有 TabBar，那麼那個區域會延展你的 barTintColor；沒有的話，就顯示透明的（參照 Setting）。之因此這麼設計，是爲了讓 indicator 清晰可見，告訴用戶你能夠滑動這部分區域。因此蘋果不建議咱們的 UI 元素過於靠近這部分區域。
圖 2.7 有 TabBar 的 Home Indicator 區
SafeArea
iOS 11 廢棄了 iOS 7 以後出現的 topLayoutGuide/bottomLayoutGuide，取而代之的是safeLayoutGuide 概念。咱們的UI元素都應該佈局在這些區域以內，避免被各類 bar（NavgationBar、ToolBar、TabBar、StatusBar）遮擋。
圖2.8 iPhone 的 SafeArea
若是咱們用了 AutoLayout，而且開啓了 safeAreaLayoutGuide，佈局會自動加上這些 safeLayoutGuide，你的視圖不會超出這部分 SafeArea。如2.9所示，若是你須要增長 Guide 的區域，那麼能夠設置 self.additionalSafeAreaInsets 來增長區域。
圖 2.9 默認的 SafeArea 和 self.additionalSafeAreaInsets = UIEdgeInsetsMake(64, 0, 0, 0);
其餘
還有其餘的一些改變，好比圖片的 Aspect Ratio 在 iPhone X 上的表現也會有所不一樣了；
劉海兩邊的區域都能響應不一樣的手勢，最好不要和本身的 App 發生衝突。
來自Session 201的建議
① xib 裏適配 iPhone X 的話，能夠開啓 UseSafeAreaLayoutGuides（但這須要在 iOS 9 以後才能用，須要看你的 App 最低支持的版本）。
圖3.1 xib 屬性
② 若是用的系統 SearchViewController，發現沒有灰色蒙層了，能夠這麼試試。
圖3.2 iOS 11 UISearchViewController適配
之因此能夠這麼改，是由於 iOS 11 的 NavigationBar 和 SearchViewController 集成在一起了。
③ 橫屏下的 UITableView，SenctionHeader 的背景顏色不是設置的那個顏色。
圖3.3 iOS 11 橫屏 Tableview 的做用方式
這個問題的緣由是：橫屏下的 UITableView，Cell 都是和屏幕同樣寬，可是 Cell 的 ContentView 會被 inset 到 SafeArea 區域。
解決方法是：能夠經過調整 Tableview 的默認行爲，改變 contentView 的屬性（如上圖 inset To SafeArea）來讓 contentview 頂到邊緣，弊端是會改變整個 cell 的內容顯示，並且 contentView 的 layoutMargin 依然仍是相對於 SafeArea 的。
最佳方案是：改變 UITableViewHeaderFooterView.backgroundView 的 backgroundColor。
圖3.4 iOS 11 修改先後的樣式對比
劉海打理初體驗
① 咱們來看下開頭說的那個刷新以後首頁頂上去的問題怎麼處理。通過排查，這個問題屬於「狀態欄變高系列」，解決方案就是把固定的20pt高度改爲 [[UIApplication sharedApplication] statusBarFrame].size.height]。
② 搜索頁面輸入框的位置發生了偏移，這是由於 iOS 11 的導航欄的視圖層級結構發生了變化，和 iPhone X 的並沒有直接關係。iOS 11 導航欄的視圖層級關係以下：
圖4.1 iOS 11 以後的 NavigationBar 圖4.2 iOS 11 以前的 NavigationBar
適配方式是：取到這個 _UIButtonBarStackView 的位置和尺寸信息，而後更改 PFBNavigationBarContainerView 的 X 座標。
③ 「個人Tab」 頁面多出來一起灰色的區域，通過排查發現這個是 Tableview 的背景色。也就是說實際上是 Tableview 向下偏移了。
圖4.3 iOS11 下「個人Tab」 頁面 Tableview 發生偏移
出現這個的緣由是：iOS 11 以後 scrollview 多出來一個 adjustedContentInset 區域。
圖 4.4 iOS 11下 ScrollView 的新屬性
經過打印這個值，咱們發現正好和 contentoffset.y 相符合。
圖 4.5 這個新屬性在 iPhone X 上的值
那爲何會發生偏移？這個偏移的值又是怎麼肯定的？實際上是當 Tableview 的 frame 超出了 safeArea 範圍以後，系統會調整內容的位置。系統經過設置 adjustedContentInset 爲 safeAreaInset 的值讓 Tableview 偏移。
圖 4.6 iPhone X 上 safeAreaInset 的值
注意一下這個 adjustedContentInset 是 readOnly 的屬性。咱們能夠經過設置 Tableview.contentInsetAdjustmentBehavior=UIScrollViewContentInsetAdjustmentNever 來糾正這個位置。固然還能夠經過設置 tableview.contentOffset 來抵消這個值，但仍是推薦第一種。
④ 「個人Tab」 導航欄上，右邊那個按鈕全都發生了偏移，致使沒法點擊。這個問題也是在新的導航欄結構視圖下會出現，緣由是新的導航欄結構用了 AutoLayout 佈局，咱們這個並非用常規的 UIBarButtonItem 方式實現的，而是一個 UIBarButtonItem ，他的 customView 包含了三個 Button，這幾個 Button 都是 frame 佈局，從而致使了在 AutoLayout 下的佈局問題。
正常的解決方式是：修改爲一個一個添加 UIBarButtonItem 和 UIBarButtonSystemItemFixedSpace。可是這樣引出來另一個問題，iOS 11 以前那種設置負寬度的 fixedspace 來調整間距的 trick 方式已經失效了！詳情見https://forums.developer.apple.com/thread/80075。
咱們這邊的方式是：依然用那種一個 CustomView 裏包含三個 CustomButton 的方式，而後分別加上約束。CustomView 只須要加上寬高，包含的 Button 加上 left、top 和 size。
圖 4.7 加約束脩正後樣式
如下是嘗試修復這部分問題的代碼：
// offset 問題
if (@available(iOS 11.0, *)) {
self.contentViewController.tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
}
// UIBarButtonItem 問題
if (@available(iOS 11.0, *)) {
[messageButtonsContainerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(themeButton.width + settingButton.width + messageButton.width, 44));
}];
[themeButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(messageButtonsContainerView);
make.left.equalTo(messageButtonsContainerView);
make.size.mas_offset(CGSizeMake(44, 44));
}];
[settingButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(messageButtonsContainerView);
make.left.equalTo(themeButton.mas_right);
make.size.mas_offset(CGSizeMake(44, 44));
}];
[messageButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(messageButtonsContainerView);
make.left.equalTo(settingButton.mas_right).offset(-10);
make.size.mas_offset(CGSizeMake(44, 44));
}];
}
UIBarButtonItem *rightBarItem = [[UIBarButtonItem alloc] initWithCustomView:messageButtonsContainerView];
self.navigationItem.rightBarButtonItems = @[rightBarItem];
總結
當前發現這些問題的環境是 Xcode 9 GM版本(9A235)的模擬器。歸結起來是三類問題：
- StatusBar 變高而且絕對佈局。
- 導航欄的視圖層級結構發生變化而致使 UI(titleView、UIBarButtonItem) 問題。（iPhone 6s iOS 11 上依然是舊的結構，是由於如今 AppStore 上的包依然是用 iOS 10 的 SDK 打出來的）。
- safeAreaInset 致使 Scrollview 偏移。
至於 Tabbar ，由於咱們用的是系統的，因此目前並無發現什麼奇怪的地方。但願咱們踩的這些坑可讓各位在適配的過程當中少走一些彎路！
源：https://tech.meituan.com/iPhoneX%E5%88%98%E6%B5%B7%E6%89%93%E7%90%86%E6%8C%87%E5%8C%97.html