iPhone X 劉海機(jī)于9月13日發(fā)布，給科技小春晚帶來一波高潮。作為開發(fā)人員卻多出來一份憂慮，iPhone X 怎么適配？我們 App 的腦袋會不會也長一劉海出來？Tabbar 會不會被圓角？先來看一下美團(tuán) App 的表現(xiàn)：

圖 1.1 啟動時的 App 表現(xiàn) ??????????圖 1.2 下拉刷新之后的表現(xiàn)

圖 1.3 搜索的表現(xiàn)??????????圖 1.4 “我的Tab”表現(xiàn)

在圖1.1中乍一看表現(xiàn)還不錯，可是在圖1.2中，下拉刷新之后，我們的導(dǎo)航欄還是被劉海擋住了。搜索也中槍，搜索首頁沒有辦法取消，“熱門搜索區(qū)域”也多出來一塊兒空白。另外，“我的Tab”頁部分如圖1.3、圖1.4所示，導(dǎo)航欄回不去了，右上角的三個UIBarButtonItem也不見了。其他還有很多UI上的Bug，等著我們?nèi)ヒ灰话l(fā)現(xiàn)并修改。

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

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

HIG部分

首先看一下各個機(jī)型尺寸的變化。

圖 2.1 各版本 iPhone 的尺寸

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

圖2.2 iPhone X 和其他設(shè)備的尺寸對比

布局

注意圖2.2藍(lán)色部分，你會發(fā)現(xiàn)這些都算在了展示內(nèi)容的區(qū)域。所以我們在設(shè)計的時候，要避免內(nèi)容被圓角、劉海給擋住。Like this：

圖 2.3 CGRectMake(0,0,100,100)

iPhone X 的坐標(biāo)系統(tǒng)以及能顯示內(nèi)容的區(qū)域如下圖所示：

圖 2.4 iPhone X 的顯示區(qū)域

Status Bar

iPhone X 上的 StatusBar 高度比之前的 iPhone 高一些，也就是說，我們?nèi)绻麑懰?0pt高度的 frame 布局，都要大面積修(tu)改(xue)。在 iPhone X 上，通過打印 [[UIApplication sharedApplication] statusBarFrame] 可以看到，高度是44pt。

圖 2.5 iPhone X 的狀態(tài)欄高度

“如果你的 App 是隱藏 StatusBar 的，建議重新考慮。iPhone X 為用戶在垂直空間上提供了更多展示余地，且狀態(tài)欄中也包含了用戶需要知道的信息，除非能通過隱藏狀態(tài)欄帶給用戶額外的價值，否則蘋果建議大家將狀態(tài)欄還給用戶。”

另外還有一點(diǎn)，用戶在使用 iPhone X 打電話的時候，StatusBar 的高度也不會發(fā)生變化了。

屏幕底部

因?yàn)闆]有了 Home 鍵，iPhone X 的底部是預(yù)留給系統(tǒng)功能的一個區(qū)域 - Home Indicator，這部分的高度是34pt。

圖 2.6 iPhone X 的 Home Indicator 區(qū)域

“如果你的底部是 TabBar，那么 Home Indicator 背景會來自于 TabBar 背景的延伸，如果我們是一個 feed 流的頁面，那么底部會展示 feed 流的局部。”

意思是如果有 TabBar，那么那個區(qū)域會延展你的 barTintColor；沒有的話，就顯示透明的（參照 Setting）。之所以這么設(shè)計，是為了讓 indicator 清晰可見，告訴用戶你可以滑動這部分區(qū)域。所以蘋果不建議我們的 UI 元素過于靠近這部分區(qū)域。

圖 2.7 有 TabBar 的 Home Indicator 區(qū)

SafeArea

iOS 11 廢棄了 iOS 7 之后出現(xiàn)的 topLayoutGuide/bottomLayoutGuide，取而代之的是safeLayoutGuide 概念。我們的UI元素都應(yīng)該布局在這些區(qū)域之內(nèi)，避免被各種 bar（NavgationBar、ToolBar、TabBar、StatusBar）遮擋。

圖2.8 iPhone 的 SafeArea

如果我們用了 AutoLayout，并且開啟了 safeAreaLayoutGuide，布局會自動加上這些 safeLayoutGuide，你的視圖不會超出這部分 SafeArea。如2.9所示，如果你需要增加 Guide 的區(qū)域，那么可以設(shè)置 self.additionalSafeAreaInsets 來增加區(qū)域。

圖 2.9 默認(rèn)的 SafeArea 和 self.additionalSafeAreaInsets = UIEdgeInsetsMake(64, 0, 0, 0);

其他

還有其他的一些改變，比如圖片的 Aspect Ratio 在 iPhone X 上的表現(xiàn)也會有所不同了；

劉海兩邊的區(qū)域都能響應(yīng)不同的手勢，最好不要和自己的 App 發(fā)生沖突。

來自Session 201的建議

① xib 里適配 iPhone X 的話，可以開啟 UseSafeAreaLayoutGuides（但這需要在 iOS 9 之后才能用，需要看你的 App 最低支持的版本）。

圖3.1 xib 屬性

② 如果用的系統(tǒng) SearchViewController，發(fā)現(xiàn)沒有灰色蒙層了，可以這么試試。 

圖3.2 iOS 11 UISearchViewController適配

之所以可以這么改，是因?yàn)?iOS 11 的 NavigationBar 和 SearchViewController 集成在一塊兒了。

③ 橫屏下的 UITableView，SenctionHeader 的背景顏色不是設(shè)置的那個顏色。

