iOS 11 和 iPhoneX適配

前言:

剛更新了iOS 11和Xcode 9,試了下iPhone X模擬器上跑公司的項(xiàng)目搞监,發(fā)現(xiàn)項(xiàng)目在iPhone X這個(gè)大長臉上運(yùn)行還存在很多適配問題仁连。所以寫此文章記錄自己在適配iPhone X時(shí)所遇到的問題,也希望能幫助到需要幫助的同學(xué)們昌罩。如有問題也希望大家提出來哭懈,共同探討,共同進(jìn)步茎用。

關(guān)于iPhone X

北京時(shí)間的9月13日凌晨遣总,美國當(dāng)?shù)貢r(shí)間的9月12日上午,蘋果在發(fā)布會(huì)上發(fā)布了四款產(chǎn)品轨功,包括全新的Apple Watch Series 3旭斥,Apple TV 4K,iPhone 8/8 Plus古涧,和全新iPhone X四款全新產(chǎn)品垂券。其中X是數(shù)字10的意思,因此蘋果將其讀音讀作“iPhone Ten”蒿褂。
應(yīng)為有設(shè)備的圓角圆米,傳感器區(qū)域(劉海),或用于訪問主屏幕的指示器(Home Indicator)原因啄栓,從iOS 11.0引入了UIView的safeArea(安全區(qū))的概念娄帖,同時(shí)廢除了iOS 7 開始在 UIViewController中引入的 topLayoutGuide和 bottomLayoutGuide

safeArea區(qū)域.png
名稱 iPhone X iPhone 6s
屏幕 375pt × 812pt 375 pt × 667 pt
Tabbar 83pt 49pt
StatusBar 44pt 20pt
Navigation 44pt 44pt
  • 尺寸:1125px × 2436px(375pt × 812pt @3x)
  • Tabbar:由49pt變?yōu)榱?3pt (加上底部留給Home Indicator的空白部分)。
  • StatusBar:由20pt變?yōu)?4pt
  • Navigation:還是44pt

iPhone X 蘋果官方人機(jī)交互指南
iPhone X 蘋果官方人機(jī)交互指南 手動(dòng)翻譯(由博客名:我的杯洗具翻譯的)

項(xiàng)目中遇到的適配問題:

一昙楚、動(dòng)態(tài)計(jì)算statusbar + navigationBar高度

開發(fā)中我們需要知道statusbar 和 navigationBar高度用于計(jì)算界面中控件的位置近速,但是由于iPhone X有個(gè)大劉海使得statusbar的高度不同于之前的機(jī)型。這時(shí)候如果項(xiàng)目中的計(jì)算值是寫死話堪旧,就會(huì)出現(xiàn)適配問題削葱。解決辦法是動(dòng)態(tài)計(jì)算來適配不同的機(jī)型

    // 狀態(tài)欄(statusbar)
    CGRect StatusRect = [[UIApplication sharedApplication] statusBarFrame];
    //標(biāo)題欄
    CGRect NavRect = self.navigationController.navigationBar.frame;
    CGFloat y = StatusRect.size.height + NavRect.size.height;
二、MJRefresh的footer出現(xiàn)在Home Indicator位置上

(此方法只適合navigationController為不透明狀態(tài)下)

MJRefresh的footer出現(xiàn)在Home Indicator位置上.png

這是應(yīng)為iOS11棄用了automaticallyAdjustsScrollViewInsets屬性淳梦,新增contentInsetAdjustmentBehavior來替代它析砸。就是iOS11會(huì)自動(dòng)限制CollectionView的底部不會(huì)超出安全區(qū)范圍,不想系統(tǒng)幫我們自動(dòng)設(shè)置邊距則要在iOS11中加上下面這句

 if (@available(iOS 11.0, *)) {
        self.myCollectionView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
    } else {
        // Fallback on earlier versions
    }

但是這時(shí)候就會(huì)出現(xiàn)我們的CollectionView內(nèi)容會(huì)超出安全區(qū)和Home Indicator重疊爆袍,這樣最底下的cell兩邊就會(huì)被屏幕圓角切掉一部分首繁,影響用戶體驗(yàn)作郭。我的解決辦法是給collectionView加上一個(gè)34pt高的footer

UICollectionView:
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
//這里省略其他屬性配置......
//......
if (iPhoneX) {
    flowLayout.footerReferenceSize = CGSizeMake(SCREEN_WIDTH, 34);
  }
self.myCollectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];
UITableView:
 if (iPhoneX) {
    self.myTableView.tableFooterView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 0, 34)];
    //注意:如果UITableViewStyle = UITableViewStyleGrouped 時(shí),這樣設(shè)置會(huì)導(dǎo)致tableHeaderView也有34的高度
 }

或者

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{
    if (self.myTableDataSourceArray.count - 1 == section && iPhoneX) {
        return 34;
    }
    return 0.0001;
}

