iPhone X 適配(全)，iphone適配

iPhone X 適配(全)，iphone適配
背景

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

圖 1.1 啟動時的 App 表現           圖 1.2 下拉重新整理之後的表現

圖 1.3 搜尋的表現          圖 1.4 “我的Tab”表現

在圖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 來增加地區。

圖 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)的模擬器。歸結起來是三類問題：

至於 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