隨著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