iPhone X 適配 ( iOS 11適配 )

總結:

1.狀態欄高度發生變化,解決方案:佈局的時候這個高度不要寫死,經過方法獲取高度.

2.導航欄的視圖層級結構發生變化而致使 UI(titleView、UIBarButtonItem) 問題。

3.safeAreaInset 致使 Scrollview 偏移。

4.Tabbar發生變化,建議用系統的tabbar.

 

先看看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);

劉海打理

 

1.咱們的頁面大多會上移,這屬於於「狀態欄變高系列」，解決方案就是把固定的20pt高度改爲 [[UIApplication sharedApplication] statusBarFrame].size.height]。

2.搜索頁面輸入框的位置發生了偏移，這是由於 iOS 11 的導航欄的視圖層級結構發生了變化，和 iPhone X 的並沒有直接關係。iOS 11 導航欄的視圖層級關係以下：

iOS 11 以後的 NavigationBar

iOS 11 以前的 NavigationBar

適配方式是：取到這個 _UIButtonBarStackView 的位置和尺寸信息，而後更改 PFBNavigationBarContainerView 的 X 座標。

 

3.iOS 11 以後 scrollview 多出來一個 adjustedContentInset 區域。UItableView 會發生偏移.那爲何會發生偏移？這個偏移的值又是怎麼肯定的？實際上是當 Tableview 的 frame 超出了 safeArea 範圍以後，系統會調整內容的位置。系統經過設置 adjustedContentInset 爲 safeAreaInset 的值讓 Tableview 偏移.注意一下這個 adjustedContentInset 是 readOnly 的屬性。咱們能夠經過設置 Tableview.contentInsetAdjustmentBehavior=UIScrollViewContentInsetAdjustmentNever 來糾正這個位置。固然還能夠經過設置 tableview.contentOffset 來抵消這個值，但仍是推薦第一種。

 

iOS 11的適配

 

1.xib 裏適配 iPhone X 的話，能夠開啓 UseSafeAreaLayoutGuides（可是這個是須要在 iOS 9 以後才能用，須要看你的 App 最低支持的版本）。

2.若是用的系統 SearchViewController，發現沒有灰色蒙層了，能夠這麼試試。之因此能夠這麼改，是由於 iOS 11 的 NavigationBar 和 SearchViewController 集成在一起了。

3.橫屏下的 UITableView，SenctionHeader 的背景顏色不是設置的那個顏色。

這個問題的緣由是：橫屏下的 UITableView，Cell 都是和屏幕同樣寬，可是 Cell 的 ContentView 會被 inset 到 SafeArea 區域。

 

解決方法是：能夠經過調整 Tableview 的默認行爲，改變 contentView 的屬性（如上圖 inset To SafeArea）來讓 contentview 頂到邊緣，弊端是會改變整個 cell 的內容顯示，並且 contentView 的 layoutMargin 依然仍是相對於 SafeArea 的。

最佳方案是：改變 UITableViewHeaderFooterView.backgroundView 的 backgroundColor。