背景
iOS11之后推出的safeArea 用于处理刘海屏幕的问题.如果自己处理起来可能比较 麻烦 又需要判断 版本又需要判断 API的可用性. 很多小伙伴都不理解Masonry如何更快捷处理屏幕的边界问题,比如 视图要布局在iOS导航栏底部 和 Home Indicator
. 先看下图:
如果使用更少的代码实现在安全区域内部 展示某个View.
代码实现
这里我们借助Masonry最新库提供的支持API
- (void)viewDidLoad { [super viewDidLoad]; [self.subViewA mas_makeConstraints:^(MASConstraintMaker *make) { if (@available(iOS 11.0, *)) { make.top.equalTo(self.view.mas_safeAreaLayoutGuideTop); make.left.equalTo(self.view.mas_safeAreaLayoutGuideLeft); make.bottom.equalTo(self.view.mas_safeAreaLayoutGuideBottom); make.right.equalTo(self.view.mas_safeAreaLayoutGuideRight); } else { make.top.equalTo(self.mas_topLayoutGuideBottom); make.left.right.equalTo(self.view); make.bottom.equalTo(self.mas_bottomLayoutGuideTop); } }]; }
这里看到safeArea仅仅支持 iOS11以上 那么 iOS11一下 我们可以借出如上述代码
self.mas_topLayoutGuideBottom
和self.mas_bottomLayoutGuideTop
这个是self
指的是UIViewController
下面我们不用SafeArea来使用一下 如下api
-
顶部区域
-
mas_topLayoutGuide
和mas_topLayoutGuideBottom
都是 顶到屏幕 刘海屏底部 也就是说和 safeAreaTop一样,如下图: -
mas_topLayoutGuideTop
顶到屏幕顶部(忽略刘海屏,也就是说被刘海盖住),如下图示:
-
-
底部区域
-
mas_bottomLayoutGuide
和mas_bottomLayoutGuideTop
都是在Home条
的上面 ,如下图: -
mas_bottomLayoutGuideBottom
直接推底,撑到屏幕边缘,如下图:
-
如果想实现和safeArea一样的搞法 可以这样写
[self.subViewA mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.mas_topLayoutGuide); make.left.right.equalTo(self.view); make.bottom.equalTo(self.mas_bottomLayoutGuide); }];
!!!注意 LayoutGuide 紧紧适用于
ios(7.0,11.0)
,也就是说11之后 必须使用safeArea才精准.
附上一张搞完的效果图
总结
借入Masory 可以更加方便快捷的实现我们想要的布局效果并且不用写宏区分是否是刘海屏或者其他屏幕,因为我们操控的实际上就是 安全区内部的范围. 没事得多关注开源代码时长写个demo实验一下.
所以想实现上文中最佳实践的代码应该是
[self.subViewA mas_makeConstraints:^(MASConstraintMaker *make) { if (@available(iOS 11.0, *)) { make.top.equalTo(self.view.mas_safeAreaLayoutGuideTop); make.left.equalTo(self.view.mas_safeAreaLayoutGuideLeft); make.bottom.equalTo(self.view.mas_safeAreaLayoutGuideBottom); make.right.equalTo(self.view.mas_safeAreaLayoutGuideRight); } else { make.top.equalTo(self.mas_topLayoutGuideBottom); make.left.right.equalTo(self.view); make.bottom.equalTo(self.mas_bottomLayoutGuideTop); } }];