注意：本文為原創(chuàng)，如需轉載請聯系作者。
隨著時間的推移，我們盼的iPhone X 開售的日子也越來越近，大家是不是還有一點小激動呢。激動歸激動，對與像和我一樣是iOS程序來說也是為iPhone X做適配的時候了。
為此我觀看了蘋果官方的講解視頻，有興趣的朋友請點擊這里進行觀看，如果不想觀看視頻的請往下看，我已把精華提取出來。
下面我根據蘋果官方的WWDC app來總結三條需要注意的地方。
第一條：
如果我們的app中有類似預覽相冊的功能，那么在沒有處理的情況下，在iPhone X上面運行的時候會出現如（圖1）的問題。
我們可以一眼就看出來問題所在，就是兩個控件相隔太近。
解決辦法如下：
第一步根據（圖2）中箭頭所指勾選 Use Safe Area Layout Guides選項。
第二步根據（圖3）首先點擊箭頭1所指向，看箭頭2是否變色，如果變色說明已經勾選，然后點擊箭頭三所指向的First Item會彈出如（圖4）的下拉框。
舍棄SuperView選中Safe Area。
然后運行效果如（圖5）
大功告成，完美。
第二條：
如果在你的app中有如下（圖6）的搜索按鈕，那么在iPhone X 中可能出現如（圖7 和 圖8）的問題。
而我們想要的效果是如（圖9）在豎屏情況下應該和自帶的電話本一樣的效果。
下圖（圖10）是搜索欄的舊代碼部分。
我們做兩處修改，第一步，對于這個視圖控制器，不顯示搜索控制器，而是把它交給UINavigationItem；第二步，將搜索控制器的“isActive”屬性設置為“true”，這樣會使導航欄激活搜索控制器并開始編輯。注意：我們可以使用“Availability Support”這項功能讓設置僅對iOS 11 有效，而在舊版的系統(tǒng)中保留現有的效果。修改后的代碼如下圖（圖11）所示。
然后我們運行后效果如下所示（圖12 和 圖 13）
大功告成，完美。
第三條：
如（圖14）該頁面用UITableView來布局，在豎屏模式下看起來不錯，雖說這里的搜索欄顯示也不太對，這個搜索欄恰好是作為Header視圖插入到表格視圖的，
但是我們可以像剛才一樣改動（如圖15），
也就是讓搜索欄集成到導航欄中，在設置合適的活動狀態(tài)，然后我們運行，豎屏看起來不錯（如圖16），
但是如果我們橫屏，搜索欄看起來也不錯（如圖17），但是用在表格區(qū)域的Header有問題，就是顏色沒有延伸到屏幕邊緣。
根據代碼（圖18）我們可以看到，背景顏色是設置在了contentView上，但是這種做法在iPhone X 是不行的。
我們打開如下圖（圖19）界面查看圖層布局，
為了更好的理解和查看，把重要元素提取出來如下圖（圖20），在圖中我們可以看到，有個勾選項Inserts To Safe Area ，我們可以取消勾選（如果是代碼布局，也可以通過屬性來調用）用以實現背景色延伸到屏幕邊緣，但是如果是使用這種方法，那么content View上面的控件也會移動，所以說這種方法不可取。
在這里我們有更為簡單的處理方法，代碼如下（圖21），我們直接設置它的backgroundView的顏色就好了。
然后我們從新運行看效果（圖22）
大功告成，完美。
通過這三個問題，和解決辦法，大家也應該看出來問題所在，其實對iPhone X 的UI布局來說，最主要就是Safe Area 這個東西。然而還有一個Layout Margin屬性，在這里我們就先不做過多的敘述，具體的分布圖如下（圖23），想要詳細了解的可以去查看蘋果開發(fā)文檔，或者網上搜索。
最后再做一點總結：
第一：遵循iOS 11 SDK，并且使用Launch Storyboard ，可以讓你的app使用原生全分辨率。
第二：然后豎屏模式下也可能會遇到一些問題，但大多數問題都處在橫屏模式下，所以如果app支持橫豎屏切換，一定要旋轉一下界面測試UI布局，既要測試左旋轉，也要測試右旋轉。
第三：遵循Safe Area 可以避免大多數問題，Auto Layout 和 safeAreaLayoutGuides可以自動解決很多排版方面的問題，但是如果是手動布局也可以使用Safe Area 嵌入自由計算所需要的布局數據，這些屬性都可以通過UIView類進行訪問。
第四：最終要的一點，就是不要讓控件干擾到屏幕底部的主屏幕指示器（就是那個橫線）。
