SnapKit是基于NSLayoutConstraint封装的一个轻量级的布局框架.区别于iOS9.0中苹果引入的系统框架NSLayoutAnchor。其实NSLayoutAnchor是一个工厂类,类似NSNumber这样的设计思想.

开始

当我们开始写约束的时候，一般都从
view.snp.makeConstraints()方法开始，通过点击snp我们进到里面看，发现它是下面这个样子：

// ConstraintView 实际上就是UIView
extension ConstraintView {
    public var snp: ConstraintViewDSL {
        return ConstraintViewDSL(view: self)
    }
}

我们现在知道了实现约束的功能其实跟这个ConstraintViewDSL类有很大关系，这里也是我们理解snapKit库如何实现开始的地方，下面开始详细介绍这个类。

ConstraintViewDSL

查看源码我们发现这个类遵守了一个ConstraintAttributesDSL协议。这个协议里面没有定义属性和方法，默认实现了一些功能：

protocol ConstraintAttributesDSL: ConstraintBasicAttributesDSL { }
extension ConstraintAttributesDSL {
    public var top: ConstraintItem {
        return ConstraintItem(target: self.target, attributes: ConstraintAttributes.top)
    }
    public var bottom: ConstraintItem {
        return ConstraintItem(target: self.target, attributes: ConstraintAttributes.bottom)
    }
    ...
}

现在我们还不知道ConstraintItem是做什么的，不过没关系，下面会详细说到。接着回到ConstraintViewDSL类里面，可以看到有一些我们常用到的方法：

public func makeConstraints(_ closure: (_ make: ConstraintMaker) -> Void) {
    ConstraintMaker.makeConstraints(item: self.view, closure: closure)
}
public func updateConstraints(_ closure: (_ make: ConstraintMaker) -> Void) {
    ConstraintMaker.updateConstraints(item: self.view, closure: closure)
}

讲到这里我们可以了解到，项目中常用到的view.snp.makeConstraints() 方法和 view.snp.bottom 其实都是在ConstraintViewDSL类里面定义的。那现在关于ConstraintViewDSL类我们就先讲到这吧，下面我们重点去了解ConstraintMaker和ConstraintItem是干什么的。

ConstraintMaker

写一段最简单的代码，让ConstraintMaker和我们见见面。

view.snp.makeConstraints({make: ConstraintMaker in 
    make.top.equalTo(20)
})

这是我们有疑问，为什么作者不直接在ConstraintMaker上面写约束呢，给我们ConstraintViewDSL类有什么用呢，下面我们将这种框架核心简单来实现下，站在作者的角度去看待问题：

1. 首先我们自己来定义一个ConstraintMaker类，内部实现如下：

class ConstraintMaker {
    
    var item: UIView
    var descriptions = [Constraint]()
    
    init(item: UIView) {
        self.item = item
    }
    
    static func prepareConstraints(item: UIView, closure: (_ make: ConstraintMaker) -> Void) -> [Constraint] {
        let maker = ConstraintMaker(item: item)
        closure(maker)
        return maker.descriptions
    }
    
    static func makeConstraints(item: UIView, closure: (_ make: ConstraintMaker) -> Void) {
        let constraints = prepareConstraints(item: item, closure: closure)
        for constraint in constraints {
            constraint.active()
        }
    }
}

extension ConstraintMaker {
    
    var bottom: ConstraintMakerExtendable {
        // 这里先简单实现下ConstraintAttributes
        let attr = ConstraintAttributes()
        return makeExtendableWithAttributes(attr)
    }
    
    var top: ConstraintMakerExtendable {
        // 这里先简单实现下ConstraintAttributes
        let attr = ConstraintAttributes()
        return makeExtendableWithAttributes(attr)
    }
    
    private func makeExtendableWithAttributes(_ attributes: ConstraintAttributes) -> ConstraintMakerExtendable {
        // 这里存在着将ConstraintAttributes对象转化成了Constraint对象
        let constraint = Constraint()
        descriptions.append(constraint)
        return ConstraintMakerExtendable()
    }
}

这些就是snapKit实现约束的核心方法了，为了不报错，这里把剩下的几个辅助的类也定义了，它们内部只实现了一些简单的方法：

class Constraint {
    func active() { print("开始布局啦") }
}

class ConstraintMakerExtendable {
    func calc() { print("计算约束") }
}

class ConstraintAttributes {
    static var top = ConstraintAttributes()
    static var bottom = ConstraintAttributes()
}

接着我们还需要定义一个ConstraintViewDSL类，用来承载具体的约束：

class ConstraintViewDSL {
    
    internal let view: UIView
    
    internal init(view: UIView) {
        self.view = view
    }
    
    public func makeConstraints(_ closure: (_ make: ConstraintMaker) -> Void) {
        ConstraintMaker.makeConstraints(item: self.view, closure: closure)
    }
}

extension UIView {
    var snp: ConstraintViewDSL {
        return ConstraintViewDSL(view: self)
    }
}

大功告成，现在我们也可以自己写一个约束库了，在外面调用：

let view1 = UIView()
view1.snp.makeConstraints { (make) in
    let bottom: ConstraintMakerExtendable = make.bottom
    bottom.calc()
    
    let top: ConstraintMakerExtendable = make.top
    top.calc()
}

打印如下：

计算约束
计算约束
开始布局啦
开始布局啦

回到ConstraintMaker中继续讲

SnapKit的作者写了很多的类，当我们第一眼看到这么多类，会觉得无从下手，不知道从哪开始阅读，下面我大概整理了一下，约束的过程。

// 一条完整的约束一般是这样的：
make.top.left.equalTo().offset().priority()

//链式调用的关系如下：
make: ConstraintMaker
    .top: ConstraintMakerExtendable
        .left: ConstraintMakerExtendable(继承自下面的ConstraintMakerRelatable)
             .equalTo: ConstraintMakerRelatable
                      .offset: ConstraintMakerEditable（继承自下面的ConstraintMakerPriortizable）
                              .priority: ConstraintMakerPriortizable

// .offset、.priority类继承关系
ConstraintMakerEditable -> ConstraintMakerPriortizable -> ConstraintMakerFinalizable
// .top、.left、.equalTo类继承关系
ConstraintMakerExtendable -> ConstraintMakerRelatable

通过阅读源码可以看到，调用view.snp.makeConstraints()方法，实际上内部是先调用prepareConstraints方法将约束准备好，在调用activate（）将约束添加到视图上：

internal static func makeConstraints(item: LayoutConstraintItem, closure: (_ make: ConstraintMaker) -> Void) {
    let constraints = prepareConstraints(item: item, closure: closure)
    for constraint in constraints {
        constraint.activateIfNeeded(updatingExisting: false)
    }
}

activeate方法作为添加约束内部实际调用的是:

NSLayoutConstraint.activate(layoutConstraints)

这个方法我们比较熟悉，是系统添加约束的方法，只是activate方法做了一层封装，当然这个方法除了单纯添加约束也可作为更新约束使用，下面会详细讲解到。

image

// maker对象调用makeConstraints方法，开始加工
func makeConstraints() {
    // 获得半成品
    let constraints = prepareConstraints(item: item, closure: closure)
    // 开始加工
    for constraint in constraints {
        constraint.activateIfNeeded(updatingExisting: false)
    }
}

我们继续看ConstraintMaker中的加工的机器:

func makeExtendableWithAttributes(_ attributes: ConstraintAttributes) -> ConstraintMakerExtendable {
    // 一条完整的约束描述类 类似 make.top.equal(10)
    let description = ConstraintDescription(item: self.item, attributes: attributes)
    //将单条约束添加到数组中
    self.descriptions.append(description)
    // 它可以实现多个属性链式操作 有了它 就可以实现 make.width.height 这种特性 
    // 其中width是ConstraintMaker的属性 height是ConstraintMakerExtendable的属性
    // 它们都是ConstraintMakerExtendable类型
    return ConstraintMakerExtendable(description)
}

有了这个ConstraintMakerExtendable类就可以通过链式调用比如.width方法，.height方法添加一些约束，来一步步完善ConstraintDescription类

ConstraintDescription可以看成是Constraint脚手架，在一步步添加约束时操作的都是ConstraintDescription类，等将所有约束添加到数组中，准备下一步生产时，会拿到它内部的constraint属性（Constraint类型）进行操作。

