●●●

適配前的準備

擁抱iPhone X的變化

開始適配前，先回顧下，iPhone X相比之前的iPhone設備，帶來了哪些不一樣的特性：

iPhone X的屏幕尺寸

iPhone X的寬度同iPhone 6/6s/7/8，但高度多出來145pt，垂直方向可以承載更多內容。對于大多數用ScrollView展示內容的頁面來說，這個尺寸的變化對布局影響不大，但對一些內容固定，布局需要強依賴設備尺寸和比例的頁面，就需要留意一下，例如整張圖片鋪滿屏幕的頁面、啟動引導頁面、功能引導蒙層。

這類頁面適配時，要注意圖片縮放比例要合理，內容要撐滿屏幕，不要四周留空白。

狀態欄和導航欄

iPhone X的劉海，讓statusBar變為由原來的20pt變為44pt，導航欄高度默認情況下仍然是44pt，不過iOS 11中新增了一種大標題的導航欄樣式，如果設置了prefersLargeTitles = YES，則高度變為96pt。所以在iPhone X上，狀態欄加導航欄（默認）高度是88pt，而不是之前的64pt，如果之前有一些隱藏導航欄，或者使用自定義導航欄的頁面，都要全部走查一遍。

安全區域

iOS 11中新增了Safe Area的概念，它描述了視圖不被其他內容遮擋的區域，避開了諸如導航欄，TabBar之類有可能擋住view的視圖。iPhone X上默認的根視圖的安全區域如下圖：

關于安全區域的適配有幾點要注意：

a. 圓角及傳感器部分避免用戶交互；b. 避免干擾底部Home Indicator，要讓這部分清晰可見；c. 避免干擾系統邊緣手勢（實在有需求的話，可以開啟邊緣保護）

Safe Area可以有兩種方式來獲取：safeAreaInsets和safeAreaLayoutGuide。safeAreaInsets屬性反映了一個view距離該view的安全區域的邊距。對于一個UIViewController的根視圖而言，safeAreaInsets值包括了被statusbar和其他可視的bars覆蓋的區域和其他通過additionalSafeAreaInsets自定義的insets值。而該視圖層級上的其他view的additionalSafeAreaInsets表示了該視圖在父視圖范圍內的部分被覆蓋的區域；

當UIView不在視圖層級或者屏幕上的時候，safeAreaInsets = UIEdgeInsetsZero，safeAreaLayoutGuide描述的區域也是跟自身一樣大。所以要正確獲取這兩個屬性的值，需要注意這兩個值改變的時機。由于我們適配時，使用了簡單粗暴的方法，這里不展開說明。

目前的用戶界面局現狀

• 最低支持系統版本iOS 8.0，無法使用Safe Area Layout Guides，對于舊的頁面，以后也不打算使用Safe Area Layout Guides重新布局。

• 主要的頁面內容都是以UIScrollView或其子類來承載的，iOS 11之前，UIViewController默認的automaticallyAdjustsScrollViewInsets = YES可以讓頁面內容正常顯示，在iOS 11之后，這個屬性雖然被廢棄了，但UIScrollView新增的屬性contentInsetAdjustmentBehavior（默認值是UIScrollViewContentInsetAdjustmentAutomatic）也可以確保內容正確顯示。

• 布局時未使用過topLayoutGuide和bottomLayoutGuide，基本都是參照superview，所以沒有向Safe Area Layout Guides轉換的問題。

簡單粗暴的宏

為了快速適配，這里定義了幾個宏。雖然有人吐槽這種適配方式擴展性不好，以后萬一出現了更多機型，狀態欄高度不是44pt了怎么辦？最好的方式是都根據安全區域來適配。不過我覺得，就算這情況真的出現了，到時候也避免不了新一輪的適配吧。

