背景

iPhone X 劉海機於9月13日發佈，給科技小春晚帶來一波高潮。作為開發人員卻多出來一份憂慮，iPhone X 怎麼適配？我們 App 的腦袋會不會也長一劉海出來？Tabbar 會不會被圓角？先來看一下美團 App 的表現：

在圖1.1中乍一看表現還不錯，可是在圖1.2中，下拉刷新之後，我們的導航欄還是被劉海擋住了。搜索也中槍，搜索首頁沒有辦法取消，“熱門搜索區域”也多出來一塊兒空白。另外，“我的Tab”頁部分如圖1.3、圖1.4所示，導航欄回不去了，右上角的三個UIBarButtonItem也不見了。其他還有很多UI上的Bug，等著我們去一一發現並修改。

針對可能出現的問題，蘋果在 developer.apple.com 上給出了一些建議。其中一個是 HIG (Human Interface Guideline)。另外 WWDC 會議官方 App 的作者，也給出了適配時的一些經驗。

我們來看看他們是怎麼說的。

HIG部分

首先看一下各個機型尺寸的變化。

圖 2.1 各版本 iPhone 的尺寸

下圖是 iPhone X 對比其他機型的變化部分。iPhone X 和 iPhone 8 的寬度一致，在垂直方向上多了145pt，這就意味著首頁可以展示更多的內容，多出來的這20%的垂直空間，也許可以掛上更高價值的運營位。

圖2.2 iPhone X 和其他設備的尺寸對比

佈局

註意圖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 來增加區域。

其他

還有其他的一些改變，比如圖片的 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 導航欄的視圖層級關係如下：

適配方式是：取到這個 _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)的模擬器。歸結起來是三類問題：

1. StatusBar 變高並且絕對佈局。
2. 導航欄的視圖層級結構發生變化而導致 UI(titleView、UIBarButtonItem) 問題。（iPhone 6s iOS 11 上依然是舊的結構，是因為現在 AppStore 上的包依然是用 iOS 10 的 SDK 打出來的）。
3. 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