题外话，既然makeConstraints（）方法内部执行了两步操作，那我们就可以利用这个特性，在视图有多种布局的时候，可以用到prepareConstraints方法，将布局提前装载好，然后根据状态执行不同显示效果，代码如下：

let v1 = View()
let v2 = View()
self.container.addSubview(v1)
self.container.addSubview(v2)

let constraints = v1.snp.prepareConstraints { (make) -> Void in
    make.edges.equalTo(v2)
    return
}

//打印 self.container.snp_constraints.count == 0,

for constraint in constraints {
    constraint.activate()
}

//打印 self.container.snp_constraints.count == 4,

for constraint in constraints {
    constraint.deactivate()
}

//打印 self.container.snp_constraints.count == 0,

再来讲讲 .equalTo()

其实和它类似的方法有很多包括：.equalToSuperview(), .lessThanOrEqualTo(), .lessThanOrEqualToSuperview(), .greaterThanOrEqualTo(), .greaterThanOrEqualToSuperview（）实现的功能类似。相同点在是它内部调用的是同一个方法：

func relatedTo(_ other: ConstraintRelatableTarget, relation: ConstraintRelation, file: String, line: UInt) -> ConstraintMakerEditable {

这个方法返回一个ConstraintMakerEditable类型，用于对约束添加附加的操作（offset偏移量，priority优先级）。进入到这个方法内部，我们将核心代码提取出来：

func relatedTo(_ other: ConstraintRelatableTarget) -> ConstraintMakerEditable {
    if let other = other as? ConstraintItem {
        //这里处理参数类似于equalTo(view.snp.bottom)
    } else if let other = other as? ConstraintView {
        //这里处理参数类似于equalTo(view)
    } else if let other = other as? ConstraintConstantTarget {
        //这里处理参数类似于equalTo(50)
    } else if let other = other as? ConstraintLayoutGuide {
        //这里处理参数类似于equalTo(layoutGuide)
    }
}

let v1 = View()
let g1 = UILayoutGuide()

self.container.addSubview(v1)
self.container.addLayoutGuide(g1)
            
v1.snp.makeConstraints { (make) -> Void in
    make.top.equalTo(g1).offset(50)
    make.left.equalTo(g1.snp.top).offset(50)
}

如何实现make.top.equalTo(view)和make.top.equalTo(view.snp.top)效果一样？

通过查看ConstraintMakerRelatable类下面的relatedTo()方法,我们可以看到在传入不同类型的参数时（view和view.snp.top分别为UIView类型和ConstraintItem类型），方法内部经过处理，全部转化成了ConstraintItem处理，这时，我们猜想当参数类型是UIView时，是否自动转为了ConstraintItem类型，带着这个疑问我们接着看：

在relatedTo方法中关于视图的判断逻辑是这样子的：

if let other = other as? ConstraintView {
    related = ConstraintItem(target: other, attributes: ConstraintAttributes.none)
}

如果传入的是视图对象，则ConstraintItem对象的attributes就置为了.none,应该和这个有关，我们在来了解一下ConstraintAttributes是做什么的？

ConstraintAttributes

这是一个结构体类型，它遵守两个协议，通过这个字面量协议和多选协议，完成以组合的形式加入约束，最后通过layoutAttributes数组，对接到NSLayoutConstraint.Attribute中，下面我们来实现一个：

enum LayoutAttribute: CustomDebugStringConvertible {
    case left
    case right
    case top
    case width
    
    var debugDescription: String {
        switch self {
        case .left: return "左边"
        case .right: return "右边"
        case .top: return "上边"
        case .width: return "宽度"
        }
    }
}

struct ConstraintAttributes: OptionSet, ExpressibleByIntegerLiteral {

    typealias IntegerLiteralType = UInt

    var rawValue: UInt

    init(rawValue: UInt) {
        self.rawValue = rawValue
    }

    init(_ rawValue: UInt) {
        self.init(rawValue: rawValue)
    }

    init(integerLiteral value: IntegerLiteralType) {
        self.init(value)
    }

    static var none: ConstraintAttributes { return 0 }
    static var left: ConstraintAttributes { return 1 }
    static var right: ConstraintAttributes { return 2 }
}

extension ConstraintAttributes {
    var layoutAttributes:[LayoutAttribute] {
        var attrs = [LayoutAttribute]()
        if contains(ConstraintAttributes.left) { attrs.append(.left) }
        if contains(ConstraintAttributes.right) { attrs.append(.right) }
        if contains(ConstraintAttributes.none) { /*什么都不做*/ }
        return attrs
    }
}

在外面调用：

let attributes: ConstraintAttributes = [.left, .right]
let description = attributes.layoutAttributes.map{ $0.debugDescription }
print(description)
//["左边", "右边"]

另外我们还有一种简便的方式来实现ConstraintAttributes支持多选的方式：

struct ConstraintAttributes: OptionSet {
    
    var rawValue: Int
    
    init(rawValue: Int) {
        self.rawValue = rawValue
    }
    
    static var none = ConstraintAttributes(rawValue: 1 << 0)
    static var left = ConstraintAttributes(rawValue: 1 << 1)
    static var right = ConstraintAttributes(rawValue: 1 << 2)
}

我们在实现过程中没有使用字面量协议ExpressibleByIntegerLiteral，直接用的位于运算，和SnapKit作者实现的效果相同。

回到刚才的问题，如果在ConstraintItem构造方法(target: AnyObject?, attributes: ConstraintAttributes)中attributes传入.none,它表示对layoutAttributes数组不添加NSLayoutConstraint.Attribute元素。

因为SnapKit是对NSLayoutConstraint的封装，我们有必要说一说NSLayoutConstraint这个类了，它的构造方法如下：

/*
 item: 指定需要添加约束的视图一
 attribute: 指定视图一需要约束的属性
 relatedBy: 指定视图一和视图二添加约束的关系
 toItem: 指定视图一依赖关系的视图二；可为nil
 attribute: 指定视图一所依赖的视图二的属性，若view2=nil，该属性设置 NSLayoutAttributeNotAnAttribute
 multiplier: 系数
    情况一：设置A视图的高度 = A视图高度 * multiplier + constant；此时才会起作用；
    情况二：设置A视图和其他视图的关系或 toItem=nil，multiplier设置不等于0即可，若等于0会crash；
 constant: 常量
 
 layoutConstraint: 返回生成的约束对象
*/
NSLayoutConstraint(item view1: Any,
    attribute attr1: NSLayoutConstraint.Attribute,
    relatedBy relation: NSLayoutConstraint.Relation,
    toItem view2: Any?, 
    attribute attr2: NSLayoutConstraint.Attribute,
    multiplier: CGFloat, 
    constant c: CGFloat)

通过文档介绍说该方法实际上就是满足一个数学关系view1.attr1 = view2.attr2 * multiplier + constant

image

回到刚才的ConstraintItem类，对比NSLayoutConstraint的构造方法，仔细观察它就能发现，我们加的约束无非就是这样的关系：

owningView.ConstraintItem = view1 + attr1 
toView.ConstraintItem = view2 + attr2 

通过创建两个ConstraintItem就能完成基本的约束。了解这点就知道ConstraintItem的作用了。

通过查看源码发现在Constraint类的便利构造方法中，对NSLayoutConstraint进行了一层封装。包括equalTo(view.snp.top) 和 equalTo(view)实现一样的效果，都在这里做了逻辑处理。

最后再来介绍Constraint类

先来看这句代码

let constraint: Constraint = make.top.equal(20).constraint

我们经常在外面这样使用Constraint这个类，其中ConstraintDescription的作用是用于生产Constraint类，ConstraintDescription的创建在ConstraintMaker类的makeExtendableWithAttributes方法中。

实现一个动画效果

var constraint: Constraint?

view.snp.makeConstraints { (make) in
    constraint = make.top.equalToSuperview().offset(10).constraint
}

UIView.animateWithDuration(0.3, {
    constraint?.update(inset: 20)
    self.container.layoutIfNeeded
})

通常我们查看一个视图下面是否包含约束时，一般会直接调用view.constraints.isEmpty 来判断，严谨来讲某个视图下可能会包含一些约束，但这些约束是"不活跃的", 对视图显示不造成任何影响，所以判断条件需要改一下：

extension UIView {
    var isConstraintEmpty: Bool {
        return self.constraints.filter { $0.isActive }.isEmpty
    }
}