#define JYFUHeightNavBar ? ? ? ? ?44 #define JYFUHeightSystemStatus ? ?(JY_IS_IPhoheX ? 44 : 20) #define JYFUHeightTopBar ? ? ? ? ?(JYFUHeightNavBar + JYFUHeightSystemStatus) ? //status bar和nav bar高度 #define JYFUHeightBottomGap ? ? ? (JY_IS_IPhoheX ? 34 : 0) #define JYFUHeightTabBar ? ? ? ? ?(49 + JYFUHeightBottomGap) #define JYFULeftContentMargin ? ? (JY_IS_Protrait ? 0 : (JY_IS_LandScapeLeft ? JYFUHeightBottomGap : JYFUHeightSystemStatus)) ?//全屏時iphoneX內容左邊距，用于假旋轉 #define JYFURightContentMargin ? ?(JY_IS_Protrait ? 0 : (JY_IS_LandScapeLeft ? JYFUHeightSystemStatus : JYFUHeightBottomGap)) ?//全屏時iphoneX內容右邊距，用于假旋轉

●●●

開始適配

啟動圖

適配iPhone X的第一步就是要給它提供一張啟動圖，系統是根據是否設置了相應機型的啟動圖來判斷該機型是否適配。

啟動圖設置有三種方式：

使用LauchScreen.xib，這是官方推薦的方式，是Xcode6/iOS8的加入的功能，Xcode7之后默認添加的是LauchScreen.storyboard；

使用靜態LaunchImage圖片集合，在這個圖片合集中添加一張1125px × 2436px大小，@3x的圖片即可，命名無所謂；

放在工程下的普通文件夾中，這種古老的方式就比較麻煩一點，對圖片命名有要求，添加完之后需要在.plist文件中進行配置。

TopBar變化適配

由于iPhone X上狀態欄高度的變化，導致頁面頂部的一些布局異常，主要有兩種場景：自定義導航欄或者沒有導航欄的情況。

自定義導航欄

這部分頁面的自定義導航欄高度是寫死的64pt，要全部改為JYFUHeightTopBar，特別是有些復雜的頁面，頁面布局要依賴導航欄高度的，改的時候也要非常謹慎。

無導航欄

沒有導航欄的頁面，頂部內容通常會需要延伸至狀態欄區域。如果內容是以UIScrollView承載，那我們需要修改

scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;

以前這部分擴展區域高度是20pt，在iPhone X上是44pt，因此緊貼著狀態欄下面的這塊視圖高度需要重新計算。由于這部分不是寬高等比的，多余的部分會被截掉，所以需要視覺出圖時注意圖片里內容的布局。

另外還有一種情況，像下面這個頁面，輪播圖是可以點擊的，但是延伸至狀態欄的部分是無法響應用戶操作。調試發現UIScrollView有個私有屬性，effectiveSafeAreaInset，其值為{44, 0, 0, 0}，這個inset.top的值剛好是狀態欄的高度，即當前頁面的安全區域與屏幕頂部的距離。

有交互功能的控件避開安全區域

非安全區域，可以平鋪內容用作展示，但是不能存在可交互的控件。

豎屏：

在我們項目中，頂部按鈕相對獨立，只需要調整距離約束就可以，而且也不多。但底部控件落入非安全區域的情況就比較多了，一些頁面底部帶有類似工具欄的容器視圖，還有大量的浮窗，自定義action sheet等。這些情況可能就不是拔高底部內容這么簡單了（大多數情況，視覺會覺得不好看，底部內容會重新設計），這部分的適配工作量還是很可觀的。

橫屏：

主要是一些需要全屏顯示的頁面，例如播放器之類，播放器上一般來說有不少控件，都需要往中間縮進，收到安全區域內。

其他要注意的問題

• iPhone X上，非必要的話，最好不要隱藏狀態欄。

• UTableView在橫屏時，UITableViewCell的contentView會自動insert到safe area。

• 內嵌WebView的頁面的適配，內容加載出來之前，底部可能會出現黑色一條，這是由于scrollVIew的底部縮進引起的。另外，涉及到H5內容的適配，以及頁面底部存在懸浮視圖的情況，這個就需要Web端同事配合了。

——【特別推薦】——

網易MCtalk泛娛樂產品峰會

——New娛樂?趣IP——

8大嘉賓有料：網易云音樂產品總監沈博文?美拍內容副總裁?才華?每日故宮主創?彥風?網易云信副總經理

陳麗…
8大話題有趣：大內容時代下的短視頻、超級IP產品要如何養成、故宮文物遺產的數字化新生命探索...
戳【閱讀原文】即可報名

↓↓↓

總結

以上是生活随笔為你收集整理的iPhone X适配小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。