iOS開發(fā) iPhone X適配

隨著iPhoneX的發(fā)布,適配問題也隨之而來

我們先在最前面說一下適配的中心思想:

1、X上的狀態(tài)欄從20pt變成了44pt鹉勒,并且中間有個(gè)劉海似的隔檔别惦,在一些app中如果是隱藏狀態(tài)欄時(shí)需要注意這塊不要被擋住了。
2制圈、X的下面有一塊34pt的home indicator,比如一些頁面下面有button或者其他交互式控件的盡量上移34pt,把這塊空出來淹接,這樣不會(huì)產(chǎn)生沖突。
3叛溢、X的高度增加了145pt塑悼,變成了812pt。
4楷掉、X的四周是圓角顯示厢蒜,在設(shè)計(jì)頁面的時(shí)候左右要留出來10pt的邊距。
5烹植、物理分辨率為1125 * 2436,這個(gè)分辨率對(duì)于我們開發(fā)者最直接的影響是要在啟動(dòng)圖中添加一個(gè)1125 * 2436的為X準(zhǔn)備的啟動(dòng)圖斑鸦,否則會(huì)發(fā)生運(yùn)行項(xiàng)目后上下都會(huì)有一個(gè)黑邊的問題,我的項(xiàng)目里用的是LaunchImage草雕,那么就需要點(diǎn)擊LaunchImage巷屿,然后如圖點(diǎn)擊。
為X設(shè)置啟動(dòng)圖.jpg
這時(shí)就在新出現(xiàn)的地方墩虹,添加一張1125*2436分辨率的圖片就好了嘱巾。

首先把xcode升級(jí)到最新版,官方給出的適配建議是采用safeArea的策略败晴。
那我們來說說safeArea到底是什么浓冒?

之前進(jìn)行過xib和storyboard開發(fā)的朋友們可能對(duì)AutoLayout的Top Layout Guide和Bottom Layout Guide的適配方式并不陌生,現(xiàn)在蘋果要用safeArea來取代top和bottom的方式尖坤,但是safeArea需要iOS9以上才能用稳懒,所以如果想用這個(gè)就只能把Deployment Target改成9以上了。
X上的safeArea區(qū)域.jpg
除了X以外設(shè)備的safeArea區(qū)域.jpg
在圖中我們可以看出來所謂的安全區(qū)域safeArea就是X上面活動(dòng)最安全的區(qū)域,上面既不會(huì)被擋住场梆,下面也不會(huì)和homeIndicator起沖突墅冷。作為開發(fā)者來說在這個(gè)區(qū)域開發(fā)肯定沒問題。
要想使用safeArea或油,首先打開storyboard或者xib寞忿,選中左側(cè)的某個(gè)頁面,然后如圖
safeArea使用步驟.jpg
選中上圖的這個(gè)顶岸,你會(huì)發(fā)現(xiàn)之前約束的帶有top腔彰,bottom的全部變成了safeArea,缺點(diǎn)就是需要iOS9的限制辖佣,優(yōu)點(diǎn)也是很突出的霹抛,方便,把之前的機(jī)型和X統(tǒng)一到了一起卷谈。

我項(xiàng)目里的適配解決方法:

因?yàn)樽约喉?xiàng)目里要兼容iOS8.0以上杯拐,所以放棄了safeArea的方法。再加上本來項(xiàng)目就是代碼和storyboard混合開發(fā)世蔗,所以想著在代碼中動(dòng)態(tài)改動(dòng)布局也是可以的吧端逼,即使這樣比較麻煩,需要在每個(gè)X和其他機(jī)型不一樣的地方分別處理污淋。如果各位有比較好的想法歡迎指出顶滩。嘻嘻。
核心代碼就是:
 if ([UIScreen mainScreen].bounds.size.height == 812) {
            make.bottom.equalTo(weakSelf.view).offset(-34);
        }else{
            make.bottom.equalTo(weakSelf.view);
        }
判斷當(dāng)前的機(jī)型是不是X芙沥,是的話采用新UI布局诲祸,不是繼續(xù)沿用以前的。記住如果橫屏的時(shí)候就是寬度為812了而昨,雖說這樣看起來有點(diǎn)騷操作救氯,但目前能想到的只有這樣了。

項(xiàng)目里的原生控件基本都由apple官方適配好了歌憨,我們不需要處理着憨,比如navigationBar和tabBar等等。
最后上幾張適配好的圖片對(duì)比务嫡。

