每年蘋果爸爸都會(huì)在六月份的WWDC上發(fā)布有關(guān)下一代iOS的新特性和改動(dòng)內(nèi)容，開發(fā)者們有半年時(shí)間去準(zhǔn)備和兼容最新版本的iPhone和操作系統(tǒng)。

但是這一次為了在發(fā)布會(huì)前不泄露iPhone X的相關(guān)信息（實(shí)際上我們?cè)缇椭�道�?。=），蘋果直到前幾天才在官網(wǎng)上線了兼容全面屏的指導(dǎo)文檔和視頻。離iPhone X正式上市還有兩個(gè)月不到的時(shí)間，我們需要為我們的app做哪些準(zhǔn)備呢？

屏幕

我們?cè)诰幋a中使用的是以 point 為單位的屏幕尺寸（在不同設(shè)備上每個(gè)point對(duì)應(yīng)的實(shí)際像素點(diǎn)是不一樣的），iPhone 8的尺寸是 375pt × 667pt @2x ，iPhone X的尺寸是 375pt × 812pt @3x ，也就是屏幕寬度是一樣的，但是高出了145pt，大概能多顯示20%的內(nèi)容。

屏幕

注意iPhone X的屏幕素質(zhì)比較好，所以它需要加載較高像素的圖片，我們要提供必要的@3x資源。

另外由于iPhone X極高的長(zhǎng)寬比，我們用作背景的圖片都需要重新設(shè)計(jì)，以保證比例適合，內(nèi)容被裁切后效果仍然ok。

屏幕

status bar

iPhone X的狀態(tài)欄高度是高于之前所有的iPhone版本的，所以在代碼里寫死 kStatusBarHeight == 20 的地方 都會(huì)出錯(cuò) ！

劉海變高

也就是說(shuō)，之前使用固定狀態(tài)欄高度來(lái)進(jìn)行布局的代碼都需要調(diào)整為動(dòng)態(tài)布局方式，否則會(huì)出現(xiàn)內(nèi)容被遮擋的問題。特別是圖中這個(gè)64，一直在iOS開發(fā)中常數(shù)般的存在，最后也被蘋果爸爸?jǐn)[了一道。

此處不能寫死

關(guān)于狀態(tài)欄另外兩個(gè)需要注意的地方：

• 不要在iPhone X下隱藏狀態(tài)欄，一個(gè)原因是顯示內(nèi)容足夠高了，另一個(gè)是這樣內(nèi)容會(huì)被劉海切割。

• 現(xiàn)在通話或者其它狀態(tài)下，狀態(tài)欄高度不會(huì)變化了，程序不需要去做兼容。

高度不變

布局

iPhone X的布局有很多改變，這是因?yàn)椋?/p>

• 劉海的存在使橫屏的情況變得復(fù)雜

• 四個(gè)角變圓，需要防止內(nèi)容被切割

• 代替home鍵的長(zhǎng)條（不知道官方名字叫什么， homeBar ？）使得屏幕底部的布局需要調(diào)整

很多系統(tǒng)經(jīng)典的控件，比如TableView，Collection，Navigation，TabBar等都會(huì)自動(dòng)適應(yīng)iPhone X（呵呵，一定會(huì)有很多坑等著打補(bǔ)丁或者讓開發(fā)者擦屁股）。

Safe Area

iOS11引入了 safeArea 的概念，用來(lái)替代之前的 topLayoutGuide 和 bottomLayoutGuide ，safeArea用來(lái)描述視圖不被任何內(nèi)容遮擋的部分。它提供兩種方式： safeAreaInsets 或 safeAreaLayoutGuide 來(lái)提供給你safeArea的參照值。

safeArea

在iPhone X上，視圖的默認(rèn)safeArea如下圖所示：

safeArea2

可以看到，底部的Bar還有四周圓角，都對(duì)這個(gè)safeArea進(jìn)行了切割。蘋果官方的設(shè)計(jì)指導(dǎo)是使用 以safeArea為框 ， 以layoutMargin為間距 來(lái)進(jìn)行UI布局。

橫屏

在橫屏狀態(tài)下，不能因?yàn)閯⒑５脑�因�(qū)��?nèi)容向左或者向右便宜，要保證內(nèi)容的中心對(duì)稱：

center

center2

另外，之前所有版本的iPhone tableView的cell和它的contentView的大小是相同的，開發(fā)者相對(duì)cell布局和相對(duì)contentView布局效果上不會(huì)有太大區(qū)別。

但是在iPhone X下，由于劉海和圓角的存在，tableView的contentView會(huì)被裁切，所以所有的布局都應(yīng)該被調(diào)整為相對(duì)contentView布局，否則會(huì)越界:

tableView

一致性

蘋果對(duì)iOS中運(yùn)行的app的一致性有很高的要求，在iPhone X下，開發(fā)者不能自己去遮蓋圓角、狀態(tài)欄，特別是底部的homeBar，即使你認(rèn)為劉海很丑，也許用戶看著看著就習(xí)慣了呢……

關(guān)于homeBar，它的顏色是會(huì)自動(dòng)適應(yīng)的，保持著『時(shí)刻能找到但是又不那么顯眼』的狀態(tài)，所以開發(fā)者不用去為它費(fèi)心添加背景啊，強(qiáng)調(diào)啊啥的，蘋果爸爸會(huì)十分感動(dòng)然后拒絕掉你的……

交互

在交互方面，iPhone X最大的改變就是底部那個(gè)無(wú)時(shí)無(wú)刻不存在的 homeBar 了，代替了原來(lái)home按鍵的功能，系統(tǒng)級(jí)的任務(wù)切換和回到桌面 、、，都是上滑這個(gè)細(xì)細(xì)的長(zhǎng)條。

homeBar

所以蘋果爸爸的意思是：

趕緊把你自己寫的上滑手勢(shì) 乖乖刪掉~

當(dāng)然如果app確實(shí)需要這個(gè)手勢(shì)，可以打開程序開關(guān)覆蓋系統(tǒng)的手勢(shì)，但是這樣用戶就需要滑動(dòng)兩次來(lái)回到桌面了，這會(huì)讓他們非常懷念home鍵。

兼容

首先是iPhone X下的鍵盤和其他系統(tǒng)有區(qū)別，會(huì)多出來(lái)那個(gè)很有趣的animateEmoji工具欄，所以在做鍵盤相關(guān)處理的時(shí)候要關(guān)注兼容性問題，至少：高度不要寫死了……

iPhone X的認(rèn)證使用的是全新的faceId，所以如果app需要使用認(rèn)證相關(guān)api，需要根據(jù)設(shè)備區(qū)分touchId和faceId，可以看 文檔 。

認(rèn)證

 

來(lái)自：http://www.cocoachina.com/ios/20170920/20608.html

 

標(biāo)簽： 代碼 開發(fā)者

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。