官方適配資料:https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
中文翻譯:
iPhone X
iPhone X包括一個(gè)大的敛腌、高分辨率的夯辖、圓角的、邊緣的顯示锦担,它提供了前所未有的沉浸式、內(nèi)容豐富的體驗(yàn)耗溜。
Screen Size
在豎屏中丹诀,iPhone X顯示的寬度與iPhone 6、iPhone 7和iPhone 8的屏幕寬度一致专筷。然而,在iPhone X上的顯示比4.7英寸的顯示高145pt蒸苇,這使得內(nèi)容的垂直空間增加了大約20%。
為你的應(yīng)用程序提供高分辨率的圖像吮旅,iPhone X有一個(gè)高分辨率的顯示溪烤,它的比例因子為@3x。對(duì)于象形文字和其他平面的矢量圖庇勃,最好提供獨(dú)立于分辨率的pdf文件檬嘀。對(duì)于光柵化的藝術(shù)作品,可以提供你的藝術(shù)作品的@3x和@2x版本责嚷。See Image Size and Resolution and Custom Icons鸳兽。
Layout
在設(shè)計(jì)iPhone X時(shí),你必須確保布局填充屏幕罕拂,而不是被設(shè)備的圓角揍异、傳感器外殼或訪問(wèn)主屏幕的指示器所掩蓋全陨。
大多數(shù)使用標(biāo)準(zhǔn)的、系統(tǒng)提供的UI元素的應(yīng)用衷掷,如導(dǎo)航欄辱姨、表格和集合,都會(huì)自動(dòng)適應(yīng)設(shè)備的新形式因素戚嗅。背景材料擴(kuò)展到顯示的邊緣,UI元素被適當(dāng)?shù)卦O(shè)置和定位。
對(duì)于有自定義布局的應(yīng)用隘击,支持iPhone X也應(yīng)該相對(duì)容易脊串,特別是如果你的應(yīng)用使用自動(dòng)布局,并堅(jiān)持安全區(qū)域和邊緣布局指南躏尉。
在iPhone X上預(yù)覽你的應(yīng)用程序蚯根,你可以使用模擬器(包括Xcode)預(yù)覽你的應(yīng)用程序,檢查剪切和其他布局問(wèn)題醇份。一些功能稼锅,比如寬彩色圖像,在實(shí)際的設(shè)備上是最好的預(yù)覽僚纷。
提供全屏體驗(yàn)矩距。確保背景擴(kuò)展到顯示的邊緣,并且垂直滾動(dòng)的布局怖竭,如表和集合锥债,一直持續(xù)到底部。
設(shè)置必要的內(nèi)容以防止剪斷痊臭。一般來(lái)說(shuō)哮肚,內(nèi)容應(yīng)該是居中和對(duì)稱的,這樣它在任何方向上看起來(lái)都很好广匙,不會(huì)被彎角或設(shè)備的傳感器外殼所夾住允趟,也不會(huì)被用來(lái)訪問(wèn)主屏幕的指示器所掩蓋。為了獲得最好的結(jié)果鸦致,使用標(biāo)準(zhǔn)的潮剪、系統(tǒng)提供的接口元素和自動(dòng)布局來(lái)構(gòu)造您的接口。所有的應(yīng)用程序都應(yīng)該遵循UIKit定義的安全區(qū)域和布局邊界分唾,這確保了基于設(shè)備和上下文的適當(dāng)?shù)膇n設(shè)置抗碰。安全區(qū)域還可以防止內(nèi)容對(duì)狀態(tài)欄、導(dǎo)航條绽乔、工具欄和標(biāo)簽欄的影響弧蝇。
注意狀態(tài)欄的高度。在iPhone X上,狀態(tài)欄比其他iPhone要高看疗。如果你的應(yīng)用在狀態(tài)欄下的位置設(shè)置了一個(gè)固定的狀態(tài)欄高度沙峻,那么你必須更新你的應(yīng)用,以根據(jù)用戶的設(shè)備動(dòng)態(tài)定位內(nèi)容鹃觉。請(qǐng)注意专酗,iPhone X的狀態(tài)欄不會(huì)改變高度,因?yàn)檎Z(yǔ)音記錄和位置跟蹤等后臺(tái)任務(wù)是活躍的盗扇。
如果你的應(yīng)用目前隱藏狀態(tài)欄祷肯,重新考慮iPhone X的決定,iPhone的顯示高度為內(nèi)容提供了更多的垂直空間疗隶,而不是顯示4.7英寸的iPhone佑笋,而狀態(tài)欄占據(jù)了屏幕的一塊區(qū)域,你的應(yīng)用可能無(wú)法充分利用斑鼻。狀態(tài)欄還顯示了人們認(rèn)為有用的信息蒋纬。它只應(yīng)該被隱藏起來(lái)以換取額外的價(jià)值。
在重用現(xiàn)有的藝術(shù)品時(shí)坚弱,要注意縱橫比的差異蜀备。iPhone X的縱橫比為4.7英寸。因此荒叶,全屏幕4.7“iPhone的藝術(shù)作品在iPhone X屏幕上顯示全屏幕時(shí)碾阁,會(huì)出現(xiàn)裁剪或凸版。同樣的些楣,全屏的iPhone X藝術(shù)作品也會(huì)在4.7英寸的iPhone上顯示全屏幕時(shí)出現(xiàn)脂凶。確保重要的視覺內(nèi)容在顯示大小上都保持在視圖中。
避免在屏幕的底部和角落里顯式地放置交互控件愁茁。人們?cè)谄聊坏牡撞渴褂没瑒?dòng)手勢(shì)來(lái)訪問(wèn)主屏幕和應(yīng)用切換器蚕钦,這些手勢(shì)可能會(huì)取消你在這個(gè)區(qū)域?qū)崿F(xiàn)的自定義手勢(shì)。屏幕的遠(yuǎn)角可能是讓人們舒服地接觸的困難區(qū)域鹅很。
不要對(duì)關(guān)鍵的顯示功能進(jìn)行屏蔽或特別注意嘶居。不要試圖隱藏設(shè)備的圓角,傳感器外殼促煮,或者通過(guò)在屏幕的頂部和底部放置黑條來(lái)訪問(wèn)主屏幕的指示食听。不要使用像括號(hào)、邊框污茵、形狀或教學(xué)文字這樣的視覺裝飾來(lái)特別注意這些區(qū)域。
允許自動(dòng)隱藏指示器葬项,以節(jié)省訪問(wèn)主屏幕的功能泞当。當(dāng)啟用自動(dòng)隱藏功能時(shí),如果用戶沒有在屏幕上進(jìn)行幾秒鐘的操作民珍,指示器就會(huì)淡出襟士。當(dāng)用戶再次觸摸屏幕時(shí)盗飒,它會(huì)重新出現(xiàn)。這種行為應(yīng)該只被用于被動(dòng)的觀看體驗(yàn)陋桂,比如播放視頻或照片幻燈片逆趣。
See Adaptivity and Layout.
Color
iPhone X的顯示屏支持P3色空間,它可以比sRGB生成更豐富嗜历、更飽和的顏色宣渗。
使用廣泛的顏色來(lái)增強(qiáng)視覺體驗(yàn)。使用廣泛顏色的照片和視頻更逼真梨州,使用廣泛色彩的視覺數(shù)據(jù)和狀態(tài)指標(biāo)更有影響力痕囱。
See Color Management.
Gestures
iPhone X的顯示屏使用屏幕邊緣手勢(shì)來(lái)提供對(duì)主屏幕、應(yīng)用切換器暴匠、通知中心和控制中心的訪問(wèn)鞍恢。
避免干擾系統(tǒng)的屏幕邊緣手勢(shì)。在每一款應(yīng)用中每窖,人們都依賴這些手勢(shì)進(jìn)行操作帮掉。在極少數(shù)情況下,像游戲這樣的沉浸式應(yīng)用可能需要定制的屏幕邊緣手勢(shì)窒典,這些手勢(shì)優(yōu)先于系統(tǒng)的手勢(shì)操作——第一次滑動(dòng)就會(huì)調(diào)用特定于應(yīng)用的手勢(shì)蟆炊,而第二滑動(dòng)則會(huì)調(diào)用系統(tǒng)手勢(shì)。這種行為(稱為edge保護(hù))應(yīng)該謹(jǐn)慎地實(shí)現(xiàn)崇败,因?yàn)樗谷藗兏y訪問(wèn)系統(tǒng)級(jí)的操作盅称。
Additional Design Considerations
引用準(zhǔn)確身份驗(yàn)證方法。iPhone X支持身份驗(yàn)證后室。如果你的應(yīng)用集成了Apple Pay或其他系統(tǒng)認(rèn)證功能缩膝,不要在iPhone x上引用Touch ID。同樣岸霹,確保你的應(yīng)用不會(huì)在支持Touch ID的設(shè)備上使用人臉I(yè)D疾层。
不要復(fù)制系統(tǒng)提供的鍵盤特性。在iPhone X上贡避,當(dāng)使用自定義鍵盤時(shí)痛黎,表情/地球按鈕和聽寫按鈕會(huì)自動(dòng)出現(xiàn)在鍵盤下方。你的應(yīng)用程序不能影響這些按鈕刮吧,因此避免在鍵盤上重復(fù)它們?cè)斐苫靵y湖饱。See Custom Keyboards.
Resources
下載用于Photoshop的iPhone X UI設(shè)計(jì)模板和資源的草圖。Resources.
事例:
版本判斷API
iOS11 版本判斷
if (@available(iOS 11.0, *)) {
// 版本適配
}
// 或者
#ifdef __IPHONE_11_0
#endif
目前沒發(fā)現(xiàn)有iPhoneX的機(jī)型判斷代碼杀捻,目前可以使用size來(lái)做代替判斷井厌。
if (UIScreen.mainScreen.bounds.size.height == 812) {
NSLog(@"this is iPhone X");
}
1,針對(duì) iPhoneX啟動(dòng)圖 適配(iPhone X 屏幕上下有黑道,沒有沾滿全屏)
如果之前的APP在iPhoneX屏幕沒填充滿仅仆,上下有黑色區(qū)域器赞,應(yīng)該是你的app之前未用LaunchScreen.Storyboard作為啟動(dòng)頁(yè)面,可以使用LaunchScreen來(lái)當(dāng)做入場(chǎng)頁(yè)面墓拜,這樣APP才會(huì)自動(dòng)適配為iPhoneX的大小港柜。或者修改Assets中的LaunchImage咳榜,添加iPhoneX的尺寸圖如下(1125*2436)夏醉。
2. iOS11 安全區(qū)域 適配
iPhone X 取消了 Home鍵,實(shí)現(xiàn)了高屏占比贿衍。
所以默認(rèn) View 的區(qū)域是全屏幕
屏幕四周有圓角授舟、頂部有“劉海”贸辈、底部有手勢(shì)區(qū)域
導(dǎo)航欄高度是 44 + 44
安全區(qū)域: 頂部從44 到距離底部34 為安全區(qū)域
Safe Area 如下圖 (紅色區(qū)域)
iOS11 以前释树,我們布局時(shí),視圖的 top 和 bottom 一般參照的是Top Layout Guide和Bottom Layout Guide
iOS11 以后擎淤,那兩個(gè)參照已經(jīng)deprecated(過(guò)時(shí))了奢啥,而被Safe Area取代。
Safe Area要求最低支持iOS9.0 以此來(lái)解決下圖問(wèn)題
3. UIScrollView & UITableView
測(cè)試過(guò)程中發(fā)現(xiàn)tableView會(huì)有20pt/64pt的偏移嘴拢,其原因是由于iOS 11廢棄了UIViewController的automaticallyAdjustsScrollViewInsets屬性桩盲,新增了contentInsetAdjustmentBehavior屬性,所以當(dāng)超出安全區(qū)域時(shí)系統(tǒng)自動(dòng)調(diào)整了SafeAreaInsets席吴,進(jìn)而影響了adjustedContentInset赌结,在iOS 11中決定tableView 內(nèi)容與邊緣距離的是adjustedContentInset,所以需要設(shè)置UIScrollView的contentInsetAdjustmentBehavior屬性孝冒。
可以直接使用以下代碼做適配:
if (@available(iOS 11.0, *)) {
self.tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
} else {
self.automaticallyAdjustsScrollViewInsets = NO;
}
4. UIVisualEffectView
ios11中不能直接在UIVisualEffectView上addView了,必須在他的contentView上add才行,否則會(huì)cash
5. 相冊(cè)訪問(wèn)權(quán)限
iOS11下柬姚,蘋果對(duì)相冊(cè)的權(quán)限key做了調(diào)整,原來(lái)的 NSPhotoLibraryUsageDescription 庄涡,在iOS11之后量承,改成了NSPhotoLibraryAddUsageDescription。詳見:Cocoa Keys