iOS11適配iPhoneX總結

屏幕尺寸相關變化啟動圖的適配App內部樣式適配自定義導航欄的情況TableView、WebView、CollectionView等繼承ScrollView的適配屏幕尺寸相關變化

高度增加了145pt，變成812pt.

狀態欄高度由20pt變成44pt，留意這個距離就能避開「劉海」的尷尬，相應的導航欄以上變化64->88。

底部工具欄需要為home indicator留出34pt邊距。

物理解析度為1125px * 2436px.

啟動圖的適配

一、 如果在iPhoneX上啟動App並沒有佔滿整個屏幕,而是在中心保持原有高度，需要修改啟動圖。

未修改前張這個鬼樣：

通過方式啟動

如果啟動圖原來使用的Assets中的LaunchImage，如下圖：

給Brand Assets添加一張1125*2436大小的圖片

打開Assets.xcassets文件夾，找到Brand Assets

右鍵Show in Finder

添加一張1125*2436大小的圖片

修改Contents.json文件,添加如下內容

{

"extent":"full-screen",

"idiom":"iphone",

"subtype":"2436h",

"filename":"1125_2436.png",

"minimum-system-version":"11.0",

"orientation":"portrait",

"scale":"3x"

}

再次啟動App就可以看到全屏顯示了

App內部樣式適配

在適配之前先介紹下的調用順序：

UIEdgeInsets - top : 44.0 - left : 0.0 - bottom : 34.0 - right : 0.0

只有在調用及以後的方法才能獲得view和Controller的UIEdgeInsets。所以在viewDidLoad中根據Safe Area設置界面會有問題。

自定義導航欄的情況

先來看看隱藏系統導航欄，自定義NavigationBar不適配時iPhoneX下是什麼樣子。下圖是不適配時效果圖和約束。

會發現原來設置64高度的自定義Bar離劉海很近。原因就是iPhoneX下狀態欄高度由20變成了44。

解決方法有三種：

在Storyboard中使用Safe Area LayoutGuides,這樣有個弊端是在Storyboard使用Safe Area最低只支持iOS9，iOS8的用戶就要放棄了，這樣老闆肯定不同意。

解決思路就是，去除自定義Bar的64像素高度約束，設置TableView的頂部距離Safe Area的垂直距離為44。

選擇viewcontroller所在的storyboard，在File inspector中勾選Use Safe Area Layout Guides.

從選中TableView，按住control鍵,按住滑鼠左鍵拉到Safe Area上，選擇Vertical Spacing。

選中剛添加的約束，在Size Inspector中修改Second Item為Safe Area.Top ,Constant = 44

用代碼來布局，弊端是原來用Storyboard布局的改成純代碼，累死程序員不償命。方法就是在設置自定義bar的高度。

@available(iOS11.0,*)

overridefuncviewSafeAreaInsetsDidChange(){

navigationBarH=view.safeAreaInsets.top+44

}

當然還有第三種方式了，既能使用Storyboard又能適配iPhoneX。

思路：在Storyboard中按照非iPhoneX設置自定義導航欄的高度為64，然後把高度約束作為屬性在源碼中修改為view.safeAreaInsets.top + 44。

把自定義導航欄的高度拖到Controller作為屬性

在viewSafeAreaInsetsDidChange中修改導航欄的高度

@available(iOS11.0,*)

overridefuncviewSafeAreaInsetsDidChange(){

customNaviBarHightConstraint.constant=view.safeAreaInsets.top+44

}

TableView、WebView、CollectionView等繼承ScrollView的適配

原來的老項目中包含TableView、CollettionView的頁面如果是使用Storyboard設置的約束，在iPhoneX中可能會有34像素的安全區域，scrollview劃不到底部，如下圖：

出現這個區域的原因是：原來設置底部約束是tableview底部到Bottom Layout Guide.Top的距離。

解決辦法：

修改約束的Bottom Layout Guide.Top為Superview。

修改完後TableView就可以滾到到底部了。

以上只是我們讀秒錢包項目在適配iPhoneX時遇到的幾個小問題，可能還會有其他問題，歡迎在討論區討論。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！