1. 前言

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

2. 之前的做法

注: 該方法只適用于設(shè)備的豎屏, 如果是橫屏就會出現(xiàn)問題
我們是用宏, 來解決這個問題的, 像這樣:

/** 設(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)/** 導航欄高度 */ #define LCL_NavBar_Height ((LCLIsIphoneX) ? 88 : 64)/** 標簽欄高度 */ #define LCL_TabBar_Height ((LCLIsIphoneX) ? 83 : 49)/** 底部橫條高度 */ #define LCL_HomeIndicator_Height ((LCLIsIphoneX) ? 34 : 0)

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

3. 現(xiàn)在的做法

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

UIView類的新屬性safeAreaLayoutGuide, 它是UILayoutGuide類型, 我們可以理解為一塊安全區(qū)域(SafeArea), 不被statusBar, navigationBar, toolBar, tabBar所遮擋的區(qū)域。
UILayoutGuide類的屬性layoutFrame, 安全區(qū)域的位置和大小。
UIView類的新屬性SafeAreaInsets, 它指示的是這塊安全區(qū)域距離整個屏幕之間的上下左右邊距

首先我們可以先打印下這三個屬性

- (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}

可以看到, 在豎屏情況下, 整個控制器的view的大小就是整個屏幕的大小, 而安全區(qū)域的大小為除去statusBar(狀態(tài)欄區(qū)域:44), navigationBar(導航欄區(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}

可以看到, 在橫屏情況下, 整個控制器的view的大小就是整個屏幕的大小, 而安全區(qū)域的大小為除去statusBar(狀態(tài)欄區(qū)域:44), navigationBar(導航條區(qū)域:32), home indicator(底部橫條區(qū)域:21), 剩下的就是安全區(qū)域, 如圖:

在了解了這幾個屬性具體所指的內(nèi)容之后, 我們也就可以開始UI布局和屏幕適配啦.

首先我們聲明兩個全局私有屬性

@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ū)挾萳ayoutFrame.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)在我們這個簡單的Demo適配就算完成啦, 不管是iPhoneX, 還是其它iOS設(shè)備, 不管是豎屏, 還是橫屏, 都可以完美適配, 如圖:

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

總結(jié)

以上是生活随笔為你收集整理的iOS SafeArea安全区域的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。