iOS使用topLayoutGuide和bottomLayoutGuide

可以使用safe area来适配iPhone X，但是safe area最低支持iOS 9系统，而不支持iOS 8系统，所以为了适配iPhone X，并且能够兼容iOS 8，就得采用其他的适配方式。

在iOS中，可以使用topLayoutGuide和bottomLayoutGuide来适配屏幕内容，它们是属于UIViewController的属性，配合masonry和SnapKit等约束工具，效果更好。

1. 基本原理

top Layout Guide用于自动布局的辅助，在Storyboard中可以看到Top Layout Guide作为ViewController的属性存在，也就是topLayoutGuide，官方文档对这个属性的Discussion是：

topLayoutGuide属性表示不希望被透明的状态栏或导航栏遮挡的内容范围的最高位置。这个属性的值是它的length属性的值（topLayoutGuide.length），这个值可能由当前的ViewController或这个ViewController所属的NavigationController或TabBarController决定。

bottom Layout Guide与top Layout Guide原理类似，这里不再赘述。

2. 使用场景

2.1 topLayoutGuide使用场景

使用topLayoutGuide的场景主要是自定义的导航栏，因为导航栏是通过UIView绘制的，所以在iPhone X上面，自定义导航栏会紧贴着刘海。iPhone X的刘海高度为44像素。

2.2 bottomLayoutGuide使用场景

假设有一个页面，底部有一个支付按钮，并且这个页面有可能有TabBar，也可能没有TabBar，那么可以通过bottomLayoutGuide来对该支付按钮进行布局。当然iPhonex的底部有一段空白区域，高度是34像素？？？这个高度，笔者记不大清，读者可以查阅资料。

不过适配iPhone X不用担心底部的空白区域，可以通过bottomLayoutGuide来添加View的约束即可。

3. 范例代码

3.1 Objective-C

UIView *bottomPayView = [[UIView alloc] init];
bottomPayView.backgroundColor = [UIColor grayColor];
[self.view addSubview:bottomPayView];
[bottomPayView mas_makeConstraints:^(MASConstraintMaker *x) {
        x.height.equalTo(@45);
        x.left.right.equalTo(self.view);
        x.bottom.equalTo(self.mas_bottomLayoutGuide);
}];

3.2 swift

let bottomPayView = UIView()
bottomPayView.backgroundColor = UIColor.gray
view.addSubview(bottomPayView)
bottomPayView.snp.makeConstraint { x
  x.height.equalTo(45)
  x.left.right.equalTo(self.view)
  x.bottom.equalTo(self.bottomLayGuide.snp.top)
}

4. 参考链接

• topLayoutGuide
• iOS开发中topLayoutGuide的问题