前言
與以往的iphone不同，這次iphone x用上了時下流行的全面屏設計，屏幕的分辨率和比例都是蘋果首次采用，而且還有個“別致的劉海”，這就需要現有的app為iphone x重新作適配了。
所以iphone x 的到來，驚艷的是果粉，苦逼的是程序猿。今天升級到xcode9.0，運行項目，所謂的全屏 iphone x，but 頁面好像也沒有全屏，于是根據之前的適配經驗，總算初步解決了這個問題，記錄如下，以備后需。
app 頁面適配適配前
適配前
問題：app 未全屏顯示
解決辦法
launchimage 中添加一個和 iphone x 相關的啟動圖片
* 圖片尺寸：1125 * 2436
* contents.json 中代碼如下
|
1
2
3
4
5
6
7
8
9
|
{ "extent" : "full-screen", "idiom" : "iphone", "subtype" : "2436h", "filename" : "1125_2436.png", "minimum-system-version" : "11.0", "orientation" : "portrait", "scale" : "3x"} |
適配后
頁面布局細節
safe area
動機
iphone x 取消了 home鍵，實現了高屏占比，所以默認 view 的區域是全屏幕
屏幕四周有圓角、頂部有“劉海”、底部有手勢區域
頂部導航欄
* 注意：導航欄高度是 44 + 44
底部手勢區域
safe area 如下圖 (紅色區域)
safe area 大小豎屏
|
1
2
3
4
5
|
? uiedgeinsets - top : 44.0 - left : 0.0 - bottom : 34.0 - right : 0.0 |
橫屏
|
1
2
3
4
|
- top : 0.0- left : 44.0- bottom : 21.0- right : 44.0 |
自動布局時的注意點
- ios11 以前，我們布局時，視圖的 top 和 bottom 一般參照的是 top layout guide 和 bottom layout guide
- ios11 以后，那兩個參照已經 deprecated (過時)了，而被 safe area 取代。
- safe area 要求最低支持 ios9.0
但凡和父視圖相關的 top 或者 bottom 屬性的自動布局，應該參照 safe area。（之前默認是 superview，當然如果產品允許，那就是另一回事了）
選擇 safe area布局示例如下：
未選擇 safe area布局示例如下：
網上有看到有黑iphone x的，說用它沒法玩王者榮耀等游戲，理由是可能看不到自己有多少錢或者推塔鍵和信號鍵沒了，對此估計是多慮了！iphone x 出售之前，游戲廠商肯定會做適配，高屏占比只會提高游戲體驗，不會產生那么嚴重的視覺問題的。
適配前后，效果圖示例如下：
xcode9 適配
wkwebviewjavascriptbridge
|
1
2
3
4
5
6
7
8
9
10
11
|
// 原貼地址：https://github.com/marcuswestin/webviewjavascriptbridge/issues/278- (void)webview:(wkwebview *)webviewdidfailnavigation:(wknavigation *)navigation witherror:(nserror *)error { // …… // xcode 升級到9后 wkwebviewjavascriptbridge.m 中有個 bug // 需要在"decisionhandler(wknavigationactionpolicycancel);"后加上 return，否則崩潰。 // 不升級 xcode 的話，沒問題。 decisionhandler(wknavigationactionpolicycancel); return;} |
部分頁面適配 iphone x
底部有按鈕的頁面
適配前
其底部約束如下圖：
適配后
其底部約束如下圖：
控制器生命周期之viewsafeareainsetsdidchange
- viewdidload
- viewwillappear
- viewsafeareainsetsdidchange（new）
- viewwilllayoutsubviews
- viewdidappear
可以在 viewsafeareainsetsdidchange 后，設置 safe area
|
1
2
3
|
if #available(ios 11.0, *) { self.additionalsafeareainsets = uiedgeinsetsmake(10, 0, 0, 34)} |
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對服務器之家的支持。
原文鏈接：http://blog.csdn.net/chenyblog/article/details/77987751
