SnapKit入门教程

阅读本文大概须要20min，读完你能够了解SnapKit的一些基础用法和一些很是棒的特性！Enjoy it！

介绍

它的Github官方介绍语以下： SnapKit is a DSL to make Auto Layout easy on both iOS and OS X. SnapKit 提供一种更加简易的方式来应用自动布局

安装

SnapKit支持三种安装方式：Cocodpods、Carthage、手动拖入

• Cocoapods

  一、在Podfile文件中添加pod 'SnapKit', '~> 4.0.0'

  二、执行pod install

• Carthage

  一、 在Cartfile文件添加github "SnapKit/SnapKit" ~> 4.0.0

  二、执行carthage update

• 手动拖入项目

基础使用

OK，如今项目已经集成了SnapKit,下面来看一下基础的用法！

• 首先在使用的文件中导入SnapKitimport SnapKit
• 注意：在使用SnapKit以前必定要把相关子控件先添加到父View；在使用SnapKit以前必定要把相关子控件先添加到父View；在使用SnapKit以前必定要把相关子控件先添加到父View；

相关场景

• 子控件在父view居中，示例代码以下:

let button = UIButton(type: .custom)
    button.backgroundColor = UIColor.blue
    button.addTarget(self, action: #selector(buttonClick), for: .touchUpInside)
    view.addSubview(button)
    button.snp.makeConstraints { (make) in
        make.size.equalTo(CGSize(width: 100, height: 100))
        make.center.equalTo(view)
    }
复制代码

上面讲的是一个简单的一个view中有一个子控件的状况，下面来看一下一个view中的两个子控件如何布置约束。

• subView1头部距离subView2底部30

let button = UIButton(type: .custom)
    button.backgroundColor = UIColor.blue
    button.addTarget(self, action: #selector(buttonClick), for: .touchUpInside)
    bgView.addSubview(button)
    button.snp.makeConstraints { (make) in
        make.size.equalTo(CGSize(width: 100, height: 100))
        make.center.equalTo(bgView)
    }
        
    let bottomLabel = UILabel(frame: .zero)
    bottomLabel.text = "bottomLabel"
    bottomLabel.backgroundColor = UIColor.orange
    bgView.addSubview(bottomLabel)
    bottomLabel.snp.makeConstraints { (make) in
        make.top.equalTo(button.snp.bottom).offset(30) //注意此处button后面要加snp，不然是不起做用的
        make.size.equalTo(CGSize(width: 200, height: 50))
        make.centerX.equalTo(button)
    }
复制代码

说明： 使用make.center.equalTo(bgView)与make.center.equalTo(bgView.snp.center)是等效的，也就是说当你省略的时候，SnapKit默认是你前面写的layout，可是当你两个不一致时，好比你是下面的view距离上面的view的bottom偏移量是30的时候，就不能省略着写了。注意：若是你的项目中你对view添加了bottom的extension，你可能会把make.top.equalTo(button.snp.bottom).offset(30)写成make.top.equalTo(button.bottom).offset(30),这也是不对的，必须添加前面的snp。

到这里，相信你们对SnapKit的基础用法有了必定的了解。其实若是你们使用过Masonry的话对SnapKit的用法必定不会陌生，由于这两个库是一个团队出品的(开源万岁)！

下面来了解一下一些很是棒的特性。

很是棒的特性

• 设置一个子view的四边内边距据父view都为20，下面为代码示例：

button.snp.makeConstraints { (make) in
    make.edges.equalTo(bgView).inset(UIEdgeInsetsMake(20, 20, 20, 20))
    }

//上面代码和注释代码等同    
//        box.snp.makeConstraints { (make) -> Void in
//            make.top.equalTo(superview).offset(20)
//            make.left.equalTo(superview).offset(20)
//            make.bottom.equalTo(superview).offset(-20)
//            make.right.equalTo(superview).offset(-20)
//        }

复制代码

• SnapKit不单单能够设置等于，它也能够设置小于等于、大于等于和设定一个范围； 而且它还支持给left/right/centerY等属性设置上面的用法。 下面是代码示例：

let fzhLabel = UILabel()
    fzhLabel.text = "Dota2"
    fzhLabel.textColor = UIColor.black
    fzhLabel.backgroundColor = UIColor.blue
    fzhLabel.font = UIFont.systemFont(ofSize: 18)
    bgView.addSubview(fzhLabel)

    fzhLabel.snp.makeConstraints { (make) in
        make.left.top.equalTo(bgView).offset(20)
        make.height.equalTo(20)
        //设置label的最大宽度为200
        make.width.lessThanOrEqualTo(200)
}
//设置label的最小宽度为200
make.width.greaterThanOrEqualTo(200)
//设置label最小宽度为50，最大宽度为100
make.width.greaterThanOrEqualTo(50)
make.width.lessThanOrEqualTo(100)
//设置view的left小于等于该view的父view的左 + 10（view.left <= view.superview.left + 10）
make.left.lessThanOrEqualTo(10)
复制代码

• SnapKit也支持设置优先级，它能够放在约束链的最后，它既能够设置具体的值也可使用枚举（.low, .medium, .high, .require）下面是代码示例:

make.left.equalTo(label.snp.left).priority(500)
make.left.equalTo(label.snp.left).priority(.high)
复制代码

注意事项

• 该库支持iOS的最低版本是iOS8，因此iOS8如下是没法使用的
• 在使用SnapKit以前必定要把相关子控件先添加到父View
• SnapKit不支持IB
• SnapKit支持make.xxx.xxx.equalTo(bgView).offset(20)的用法，如:make.left.top.equalTo(bgView).offset(20)(该控件的左和上距bgview左和上偏移量为20)

结语

到这里本文就结束了，本文只是大概的讲了一下SnapKit的基本用法，其余的你们能够查看它的文档再详细了解。若是你们在使用的时候遇到什么问题能够写在下面的评论中，你们一块儿研究！

官方文档

• SnapKit Github地址
• SnapKit Document