一. 前言web
本文的出發點是對iOS設備的適配, 咱們以前的適配只是考慮設備的尺寸, 設備的方向, 而在iPhoneX出來以後呢, 咱們又多了一種考量, 那就是劉海和底部橫條(HomeIndicator), 咱們經過UIKit11.0以後新增的API來解決這個問題, 達到不一樣設備尺寸, 不一樣設備方向的完美適配.安全
二. 以前的作法ide
注: 該方法只適用於設備的豎屏, 若是是橫屏就會出現問題佈局
咱們是用宏, 來解決這個問題的, 像這樣:ui
/** 設備屏幕寬度 */ #define LCLScreenWidth [[UIScreen mainScreen] bounds].size.width /** 設備屏幕高度 */ #define LCLScreenHeight [[UIScreen mainScreen] bounds].size.height /** iPhoneX判斷 */ #define LCLIsIphoneX (CGSizeEqualToSize(CGSizeMake(375.f, 812.f), [UIScreen mainScreen].bounds.size) || CGSizeEqualToSize(CGSizeMake(812.f, 375.f), [UIScreen mainScreen].bounds.size)) /** 狀態欄高度 */ #define LCL_StatusBar_Height ((LCLIsIphoneX) ? 44 : 20) /** 導航欄高度 */ #define LCL_NavBar_Height ((LCLIsIphoneX) ? 88 : 64) /** 標籤欄高度 */ #define LCL_TabBar_Height ((LCLIsIphoneX) ? 83 : 49) /** 底部橫條高度 */ #define LCL_HomeIndicator_Height ((LCLIsIphoneX) ? 34 : 0)
可是這不能知足咱們的需求, 由於這樣作它不支持橫屏.atom
三. 如今的作法spa
咱們須要用到UIKit11.0的新增屬性來完成這個需求code
UIView類的新屬性safeAreaLayoutGuide, 它是UILayoutGuide類型, 咱們能夠理解爲一塊安全區域(SafeArea), 不被statusBar, navigationBar, toolBar, tabBar所遮擋的區域blog
UILayoutGuide類的屬性layoutFrame, 安全區域的位置和大小it
UIView類的新屬性SafeAreaInsets, 它指示的是這塊安全區域距離整個屏幕之間的上下左右邊距
首先咱們能夠先打印下這三個屬性
- (void)viewWillLayoutSubviews { [super viewWillLayoutSubviews]; CGRect frame = self.view.frame; NSLog(@"self.view - frame - %@", NSStringFromCGRect(frame)); CGRect layoutFrame = self.view.safeAreaLayoutGuide.layoutFrame; NSLog(@"self.view - layoutFrame - %@", NSStringFromCGRect(layoutFrame)); UIEdgeInsets insets = self.view.safeAreaInsets; NSLog(@"self.view - insets - %@", NSStringFromUIEdgeInsets(insets)); }
打印結果:
在iPhoneX豎屏(設備朝上)狀況下輸出爲:
「self.view - frame - {{0, 0}, {375, 812}}」 「self.view - layoutFrame - {{0, 88}, {375, 690}}」 「self.view - insets - {88, 0, 34, 0}」
能夠看到, 在豎屏狀況下, 整個控制器的view的大小就是整個屏幕的大小, 而安全區域的大小爲除去statusBar(狀態欄區域:44), navigationBar(導航欄區域:44), home indicator(底部橫條區域:34), 剩下的就是安全區域, 如圖:
在iPhoneX橫屏(設備朝左)狀況下輸出爲:
「self.view - frame - {{0, 0}, {812, 375}}」 「self.view - layoutFrame - {{44, 32}, {724, 322}}」 「self.view - insets - {32, 44, 21, 44}」
能夠看到, 在橫屏狀況下, 整個控制器的view的大小就是整個屏幕的大小, 而安全區域的大小爲除去statusBar(狀態欄區域:44), navigationBar(導航條區域:32), home indicator(底部橫條區域:21), 剩下的就是安全區域, 如圖:
在瞭解了這幾個屬性具體所指的內容以後, 咱們也就能夠開始UI佈局和屏幕適配啦.
首先咱們聲明兩個全局私有屬性
@interface ViewController () /** 紅色view 用於置頂 */ @property (nonatomic, strong) UIView * redView; /** 橘色view 用於置底 */ @property (nonatomic, strong) UIView * orangeView; @end
而後在viewDidLoad方法裏面完成視圖的建立
#pragma mark - 建立視圖 - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. self.title = @"屏幕適配"; self.view.backgroundColor = [UIColor yellowColor]; /** 建立紅色view */ UIView * redView = [UIView new]; redView.backgroundColor = [UIColor redColor]; [self.view addSubview:redView]; self.redView = redView; /** 建立橘色view */ UIView * orangeView = [UIView new]; orangeView.backgroundColor = [UIColor orangeColor]; [self.view addSubview:orangeView]; self.orangeView = orangeView; }
以後在viewWillLayoutSubviews完成對視圖的frame設置
#pragma mark - 設置視圖frame - (void)viewWillLayoutSubviews { /** layoutFrame.size.width 安全區域寬度 layoutFrame.size.height 安全區域高度 */ CGRect layoutFrame = self.view.safeAreaLayoutGuide.layoutFrame; NSLog(@"self.view - layoutFrame - %@", NSStringFromCGRect(layoutFrame)); /** inset.left 安全區域距離屏幕最左邊的大小 inset.right 安全區域距離屏幕最右邊的大小 inset.top 安全區域距離屏幕最上邊的大小 inset.bottom 安全區域距離屏幕最下邊的大小 */ UIEdgeInsets insets = self.view.safeAreaInsets; /** 紅色view置頂 */ self.redView.frame = CGRectMake(insets.left, insets.top, layoutFrame.size.width, 100); /** 橘色view置底 */ self.orangeView.frame = CGRectMake(insets.left, self.view.bounds.size.height - insets.bottom - 100, layoutFrame.size.width, 100); }
如今咱們這個簡單的Demo適配就算完成啦, 無論是iPhoneX, 仍是其它iOS設備, 無論是豎屏, 仍是橫屏, 均可以完美適配, 如圖:
用一句名言來結束本節的探討吧, 那就是」完美」!
Talk is cheap. Show me the code.