圖3.3 iOS 11 橫屏 Tableview 的作用方式

這個問題的原因是：橫屏下的 UITableView，Cell 都是和屏幕一樣寬，但是 Cell 的 ContentView 會被 inset 到 SafeArea 區(qū)域。 解決方法是：可以通過調(diào)整 Tableview 的默認(rèn)行為，改變 contentView 的屬性（如上圖 inset To SafeArea）來讓 contentview 頂?shù)竭吘?#xff0c;弊端是會改變整個 cell 的內(nèi)容顯示，而且 contentView 的 layoutMargin 依然還是相對于 SafeArea 的。 最佳方案是：改變 UITableViewHeaderFooterView.backgroundView 的 backgroundColor。

圖3.4 iOS 11 修改前后的樣式對比

劉海打理初體驗(yàn)

① 我們來看下開頭說的那個刷新之后首頁頂上去的問題怎么處理。經(jīng)過排查，這個問題屬于“狀態(tài)欄變高系列”，解決方案就是把固定的20pt高度改成 [[UIApplication sharedApplication] statusBarFrame].size.height]。

② 搜索頁面輸入框的位置發(fā)生了偏移，這是因?yàn)?iOS 11 的導(dǎo)航欄的視圖層級結(jié)構(gòu)發(fā)生了變化，和 iPhone X 的并無直接關(guān)系。iOS 11 導(dǎo)航欄的視圖層級關(guān)系如下：

圖4.1 iOS 11 之后的 NavigationBar ????圖4.2 iOS 11 之前的 NavigationBar

適配方式是：取到這個 _UIButtonBarStackView 的位置和尺寸信息，然后更改 PFBNavigationBarContainerView 的 X 坐標(biāo)。

③ “我的Tab” 頁面多出來一塊兒灰色的區(qū)域，經(jīng)過排查發(fā)現(xiàn)這個是 Tableview 的背景色。也就是說其實(shí)是 Tableview 向下偏移了。

圖4.3 iOS11 下“我的Tab” 頁面 Tableview 發(fā)生偏移

出現(xiàn)這個的原因是：iOS 11 之后 scrollview 多出來一個 adjustedContentInset 區(qū)域。

圖 4.4 iOS 11下 ScrollView 的新屬性

通過打印這個值，我們發(fā)現(xiàn)正好和 contentoffset.y 相符合。

圖 4.5 這個新屬性在 iPhone X 上的值

那為什么會發(fā)生偏移？這個偏移的值又是怎么確定的？其實(shí)是當(dāng) Tableview 的 frame 超出了 safeArea 范圍之后，系統(tǒng)會調(diào)整內(nèi)容的位置。系統(tǒng)通過設(shè)置 adjustedContentInset 為 safeAreaInset 的值讓 Tableview 偏移。

圖 4.6 iPhone X 上 safeAreaInset 的值

注意一下這個 adjustedContentInset 是 readOnly 的屬性。我們可以通過設(shè)置 Tableview.contentInsetAdjustmentBehavior=UIScrollViewContentInsetAdjustmentNever 來糾正這個位置。當(dāng)然還可以通過設(shè)置 tableview.contentOffset 來抵消這個值，但還是推薦第一種。

④ “我的Tab” 導(dǎo)航欄上，右邊那個按鈕全都發(fā)生了偏移，導(dǎo)致無法點(diǎn)擊。這個問題也是在新的導(dǎo)航欄結(jié)構(gòu)視圖下會出現(xiàn)，原因是新的導(dǎo)航欄結(jié)構(gòu)用了 AutoLayout 布局，我們這個并不是用常規(guī)的 UIBarButtonItem 方式實(shí)現(xiàn)的，而是一個 UIBarButtonItem ，他的 customView 包含了三個 Button，這幾個 Button 都是 frame 布局，從而導(dǎo)致了在 AutoLayout 下的布局問題。

正常的解決方式是：修改成一個一個添加 UIBarButtonItem 和 UIBarButtonSystemItemFixedSpace。但是這樣引出來另外一個問題，iOS 11 之前那種設(shè)置負(fù)寬度的 fixedspace 來調(diào)整間距的 trick 方式已經(jīng)失效了！詳情見https://forums.developer.apple.com/thread/80075。

我們這邊的方式是：依然用那種一個 CustomView 里包含三個 CustomButton 的方式，然后分別加上約束。CustomView 只需要加上寬高，包含的 Button 加上 left、top 和 size。

圖 4.7 加約束修正后樣式

以下是嘗試修復(fù)這部分問題的代碼：

// 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];

總結(jié)

當(dāng)前發(fā)現(xiàn)這些問題的環(huán)境是 Xcode 9 GM版本(9A235)的模擬器。歸結(jié)起來是三類問題：

StatusBar 變高并且絕對布局。

導(dǎo)航欄的視圖層級結(jié)構(gòu)發(fā)生變化而導(dǎo)致 UI(titleView、UIBarButtonItem) 問題。（iPhone 6s iOS 11 上依然是舊的結(jié)構(gòu)，是因?yàn)楝F(xiàn)在 AppStore 上的包依然是用 iOS 10 的 SDK 打出來的）。

safeAreaInset 導(dǎo)致 Scrollview 偏移。

至于 Tabbar ，因?yàn)槲覀冇玫氖窍到y(tǒng)的，所以目前并沒有發(fā)現(xiàn)什么奇怪的地方。希望我們踩的這些坑可以讓各位在適配的過程中少走一些彎路！

總結(jié)

以上是生活随笔為你收集整理的iPhone X 刘海打理指北的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。