上面那篇文章是中文版,而且下面還有三個帶中文字幕的視訊,從設計、編碼和原理三個角度告訴你怎麼樣是適配 iPhone X。注意,Designing for iPhone X 這個視訊,一般的設計師是看不懂的,所以這個視訊雖說是設計知識,但是其實是給開發人員看的。所以最好是我們開發人員看了講給 UI 設計師聽,告訴他們怎麼適配。
02.啟動頁適配
如果你是第一次下載 Xcode 9,執行起來,APP 並沒有完全填充整個模擬器,這時你需要 UI 設計師給你切一張新的啟動圖,圖片尺寸應該和 iPhone X 一樣,iPhone X 的螢幕尺寸為 375 * 812 pt,記得 iPhone X 的螢幕是 @3x 的。
這裡還有一個細節,拿到這張 iPhone X 啟動圖以後在你的專案裡找到 Assets.xcassets 裡的 LaunchImage,但是並沒有放 iPhone X 啟動圖的位置,此時,你應該先把之前的啟動圖複製一份,然後將舊的 LaunchImage 刪除,然後右鍵重新建立一個 LaunchImage,此時,你就可以看到 iPhone X 啟動圖的位置了。
03.啟動頁廣告設計
之前所有的廣告頁面設計都是按照 iPhone 6s 的螢幕標準來設計的,這在沒有 iPhone X 的時代是沒有問題的。現在有了 iPhone X,它的螢幕比例不是 16 :9,所以這個廣告頁面放到 iPhone X 上就會出現左右被裁掉。但是如果按照 iPhone X 的螢幕來設計,就會導致在非 iPhone X 上顯示出現上下被截掉的情況。
因此我們採取的方法是,仍然使用 iPhone 6s 的螢幕來進行設計,只是設計師注意在左右留出一部分距離,保證在 iPhone X 上顯示把左右裁掉一部分以後依然能夠正常顯示。
其實文件裡有寫這個屬性的註釋: If the view is not currently installed in a view hierarchy, or is not yet visible onscreen, the edge insets in this property are 0. 假如當前 view 沒有佈局到視窗的中,這個值就是 0。