東引甌越

不断学习, 与时俱进. - 始于2017

嗨,我是孙亚洲(@sunyazhou13),一名来自祖国北国冰城的iOS开发者.


使用Masonry处理UIView的safeArea边界布局问题

前言

本文具有强烈的个人感情色彩,如有观看不适,请尽快关闭. 本文仅作为个人学习记录使用,也欢迎在许可协议范围内转载或使用,请尊重版权并且保留原文链接,谢谢您的理解合作. 如果您觉得本站对您能有帮助,您可以使用RSS方式订阅本站,这样您将能在第一时间获取本站信息.

背景

iOS11之后推出的safeArea 用于处理刘海屏幕的问题.如果自己处理起来可能比较 麻烦 又需要判断 版本又需要判断 API的可用性. 清明假期 在家没事写个demo 解决如何更快捷处理屏幕的边界问题,比如 视图要布局在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_topLayoutGuideBottomself.mas_bottomLayoutGuideTop 这个是self指的是UIViewController

下面我们不用SafeArea来使用一下 如下api

  1. 顶部区域

    • mas_topLayoutGuidemas_topLayoutGuideBottom都是 顶到屏幕 刘海屏底部 也就是说和 safeAreaTop一样,如下图:

    • mas_topLayoutGuideTop 顶到屏幕顶部(忽略刘海屏,也就是说被刘海盖住),如下图示:

  2. 底部区域

    • mas_bottomLayoutGuidemas_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);
}
}];

本文Demo

最近的文章

Cocoapods清华镜像

前言 本文具有强烈的个人感情色彩,如有观看不适,请尽快关闭. 本文仅作为个人学习记录使用,也欢迎在许可协议范围内转载或使用,请尊重版权并且保留原文链接,谢谢您的理解合作. 如果您觉得本站对您能有帮助,您可以使用RSS方式订阅本站,这样您将能在第一时间获取本站信息. Cocoapod疑难杂症 这几天开 …

于  iOS开发, macOS开发 继续阅读
更早的文章

(转)深度理解 NSURLProtocol

前言 本文经由微信知识小集公众号授权并转载自FiTeen博客,如果版权问题请与我联系sunyazhou13@163.com.转载此文目的是为了记录iOS开发中的重要知识点,防止原文博客寻找起来麻烦. 本文具有强烈的个人感情色彩,如有观看不适,请尽快关闭. 本文仅作为个人学习记录使用,也欢迎在许可协 …

于  iOS开发, 知识小集 继续阅读