適配 iPhone X 之異形屏

蘋果終於在一年一度的秋季發佈會發佈了 iPhone 十週年記念版：iPhone X。

iPhone X 是 2014 發佈 iPhone 6 以後又一次外形的變化，也是 iPhone 歷史上（可能）最大的一次外觀變化。

我相信不少開發者和設計師看到 iPhone X 的這個「天貓內定」屏幕的時候內心十分苦惱：該怎麼爲這個機型作設計和適配？這篇文章從蘋果的 iPhone X 開發和設計指南出發，試圖來解決這個問題。

須要注意的是，本文不對設計指南完整的、不保留的搬運，而是根據指南和我的實操，作出的結論。完整的內容請自行查看文末連接。若有錯誤歡迎指出。

先拋數據

iPhone X 採用了 2436*1125 分辨率，擁有一塊大約 2.17:1 的屏幕。iPhone X 的屏幕像素比 iPhone 8 高出 145 pt。適配 iPhone X 時並不須要像傳聞的同樣使用 @4x 的素材，而是繼續使用 @3x 便可。蘋果鼓勵咱們使用 PDF 素材來縮小包大小。

iPhone X 的狀態欄高度爲 44 pt ，iPhone 8 和 iPhone 8 Plus 和之前同樣爲 20 點。通過個人測試，X 的 tabbar 比之前高出 43 個點（之前是 40，如今是 83）。須要注意的是，橫屏時底部高度爲 33 pt。這個數據能夠用於底部適配，下文會討論這個話題。

Safe Area

iOS 11 爲屏幕適配引入了一個十分重要的概念：Safe Area.

顧名思義，Safe Area 指的是屏幕內適合放置控件的安全區域。概念太模糊，下面舉例說明：

在沒有狀態欄和其餘東西的 iPhone 8 裏，Safe Area 是指整個屏幕。

當加入狀態欄後，Safe Area 便向下減小了 20 個點。當咱們加入 Navigation 的時候，Safe Area 又減小了 44 個點。同理，咱們再加入 Tabbar 的時候，Safe Area 又減小了 44 個點。

在 iPhone X 裏，當咱們沒有使用狀態欄時，Safe Area 依然和上下邊有必定的距離。按照個人測量，此時距離底部應該是 43 個點，距離頂部應該是 44 個點。

同理，加入不一樣 Bar 以後，iPhone X 的 Safe Area 都會有相應的變化。

橫屏時， iPhone X 的 Safe Area 與左右和下部都有距離。須要注意的時，像 TableView 這樣的控件，須要將它的 Cell ContentView 與 Safe Area 對齊，而把 TableView 內容擴展到整個手機。

所以，Auto layout 在 iPhone X 能夠有很好的繼承。

使用 Safe Area

在 xib 裏使用 Safe Area 很簡單，打開開關就能夠了。而後就能夠約定控件與 Safe Area 的約束來完成適配。

而在代碼裏使用 Safe Area，可使用 view 的 safeAreaLayoutGuide 屬性。我找到的一段參考代碼：

1 2 3 4 5 6 7

if #available(iOS 11, *) { let guide = view.safeAreaLayoutGuide NSLayoutConstraint.activate([ greenView.topAnchor.constraintEqualToSystemSpacingBelow(guide.topAnchor, multiplier: 1.0), guide.bottomAnchor.constraintEqualToSystemSpacingBelow(greenView.bottomAnchor, multiplier: 1.0) ]) }

頂部設計誤區

先講講最基本的原則：不要由於 iPhone X 的圓角、「劉海」、底部 Home Button 的影響，把控件擋住，影響用戶使用。

若是你的應用使用 Auto Layout，在很大程度上適配起來是沒有壓力的。

有些朋友在發佈會之後苦惱於 iPhone X 奇葩的雙耳朵設計，聯想到 X 使用了 OLED 屏幕（黑色像素不發光），想到了把應用頂部作平，置於耳朵之下的設計方案。也有開發者爲此造了輪子。

然而，根據蘋果的設計指南，這類設計是不被容許的。你的應用應該儘量地充滿整個屏幕，不能上下留邊。

底部設計探討

昨天我在朋友圈和微博發了這樣的兩幅圖，並詢問你們哪一個好。

看了你們的反饋，兩種喜歡的人數基本同樣（只相差一票）。這是我在給一個 SheetView 作 iPhone X 時候遇到的疑問。帶着疑問我把設計指南的視頻又從新看了一遍。

先說結論，這裏應該是第二種設計是被蘋果鼓勵的。下面從設計指南中找答案。

設計指南對底部適配有兩種說法。一是不要將控件放置在易被誤觸的 Home 區域，二是鼓勵你們把屏幕充滿，包括底部。

這裏的 SheetView 應該符合哪一種狀況呢？仔細聽設計指南後發現，兩種說法是在討論不一樣狀況時候出現的：一是討論 button 和手勢，二是講到 TableView 時提到。並且，談到第二種狀況時，視頻也指出應該把 TableView 和 CollectionView 這類控件充滿屏幕。

我又擔憂這些還不夠證實結論，我又再次看了一下系統層的 AlertSheet 是怎麼實現的。答案更支撐了個人結論。

於是，iPhone X 的底部設計既須要考慮避免用戶誤觸，也須要儘量的把內容填充屏幕。我的結論：若是控件不具備內容屬性，那不該該覆蓋住 Home 區域

結論

以上是我適配 iPhone X 的一些總結。若有錯誤歡迎及時指出。

更多我的分享，能夠瞧瞧我不怎麼更新的技術博客：iOSHub。固然還有非技術的ChanTalk。