iOS 11.0 iPhone X SafeArea向下兼容

隨著iPhone X的發(fā)布胞四,界面上變化最大的當(dāng)屬NavigationBar和TabBar吭产,如果我們通過(guò)Frame定義視圖的位置,則需判斷設(shè)備類(lèi)型是否為iPhone X擒权,我們是否可以通過(guò)一種更優(yōu)雅的方式诉植,視圖展示時(shí)不需要關(guān)心設(shè)備類(lèi)型祥国。

  • 首先我們介紹幾個(gè)iOS知識(shí)點(diǎn)

    1. iOS 11 的 Safe Area

      XIB勾選Use Safe Area Layout Guide最低支持的版本iOS9.0

      屏幕快照 2017-11-07 下午3.24.35.png

      代碼方式實(shí)現(xiàn)SafeArea

      @property (nonatomic,readonly) UIEdgeInsets safeAreaInsets API_AVAILABLE(ios(11.0),tvos(11.0));

    image.png
    1. Top Layout Guide 和 Bottom Layout Guide

      topLayoutGuide.length:表示當(dāng)前頁(yè)面的上方被status bar、navigation bar遮擋的部分晾腔,對(duì)應(yīng)safeAreaInsets.top

      bottomLayoutGuide.length:表示當(dāng)前頁(yè)面的下方被TabBar舌稀、ToolBar遮擋的部分,對(duì)應(yīng)safeAreaInsets.bottom

      這兩個(gè)屬性屬于ViewController

  • 實(shí)現(xiàn)

    1. 思路

      是否我們可以給UIViewController增加一個(gè)視圖(ContentView)灼擂,ContentView根據(jù)SafeArea自動(dòng)適應(yīng)壁查,其它的視圖添加到ContentView,這樣就不需要關(guān)心導(dǎo)航欄和TabBar的高度

      • 創(chuàng)建基類(lèi)ViewController剔应,ViewController添加一個(gè)視圖睡腿,該視圖針對(duì)SafeArea做好約束條件,項(xiàng)目中所有的Controller都繼承這個(gè)類(lèi)峻贮,這種方式侵入性太強(qiáng)

      • 通過(guò)Category的方式席怪,UIViewController增加一個(gè)視圖屬性,當(dāng)Controller中添加視圖時(shí)纤控,都增加到Category類(lèi)中的這個(gè)視圖上挂捻,這種方式,如果用戶不調(diào)用Category增加的視圖船万,不對(duì)Controller有任何影響

    2. 代碼

UIViewController+SafeArea.h

@interface UIViewController (SafeArea)

@property (nonatomic, strong) UIView    *contentView;

@end
#import "UIViewController+SafeArea.h"
#import <objc/runtime.h>
#import "Masonry.h"

static const void *ContentView = &ContentView;

@implementation UIViewController (SafeArea)

- (void)setContentView:(UIView *)contentView {
    objc_setAssociatedObject(self, ContentView, contentView, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

- (UIView *)contentView {
    UIView *view = objc_getAssociatedObject(self, ContentView);
    if (!view) {
        view = [UIView new];
        view.backgroundColor = [UIColor clearColor];
        self.contentView = view;
        [self.view addSubview:view];
        
        [view mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.and.right.equalTo(self.view);
            if (@available(iOS 11.0, *)) {
                make.top.equalTo(self.view.mas_safeAreaLayoutGuideTop);
                make.bottom.equalTo(self.view.mas_safeAreaLayoutGuideBottom);
            } else {
                self.automaticallyAdjustsScrollViewInsets = NO;
                make.top.equalTo(self.mas_topLayoutGuide);
                make.bottom.equalTo(self.mas_bottomLayoutGuide);
            }
        }];
    }
    return view;
}

@end
  1. 使用

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.title = @"SafeArea";
    
    [self.contentView addSubview:self.tableView];
    [self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.top.bottom.and.right.equalTo(self.contentView);
    }];
}

注意如果項(xiàng)目首頁(yè)展示UICollectionView刻撒,啟動(dòng)頁(yè)狀態(tài)欄默認(rèn)隱藏,這時(shí)候再進(jìn)入到首頁(yè)UICollectionView中的cell展示出現(xiàn)問(wèn)題耿导,我們需要特殊處理

- (void)viewWillLayoutSubviews {
    [super viewWillLayoutSubviews];
    
    [self.collectionView.collectionViewLayout invalidateLayout];
}

完整的使用例子可以參考:

https://github.com/cheyongzi/SafeArea

覺(jué)得還不錯(cuò)的可以給個(gè)Star

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末声怔,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子舱呻,更是在濱河造成了極大的恐慌醋火,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,590評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件狮荔,死亡現(xiàn)場(chǎng)離奇詭異胎撇,居然都是意外死亡介粘,警方通過(guò)查閱死者的電腦和手機(jī)殖氏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)姻采,“玉大人雅采,你說(shuō)我怎么就攤上這事。” “怎么了婚瓜?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,301評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵宝鼓,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我巴刻,道長(zhǎng)愚铡,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,078評(píng)論 1 300
  • 正文 為了忘掉前任胡陪,我火速辦了婚禮沥寥,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘柠座。我一直安慰自己邑雅,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,082評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布妈经。 她就那樣靜靜地躺著淮野,像睡著了一般。 火紅的嫁衣襯著肌膚如雪吹泡。 梳的紋絲不亂的頭發(fā)上骤星,一...
    開(kāi)封第一講書(shū)人閱讀 52,682評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音爆哑,去河邊找鬼妈踊。 笑死,一個(gè)胖子當(dāng)著我的面吹牛泪漂,可吹牛的內(nèi)容都是我干的廊营。 我是一名探鬼主播,決...
    沈念sama閱讀 41,155評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼萝勤,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼露筒!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起敌卓,我...
    開(kāi)封第一講書(shū)人閱讀 40,098評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤慎式,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后趟径,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體瘪吏,經(jīng)...
    沈念sama閱讀 46,638評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,701評(píng)論 3 342
  • 正文 我和宋清朗相戀三年蜗巧,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了掌眠。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,852評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡幕屹,死狀恐怖蓝丙,靈堂內(nèi)的尸體忽然破棺而出级遭,到底是詐尸還是另有隱情,我是刑警寧澤渺尘,帶...
    沈念sama閱讀 36,520評(píng)論 5 351
  • 正文 年R本政府宣布挫鸽,位于F島的核電站,受9級(jí)特大地震影響鸥跟,放射性物質(zhì)發(fā)生泄漏丢郊。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,181評(píng)論 3 335
  • 文/蒙蒙 一医咨、第九天 我趴在偏房一處隱蔽的房頂上張望蚂夕。 院中可真熱鬧,春花似錦腋逆、人聲如沸婿牍。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,674評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)等脂。三九已至,卻和暖如春撑蚌,著一層夾襖步出監(jiān)牢的瞬間上遥,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,788評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工争涌, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留粉楚,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,279評(píng)論 3 379
  • 正文 我出身青樓亮垫,卻偏偏與公主長(zhǎng)得像模软,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子饮潦,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,851評(píng)論 2 361

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