注:iPhoneX是判斷機(jī)型的宏:#define iPhoneX ([UIScreen mainScreen].bounds.size.height == 812.0)
SCREEN_WIDTH是屏幕寬宏:#define SCREEN_WIDTH [[UIScreen mainScreen] bounds].size.width

修改完成后.png
三弦疮、Tableview分區(qū)頭高度 和 動(dòng)畫異常問題

參考《你可能需要為你的APP適配iOS11》第三部分-UIScrollView and UITableView的新特性

    self.myTableView.estimatedRowHeight = 0;
    self.myTableView.estimatedSectionHeaderHeight = 0;
    self.myTableView.estimatedSectionFooterHeight = 0;
四夹攒、界面布局超出safeArea(安全區(qū))內(nèi)容被指示器蓋住

內(nèi)容被指示器蓋住.png

Xib等可視界面布局:
由于iPhone X底部有圓角和指示器的原因,之前項(xiàng)目布局在底部的控件會(huì)被指示器遮擋或被圓角切掉一部分胁塞。有時(shí)候界面布局比較緊湊或?yàn)榱嗣烙^咏尝,為了滿足在iPhone X下不被遮擋而在其它機(jī)型上又還是位置不變,這時(shí)候safeArea就起作用了啸罢,可以勾選Xib的Safe Area屬性

勾選Xib的Safe Area屬性.png

勾選了Safe Area屬性你就會(huì)發(fā)現(xiàn)左邊多了個(gè)Safe Area编检,這時(shí)候你需要重新約束一下被遮擋的控件,約束的參照對(duì)象應(yīng)該是Safe Area伺糠,這樣新的約束就會(huì)根據(jù)Safe Area的變化而改變位置蒙谓,不會(huì)出現(xiàn)內(nèi)容被指示器蓋住的問題了。

不同機(jī)型時(shí)Safe Area的變化.png

約束的參照對(duì)象應(yīng)該是Safe Area.png

但是有一點(diǎn)需要注意训桶,就是必須是Builds for iOS9.0 及以上的版本,不然勾選了就會(huì)報(bào)Safe Area Layout Guide before ios9.0錯(cuò)誤酣倾。如果你要適配低于9.0的版本舵揭,那只能使用代碼布局或另尋其它辦法了。

代碼布局:
iOS11為UIViewController和UIView增加了兩個(gè)新的屬性safeAreaInsets和safeAreaLayoutGuide, 通過這兩個(gè)屬性我們可以獲得安全區(qū)域的范圍躁锡。

//獲取某View安全區(qū)域范圍的宏
#define VIEWSAFEAREAINSETS(view) ({UIEdgeInsets i; if(@available(iOS 11.0, *)) {i = view.safeAreaInsets;} else {i = UIEdgeInsetsZero;} i;})
安全區(qū)域邊緣與當(dāng)前View邊緣的距離.png

END

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末午绳,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子映之,更是在濱河造成了極大的恐慌拦焚,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,858評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件杠输,死亡現(xiàn)場離奇詭異赎败,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)蠢甲,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門僵刮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人鹦牛,你說我怎么就攤上這事搞糕。” “怎么了曼追?”我有些...
    開封第一講書人閱讀 165,282評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵窍仰,是天一觀的道長。 經(jīng)常有香客問我礼殊,道長驹吮,這世上最難降的妖魔是什么鲫忍? 我笑而不...
    開封第一講書人閱讀 58,842評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮钥屈,結(jié)果婚禮上悟民,老公的妹妹穿的比我還像新娘。我一直安慰自己篷就,他們只是感情好射亏,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著竭业,像睡著了一般智润。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上未辆,一...
    開封第一講書人閱讀 51,679評(píng)論 1 305
  • 那天窟绷,我揣著相機(jī)與錄音,去河邊找鬼咐柜。 笑死兼蜈,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的拙友。 我是一名探鬼主播为狸,決...
    沈念sama閱讀 40,406評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼遗契!你這毒婦竟也來了辐棒?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,311評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤牍蜂,失蹤者是張志新(化名)和其女友劉穎漾根,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體鲫竞,經(jīng)...
    沈念sama閱讀 45,767評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡辐怕,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了贡茅。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片秘蛇。...
    茶點(diǎn)故事閱讀 40,090評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖顶考,靈堂內(nèi)的尸體忽然破棺而出赁还,到底是詐尸還是另有隱情,我是刑警寧澤驹沿,帶...
    沈念sama閱讀 35,785評(píng)論 5 346
  • 正文 年R本政府宣布艘策,位于F島的核電站,受9級(jí)特大地震影響渊季,放射性物質(zhì)發(fā)生泄漏朋蔫。R本人自食惡果不足惜罚渐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望驯妄。 院中可真熱鬧荷并,春花似錦、人聲如沸青扔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽微猖。三九已至谈息,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間凛剥,已是汗流浹背侠仇。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評(píng)論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留犁珠,地道東北人逻炊。 一個(gè)月前我還...
    沈念sama閱讀 48,298評(píng)論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像盲憎,于是被迫代替她去往敵國和親嗅骄。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評(píng)論 2 355