手機管家iPhoneX的適配總結

WeTest 導讀

隨着蘋果發佈會的結束，Xcode的GM版也上線了，也意味着iPhoneX適配之旅的開始。

---

1、設計關注篇

注意設計的基本原則：（蘋果呼籲的）

 

 

規格原帖：https://developer.apple.com/library/content/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html

WWDC__Designing for iPhoneX  最終說明見上面的官方說明

 

2、讓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適配

 

3、整理一下發型

將舊版本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文檔中具體示例代碼:

 

關於SafeArea的原文：https://developer.apple.com/documentation/uikit/uiview/positioning_content_relative_to_the_safe_area

 

4、提一下關於測試的事

因爲目前尚未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！