【IOS】iPhone X,IOS11 適配,持續(xù)更新

官方適配資料:https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

中文翻譯:

iPhone X

iPhone X包括一個(gè)大的敛腌、高分辨率的夯辖、圓角的、邊緣的顯示锦担,它提供了前所未有的沉浸式、內(nèi)容豐富的體驗(yàn)耗溜。


0969DB5B-8BF4-4689-A4CD-E571D66F7136.png

Screen Size

在豎屏中丹诀,iPhone X顯示的寬度與iPhone 6、iPhone 7和iPhone 8的屏幕寬度一致专筷。然而,在iPhone X上的顯示比4.7英寸的顯示高145pt蒸苇,這使得內(nèi)容的垂直空間增加了大約20%。


3250A723-E71C-45ED-8B24-C0DFEA6B2556.png

為你的應(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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末穴店,一起剝皮案震驚了整個(gè)濱河市撕捍,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌泣洞,老刑警劉巖忧风,帶你破解...
    沈念sama閱讀 206,839評(píng)論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異球凰,居然都是意外死亡阀蒂,警方通過(guò)查閱死者的電腦和手機(jī)该窗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蚤霞,“玉大人,你說(shuō)我怎么就攤上這事义钉∶列澹” “怎么了?”我有些...
    開封第一講書人閱讀 153,116評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵捶闸,是天一觀的道長(zhǎng)夜畴。 經(jīng)常有香客問(wèn)我,道長(zhǎng)删壮,這世上最難降的妖魔是什么贪绘? 我笑而不...
    開封第一講書人閱讀 55,371評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮央碟,結(jié)果婚禮上税灌,老公的妹妹穿的比我還像新娘。我一直安慰自己亿虽,他們只是感情好菱涤,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,384評(píng)論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著洛勉,像睡著了一般粘秆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上收毫,一...
    開封第一講書人閱讀 49,111評(píng)論 1 285
  • 那天攻走,我揣著相機(jī)與錄音,去河邊找鬼此再。 笑死昔搂,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的引润。 我是一名探鬼主播巩趁,決...
    沈念sama閱讀 38,416評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼淳附!你這毒婦竟也來(lái)了议慰?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,053評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤奴曙,失蹤者是張志新(化名)和其女友劉穎别凹,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體洽糟,經(jīng)...
    沈念sama閱讀 43,558評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡炉菲,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,007評(píng)論 2 325
  • 正文 我和宋清朗相戀三年堕战,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拍霜。...
    茶點(diǎn)故事閱讀 38,117評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡嘱丢,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出祠饺,到底是詐尸還是另有隱情越驻,我是刑警寧澤,帶...
    沈念sama閱讀 33,756評(píng)論 4 324
  • 正文 年R本政府宣布道偷,位于F島的核電站缀旁,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏勺鸦。R本人自食惡果不足惜并巍,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,324評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望换途。 院中可真熱鬧懊渡,春花似錦、人聲如沸怀跛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)吻谋。三九已至忠蝗,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間漓拾,已是汗流浹背阁最。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留骇两,地道東北人速种。 一個(gè)月前我還...
    沈念sama閱讀 45,578評(píng)論 2 355
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像低千,于是被迫代替她去往敵國(guó)和親配阵。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,877評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容