Simulator Screen Shot - iPhone 6 - 2017-09-27 at 16.36.46.png
Simulator Screen Shot - iPhone X - 2017-09-27 at 16.37.01.png
Simulator Screen Shot - iPhone 6 - 2017-09-27 at 16.37.19.png
Simulator Screen Shot - iPhone X - 2017-09-27 at 16.37.28.png
Simulator Screen Shot - iPhone 6 - 2017-09-27 at 16.37.35.png
Simulator Screen Shot - iPhone X - 2017-09-27 at 16.37.44.png
Simulator Screen Shot - iPhone 6 - 2017-09-27 at 16.38.38.png
Simulator Screen Shot - iPhone X - 2017-09-27 at 16.39.05.png
Simulator Screen Shot - iPhone X - 2017-09-27 at 16.40.36.png
Simulator Screen Shot - iPhone 6 - 2017-09-27 at 16.40.58.png

2018-3-8新增:

由于很長(zhǎng)時(shí)間沒有接觸適配的工作甲抖,在今天重新研究了下safeArea,發(fā)現(xiàn)因?yàn)橹绊?xiàng)目中大多數(shù)是storyboard或xib布局的心铃,如果最低版本兼容到8.0准谚,在safeArea上點(diǎn)勾會(huì)報(bào)錯(cuò)。但是可以在storyboard或xib中不做改動(dòng)去扣,而在代碼中進(jìn)行系統(tǒng)判斷柱衔,如果iOS>11則用safeArea進(jìn)行適配否則,反之則用AutoLayout,是可以的唆铐。具體方法在這里就不說了哲戚,因?yàn)?a target="_blank" rel="nofollow">Masonry已經(jīng)進(jìn)行好了iPhone X的適配,使用方法依然很簡(jiǎn)單艾岂,如果只是單純的為了適配顺少,大家還是用Masonry這個(gè)大輪子吧,可以到官方看文檔來查看使用方法王浴。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末脆炎,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子氓辣,更是在濱河造成了極大的恐慌腕窥,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,284評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件筛婉,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡癞松,警方通過查閱死者的電腦和手機(jī)爽撒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來响蓉,“玉大人硕勿,你說我怎么就攤上這事》慵祝” “怎么了源武?”我有些...
    開封第一講書人閱讀 164,614評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)想幻。 經(jīng)常有香客問我粱栖,道長(zhǎng),這世上最難降的妖魔是什么脏毯? 我笑而不...
    開封第一講書人閱讀 58,671評(píng)論 1 293
  • 正文 為了忘掉前任闹究,我火速辦了婚禮,結(jié)果婚禮上食店,老公的妹妹穿的比我還像新娘渣淤。我一直安慰自己,他們只是感情好吉嫩,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,699評(píng)論 6 392
  • 文/花漫 我一把揭開白布价认。 她就那樣靜靜地躺著,像睡著了一般自娩。 火紅的嫁衣襯著肌膚如雪用踩。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,562評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音捶箱,去河邊找鬼智什。 笑死,一個(gè)胖子當(dāng)著我的面吹牛丁屎,可吹牛的內(nèi)容都是我干的荠锭。 我是一名探鬼主播,決...
    沈念sama閱讀 40,309評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼晨川,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼证九!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起共虑,我...
    開封第一講書人閱讀 39,223評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤愧怜,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后妈拌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拥坛,經(jīng)...
    沈念sama閱讀 45,668評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,859評(píng)論 3 336
  • 正文 我和宋清朗相戀三年尘分,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了猜惋。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,981評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡培愁,死狀恐怖著摔,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情定续,我是刑警寧澤谍咆,帶...
    沈念sama閱讀 35,705評(píng)論 5 347
  • 正文 年R本政府宣布,位于F島的核電站私股,受9級(jí)特大地震影響摹察,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜庇茫,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,310評(píng)論 3 330
  • 文/蒙蒙 一港粱、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧旦签,春花似錦查坪、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至羔巢,卻和暖如春望忆,著一層夾襖步出監(jiān)牢的瞬間罩阵,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評(píng)論 1 270
  • 我被黑心中介騙來泰國(guó)打工启摄, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留稿壁,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,146評(píng)論 3 370
  • 正文 我出身青樓歉备,卻偏偏與公主長(zhǎng)得像傅是,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子蕾羊,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,933評(píng)論 2 355

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