<iOS屏幕適配> iPhoneX SafeArea - 安全區(qū)域
一. 前言
本文的出發(fā)點(diǎn)是對iOS設(shè)備的適配, 我們之前的適配只是考慮設(shè)備的尺寸, 設(shè)備的方向, 而在iPhoneX出來之后呢, 我們又多了一種考量, 那就是劉海和底部橫條(HomeIndicator), 我們通過UIKit11.0之后新增的API來解決這個(gè)問題, 達(dá)到不同設(shè)備尺寸, 不同設(shè)備方向的完美適配.
二. 之前的做法
注: 該方法只適用于設(shè)備的豎屏, 如果是橫屏就會(huì)出現(xiàn)問題
我們是用宏, 來解決這個(gè)問題的, 像這樣:
/** 設(shè)備屏幕寬度 */
#define LCLScreenWidth [[UIScreen mainScreen] bounds].size.width
/** 設(shè)備屏幕高度 */
#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))
/** 狀態(tài)欄高度 */
#define LCL_StatusBar_Height ((LCLIsIphoneX) ? 44 : 20)
/** 導(dǎo)航欄高度 */
#define LCL_NavBar_Height ((LCLIsIphoneX) ? 88 : 64)
/** 標(biāo)簽欄高度 */
#define LCL_TabBar_Height ((LCLIsIphoneX) ? 83 : 49)
/** 底部橫條高度 */
#define LCL_HomeIndicator_Height ((LCLIsIphoneX) ? 34 : 0)</pre>
但是這不能滿足我們的需求, 因?yàn)檫@樣做它不支持橫屏.
三. 現(xiàn)在的做法
我們需要用到UIKit11.0的新增屬性來完成這個(gè)需求
UIView類的新屬性safeAreaLayoutGuide, 它是UILayoutGuide類型, 我們可以理解為一塊安全區(qū)域(SafeArea), 不被statusBar, navigationBar, toolBar, tabBar所遮擋的區(qū)域
UILayoutGuide類的屬性layoutFrame, 安全區(qū)域的位置和大小
UIView類的新屬性SafeAreaInsets, 它指示的是這塊安全區(qū)域距離整個(gè)屏幕之間的上下左右邊距
首先我們可以先打印下這三個(gè)屬性
- (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));
}
打印結(jié)果:
在iPhoneX豎屏(設(shè)備朝上)情況下輸出為:
“self.view - frame - {{0, 0}, {375, 812}}”
“self.view - layoutFrame - {{0, 88}, {375, 690}}”
“self.view - insets - {88, 0, 34, 0}”
可以看到, 在豎屏情況下, 整個(gè)控制器的view的大小就是整個(gè)屏幕的大小, 而安全區(qū)域的大小為除去statusBar(狀態(tài)欄區(qū)域:44), navigationBar(導(dǎo)航欄區(qū)域:44), home indicator(底部橫條區(qū)域:34), 剩下的就是安全區(qū)域, 如圖:
在iPhoneX橫屏(設(shè)備朝左)情況下輸出為:
“self.view - frame - {{0, 0}, {812, 375}}”
“self.view - layoutFrame - {{44, 32}, {724, 322}}”
“self.view - insets - {32, 44, 21, 44}”
可以看到, 在橫屏情況下, 整個(gè)控制器的view的大小就是整個(gè)屏幕的大小, 而安全區(qū)域的大小為除去statusBar(狀態(tài)欄區(qū)域:44), navigationBar(導(dǎo)航條區(qū)域:32), home indicator(底部橫條區(qū)域:21), 剩下的就是安全區(qū)域, 如圖:
在了解了這幾個(gè)屬性具體所指的內(nèi)容之后, 我們也就可以開始UI布局和屏幕適配啦.
首先我們聲明兩個(gè)全局私有屬性
@interface ViewController () /** 紅色view 用于置頂 */ @property (nonatomic, strong) UIView * redView; /** 橘色view 用于置底 */ @property (nonatomic, strong) UIView * orangeView; @end
然后在viewDidLoad方法里面完成視圖的創(chuàng)建
#pragma mark - 創(chuàng)建視圖
- (void)viewDidLoad {
[super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib.
self.title = @"屏幕適配";
self.view.backgroundColor = [UIColor yellowColor]; /** 創(chuàng)建紅色view */ UIView * redView = [UIView new];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
self.redView = redView; /** 創(chuàng)建橘色view */ UIView * orangeView = [UIView new];
orangeView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:orangeView];
self.orangeView = orangeView;
}
之后在viewWillLayoutSubviews完成對視圖的frame設(shè)置
#pragma mark - 設(shè)置視圖frame
- (void)viewWillLayoutSubviews { /**
layoutFrame.size.width 安全區(qū)域?qū)挾? layoutFrame.size.height 安全區(qū)域高度 */ CGRect layoutFrame = self.view.safeAreaLayoutGuide.layoutFrame;
NSLog(@"self.view - layoutFrame - %@", NSStringFromCGRect(layoutFrame)); /**
inset.left 安全區(qū)域距離屏幕最左邊的大小
inset.right 安全區(qū)域距離屏幕最右邊的大小
inset.top 安全區(qū)域距離屏幕最上邊的大小
inset.bottom 安全區(qū)域距離屏幕最下邊的大小 */ 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);
}
現(xiàn)在我們這個(gè)簡單的Demo適配就算完成啦, 不管是iPhoneX, 還是其它iOS設(shè)備, 不管是豎屏, 還是橫屏, 都可以完美適配, 如圖:
