WeTest 導讀
隨着蘋果發布會的結束,Xcode的GM版也上線了,也意味着iPhoneX適配之旅的開始。
一、設計關注篇
注意設計的基本原則:(蘋果呼吁的)



WWDC__Designing for iPhoneX 最終說明見上面的官方說明
二、讓App充滿屏幕
剛升級完GM版Xcode,興奮地build了一下手機管家

我們的_window依舊是使用[UIScreenmainScreen].bounds作為frame的,那問題出在哪呢?
關於我們用的[UIScreenmainScreen].bounds
敲黑板,划重點 ->看UIScreen的官方說明:

上文的 API說明 當中,意思大概可以通俗地理解為,我們所用的UIScreen的初始化是根據我們進入的第一個頁面去進行參數化的,也就是說,我們的啟動圖(補上1125 x 2436的圖)要換了。

如果你也跟我一樣一下子沒找到新建iPhoneX的入口.. 那就粗暴地刪掉重新新建了一個

像此類多張尺寸圖的Asset文件夾,我們往往還會進行一個操作,就是修改Content.json,令部分相同比例的尺寸共用同一個資源圖(直接拖進Asset會直接創建一個新文件的)。

補充List—— 一些官方必備要領的傳送門:
官方說明(https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/)
WWDC__Building Apps for iPhone X(https://developer.apple.com/videos/play/fall2017/201/)
-> 主要提及SafeArea的概念以及橫屏情況下的區域如何設計,還有TableView的SearchBar適配
三、整理一下發型
將舊版本App塞滿屏幕后,來到我們最關心的“劉海”問題了

見圖可知,我們默認的StatusBar在iPhoneX中也有了相對的調整,對於開發和布局設計(UI標注)也需要去注意這個問題。
另外,比較關注的是新交互方式下,底部的一些屏幕適配問題:
能想到的比較多的場景,就是底部的一些按鈕與“Home鍵”重合了,直接上調按鈕位置,按鈕底部View拉長亦可以解決這問題。
其中一個可能會有坑的點,iPhoneX的寬度與6s是一樣的,但使用的是@3x圖。所以在處理比例和插圖時,需要注意。這就意味着,我們用的一些通過比例對其切圖和布局的方法將會出現問題。

儼然,這時候需要手動適配的地方,也可以這樣操作掉。
避免影響原本的各機型代碼,通常這樣 :

設計師也需要注意的是,若要保持某種圖片的Size比例一致,@3x圖造成的變形也要進行對應比例的新切圖~~
當然,基於iOS 11推薦使用AutoLayout的設計思路,這里引入了SafeArea的概念以更好地補充完善此類適配問題。(注意使用接口需要iOS 11+系統,方法前請務必進行系統判斷)

SafeArea幫助我們將View設置在整個屏幕的可視化部分,即使把NavigationBar設置為透明的,系統也認為SafeArea是從NavigationBar的bottom開始的。
SafeArea可以確保可視區域不被系統的狀態欄、或俯視圖提供的View(如導航欄)覆蓋。此外還可以使用additionalSafeAreaInsets去擴展SafeArea,包括自定義的content在你的界面,ViewController同理,如下圖:

Listing 1文檔中具體示例代碼:

四、提一下關於測試的事
由於目前還沒有iPhoneX的設備,只能通過模擬器去測試,就涉及到模擬器安裝ipa包的問題了。
第1步,修改你的架構兼容設置BuildSetting -> Valid Architectures

第2步,重新編譯
第3步,取出.app文件,塞進Payload文件夾,打包 || 直接拖.app去模擬器

(其實這里打不打都可以,基於程序員的儀式感我才打的包)
第4步,測試同學手上有這個.app文件,輸入命令安裝到模擬器上
請開着iPhoneX再去跑這命令

由於手機管家的適應力有點強,沒有橫屏和一些布局的情況,所以很快地就完成了適配工作,剩下的調整就交給設計師完成了~
騰訊WeTest兼容性測試團隊積累了10年的手游測試經驗,旨在通過制定針對性的測試方案,精准選取目標機型,執行專業、完整的測試用例,來提前發現游戲版本的兼容性問題,針對性地做出修正和優化,來保障手游產品的質量。目前該團隊已經支持所有騰訊在研和運營的手游項目。
iPhone8/iPhoneX新機即將同步上線,歡迎進入:http://wetest.qq.com/product/expert-compatibility-testing 使用專家兼容測試服務。
WeTest兼容性測試團隊期待與您交流!You Create,We Test!
