iOS 开发小技巧 —- Masonry 中使用 Margin

为了让界面的布局显示正确, 并且在异形屏上显示正确, 那真是无所不用其极, 什么 edgesForExtendedLayout, automaticallyAdjustsScrollViewInsets, insetsLayoutMarginsFromSafeArea, contentInsetAdjustmentBehavior, autoresizingMask 还有 safeArea, 统统都有用, 但个个都很麻烦, 甚至复杂的界面还会出现设置无效的情况. 那么, 有没有一个一劳永逸的方法呢?

有, Masonry 或者 AutoLayout 中的带有 Margin 后缀的约束

先搭一个简单界面做测试

带有 UINavigationController, UIView 坐标偏上

[self.testView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.view.mas_top);
    make.left.equalTo(self.view.mas_left);
    make.width.mas_equalTo(100);
    make.height.mas_equalTo(100);
}];

这是典型的 UINavigationController 遮挡, 让我们稍微修改一下约束:

[self.testView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.view.mas_topMargin); // 修改为 Margin
    make.left.equalTo(self.view.mas_left);
    make.width.mas_equalTo(100);
    make.height.mas_equalTo(100);
}];

完美! 再来看看异形屏上的效果对比

修改后

带有 UItabBarController, UIView 坐标偏下

修改前

[self.testView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.bottom.equalTo(self.view.mas_bottom);
    make.left.equalTo(self.view.mas_left);
    make.width.mas_equalTo(200);
    make.height.mas_equalTo(100);
}];

修改后

[self.testView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.bottom.equalTo(self.view.mas_bottomMargin);
    make.left.equalTo(self.view.mas_left);
    make.width.mas_equalTo(200);
    make.height.mas_equalTo(100);
}];

没有 UItabBarController, UIView 坐标偏下, 异形屏

[self.testView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.bottom.equalTo(self.view.mas_bottom);
    make.left.equalTo(self.view.mas_left);
    make.width.mas_equalTo(200);
    make.height.mas_equalTo(100);
}];

美工: 我这张PSD下去, 你可能会死

[self.testView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.bottom.equalTo(self.view.mas_bottomMargin); // 修改为 Margin
    make.left.equalTo(self.view.mas_left);
    make.width.mas_equalTo(200);
    make.height.mas_equalTo(100);
}];

完美!

带有 UItabBarController, UIView 坐标偏下, 异形屏

修改前

[self.testView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.bottom.equalTo(self.view.mas_bottom);
    make.left.equalTo(self.view.mas_left);
    make.width.mas_equalTo(200);
    make.height.mas_equalTo(100);
}];

修改后

[self.testView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.bottom.equalTo(self.view.mas_bottomMargin);
    make.left.equalTo(self.view.mas_left);
    make.width.mas_equalTo(200);
    make.height.mas_equalTo(100);
}];

如果将 UIView 换成 UITableView 呢?

只要使用自动布局, 加不加 Margin 都一样, 因为系统会自动将 -[UIViwController view] 上第一个 UIScrollView 进行自动的边距处理, 但如果使用了别的布局属性来规避某些显示异常, 比如 edgesForExtendedLayout, automaticallyAdjustsScrollViewInsets, contentInsetAdjustmentBehavior 或者 autoresizingMask, 就可以使用 Margin 约束试一试, 指不定会有惊喜哦.

结语

带有 Margin 的约束目前只能在 iOS 8.0 及以上, iPhone 上使用, 已经可以覆盖99.99%以上的系统和设备, 可以没有后顾之忧的使用.