iPhone X已经发布有一段时间了，最近我负责把公司的产品Cisco Spark适配iPhone X。虽然还没有采购到iPhone X，但是借助模拟器，勉强把代码改好，让Spark适配iPhone X。我们在产品中，除了启动页面，所有的UI都是用代码来实现的。所以我下面提到的所有内容都是在代码中如何适配iPhone X，不涉及Interface Builder。下面是一些总结，可能无法做到面面俱到，但是相信能解决大部分的iPhone X适配问题。

什么是Safe Area？

iOS11为了解决iPhone X上异形屏的问题，新引入了安全区（Safe Area）。在代码中安全区是通过safeAreaLayoutGuide来表示的。来看看苹果官方怎么定义safeAreaLayoutGuide。

safeAreaLayoutGuide

这里面有些单词不好理解，比如accommodates是什么意思。很容易把人搞混淆。不过如果我们对照这safeAreaInsets的定义来看，就能大概搞清楚safe area是什么来。

safeAreaInsets

简单的总结一下什么是安全区：

1. safeAreaLayoutGuide是UIView的一个属性，类型是UILayoutGuide。UILayoutGuide有一个layoutFrame的属性。说明它是一块方形区域（CGRect)。该方形区域对应的就是Safe Area。那么该方形区域有多大呢？

2. Safe Area避开了导航栏，状态栏，工具栏以及可能遮挡View显示的父View。

    2.1. 对于一个控制器的root view，safe area等于该view的Frame减去各种bar以及additionalSafeAreaInsets剩余的部分。

    2.2. 对于视图层级上除此之外的其他view，safe area对应没有被其他内容（各种bar，additionalSafeAreaInsets）遮挡的部分。比如，如果一个view完全在superview的safe area中，这个view的safe area就是view本身。

3. 根据上面一条，我们在编码的时候，只要针对safe area编程，就不会被各种bar遮挡。

4. 是不是所有view都需要针对safe area编程。其实也不是的，只要控制器View第一层级的subviews是针对safe area编程就可以了。后面层级的subview无需针对safe area编程。因为这种情况下，safe area的大小就是view frame的大小。

5. 如果view不显示或者不在显示层级中，该view的safe area的大小就等于view frame大小。

6. safeAreaLayoutGuide = view.frame - safeAreaInsets。 我们可以通过调整additionalSafeAreaInsets来控制safe area的大小。

如何适配iPhone X

现在已经搞清楚了safe area。那么我们在代码中需要做哪些修改来适配iPhone X呢？我们所有的UI都是用代码来实现的，并且基本上都是通过constraint来实现Auto layout。基本用到3种添加约束的方式。

1. 用的最多的就是VFL（visual format language)， 这种方式一行代码可以写出多个约束，所有用的最多。

 customConstraints.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: "V:|-8-[redView]-|", options: [], metrics: nil, views: views))

2. Layout Anchor。这种方式用的也不少。我们主要用来约束view相对其他view的X,Y中心位置.

customConstraints.append(bindToLyraSpaceButton.centerXAnchor.constraint(equalTo: view.centerXAnchor))         customConstraints.append(bindRoomNameLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor))

3. 这种又臭又长的创建NSLayoutConstraint方式，基本上用的比较少。

customConstraints.append(NSLayoutConstraint(item: redView, attribute: .top, relatedBy: .equal, toItem: view attribute: .top, multiplier: 1, constant: 0)

下面来逐个分析这几种添加越苏的方式需要怎么修改。

VFL的适配

比如，一个全屏的view（上下左右都不留margin的那种），我们一般用这种方式来写：

let views: [String: AnyObject] = ["redView" : redView]   

customConstraints.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: "H:|[redView]|", options: [], metrics: nil, views: views))

customConstraints.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: "V:|[redView]|", options: [], metrics: nil, views: views))

NSLayoutConstraint.activate(customConstraints)

对于这种方式创建出来的view，很明显，在iPhone X上是会被刘海遮挡住的。因为VFH添加的约束是针对View而不是上面提到的safe area。这种代码改起来稍微有点痛苦，比如以上的代码需要改成这样，来针对safe area添加约束。             

let safeArea = view.safeAreaLayoutGuide    

redView.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor).isActive = true         redView.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor).isActive = true         redView.topAnchor.constraint(equalTo: safeArea.topAnchor).isActive = true         redView.bottomAnchor.constraint(equalTo: safeArea.bottomAnchor).isActive = true

还有一种情况，全屏的view上下左右留有一定的margin。我们一般这么写：

let views: [String: AnyObject] = ["redView" : redView]   

customConstraints.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: "H:|-16-[redView]-16-|", options: [], metrics: nil, views: views))

customConstraints.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: "V:|-16-[redView]-16-|", options: [], metrics: nil, views: views))

NSLayoutConstraint.activate(customConstraints)

这种情况跟上面的改法一样，只需要指定一下constant值就行了

let safeArea = view.safeAreaLayoutGuide                 

redView.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 16).isActive = true     

redView.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor, constant: 16).isActive = true        

redView.topAnchor.constraint(equalTo: safeArea.topAnchor, constant: 16).isActive = true        

redView.bottomAnchor.constraint(equalTo: safeArea.bottomAnchor, constant: 16).isActive = true

如果恰好走狗屎运，你的产品设计的margin值等于系统的默认margin 8，你一般会这么写。反正我们代码里基本margin都是16。这种情况，你无需修改任何代码就可以适配iPhone X。

