三月份工作 9月份才開始自己主動了解安全區域適配問題

一. 前言

本文的出發點是對iOS設備的適配, 我們之前的適配只是考慮設備的尺寸, 設備的方向, 而在iPhoneX出來之后呢, 我們又多了一種考量, 那就是劉海和底部橫條(HomeIndicator), 我們通過UIKit11.0之后新增的API來解決這個問題, 達到不同設備尺寸, 不同設備方向的完美適配.

?

二. 之前的做法

注: 該方法只適用于設備的豎屏, 如果是橫屏就會出現問題

我們是用宏, 來解決這個問題的, 像這樣:

?

/** 設備屏幕寬度 */

#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)

?

但是這不能滿足我們的需求, 因為這樣做它不支持橫屏.

三. 現在的做法

我們需要用到UIKit11.0的新增屬性來完成這個需求

UIView類的新屬性safeAreaLayoutGuide, 它是UILayoutGuide類型, 我們可以理解為一塊安全區域(SafeArea), 不被statusBar, navigationBar, toolBar, tabBar所遮擋的區域

UILayoutGuide類的屬性layoutFrame, 安全區域的位置和大小

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設備, 不管是豎屏, 還是橫屏, 都可以完美適配, 如圖:

?

用一句名言來結束本節的探討吧, 那就是”完美”!

以上是網上的

自己親自實踐了一下

按照他在viewWillLayoutSubviews這里寫的安全區域的布局我用xib做了約束之后是不好使的

也就是運行之后還是一模一樣

而在viewDidLayoutSubviews這里寫就可以控制視圖的frame了

(具體原因暫時不知道 但是在viewDidLoad里寫也是不能控制安全區域)

?

?

總結

以上是生活随笔為你收集整理的iOS 屏幕适配 iPhone X SafeArea安全区域的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。