let views: [String: AnyObject] = ["redView" : redView]   

customConstraints.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: "H:|-[redView]-|", options: [], metrics: nil, views: views))

customConstraints.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: "V:|-[redView]-|", options: [], metrics: nil, views: views))

NSLayoutConstraint.activate(customConstraints)

因为这种情况，你没有修改系统默认的margins，系统会自动给你添加layoutMargins。而layoutMargins已经默认对safe area处理过了。以上代码跟下面的代码是一样的：

let margin = view.layoutMarginsGuide        

view.layoutMargins = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)               

redView.leadingAnchor.constraint(equalTo: margin.leadingAnchor).isActive = true        

redView.trailingAnchor.constraint(equalTo: margin.trailingAnchor).isActive = true        

redView.topAnchor.constraint(equalTo: margin.topAnchor).isActive = true        

redView.bottomAnchor.constraint(equalTo: margin.bottomAnchor).isActive = true

因为layoutMargins已经针对safe area处理过了，所以我们其实可以直接跳过safe area，针对layoutMarginGuide编程来适配iPhone X。比如，如果你的margins是（16，16，16，16），你只需要修改layoutMargins这个属性，其余的代码还跟原来一样用VFL：

let views: [String: AnyObject] = ["redView" : redView]                  customConstraints.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: "H:|-[redView]-|", options: [], metrics: nil, views: views))        

customConstraints.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: "V:|-[redView]-|", options: [], metrics: nil, views: views))                 

view.layoutMargins = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)         NSLayoutConstraint.activate(customConstraints)

所以对于VFL，有两种办法来修改你的代码去适配iPhone X。一种是直接针对safe area编程，一种是直接跳过safe area针对layoutMarginsGuide编程。使用前一种，需要写if/else来处理不同的iOS版本，这一点后面会提到。使用后一种，可能代码看起来会有点杂乱。我们用的是前一种。

Layout Anchor的适配

layout Anchor的适配代码比较简单，只需要把view.xxxAnchor改成view.safeAreaLayoutGuide就可以了。

customConstraints.append(bindToLyraSpaceButton.centerXAnchor.constraint(equalTo: view.centerXAnchor))         customConstraints.append(bindRoomNameLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor))

// 改成这样：view ------> view..safeAreaLayoutGuide

customConstraints.append(bindToLyraSpaceButton.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor))         customConstraints.append(bindRoomNameLabel.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor))

NSLayoutConstraint方式的适配

这种方式的适配跟上一种一样，也是把view改成safeAreaLayoutGuide就可以了

customConstraints.append(NSLayoutConstraint(item: redView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1, constant: 0))         customConstraints.append(NSLayoutConstraint(item: redView, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1, constant: 0))         customConstraints.append(NSLayoutConstraint(item: redView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1, constant: 0))         customConstraints.append(NSLayoutConstraint(item: redView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1, constant: 0))

// 改成这样：view ------> view..safeAreaLayoutGuide

customConstraints.append(NSLayoutConstraint(item: redView, attribute: .top, relatedBy: .equal, toItem: view.safeAreaLayoutGuide, attribute: .top, multiplier: 1, constant: 0))         customConstraints.append(NSLayoutConstraint(item: redView, attribute: .bottom, relatedBy: .equal, toItem: view.safeAreaLayoutGuide, attribute: .bottom, multiplier: 1, constant: 0))         customConstraints.append(NSLayoutConstraint(item: redView, attribute: .leading, relatedBy: .equal, toItem: view.safeAreaLayoutGuide, attribute: .leading, multiplier: 1, constant: 0))         customConstraints.append(NSLayoutConstraint(item: redView, attribute: .trailing, relatedBy: .equal, toItem: view.safeAreaLayoutGuide, attribute: .trailing, multiplier: 1, constant: 0))

兼容iOS 10 和 iOS 11

safeAreaLayoutGuide和safeAreaInsets这两个属性都是iOS 11新加入的。所以如果你的App需要兼容iOS 9和iOS 10，要写很多这样的判断代码

if #available(iOS 11.0, *) {             return safeAreaLayoutGuide         }

为了避免在代码中到处写这种判断代码，我们对对UIView进行了扩展。具体方式如下：

首先定义一个UILayoutGuideProtocol，让UIView和UILayoutGuide都实现这个protocol。

UILayoutGuideProtocol

然后扩展UIView，给它添加一个safeLayoutGuide的属性，这个属性是这样实现的：

UIView extension

在使用的地方，需要调用view.safeAreaLayoutGuide的地方，改为调用view.safeLayoutGuide。这样就不需要写if/else了。

UITableView和UICollectionView

UITableView比较特殊，系统已经帮你出里过safe area。切记，在你的UITableViewCell中，所以的view都要添加到contentView。否则你的内容会被遮盖。

override init(style: UITableViewCellStyle, reuseIdentifier: String?) {        

    super.init(style: style, reuseIdentifier: reuseIdentifier)                 

    contentView.addSubview(label)

    //addSubview(label)   //这种方式是有问题的

}

很不幸，UICollectionView不是自适应的，系统没有帮你处理iPhone X。即使你所有的view都添加到contenView中，你的内容依然会被遮盖。所有，对于CollectionView， 你必须像处理Label，button那样，用前面提到的的方式针对safe area编程。

（第一次发技术文章，水平有限，如果大家看了有问题，请指出来。）