Swift - 自动布局库SnapKit的使用详解1（配置、使用方法、样例）

2016-03-31 发布：hangge 阅读：52653

SnapKit文章系列：（代码均已升级至Swift3）
Swift - 自动布局库SnapKit的使用详解1（配置、使用方法、样例） --- 当前文章
Swift - 自动布局库SnapKit的使用详解2（约束的更新、移除、重做）
Swift - 自动布局库SnapKit的使用详解3（约束优先级，约束做动画）
Swift - 自动布局库SnapKit的使用详解4（样例1：实现一个登录页面）
Swift - 自动布局库SnapKit的使用详解5（样例2：实现一个计算器界面）

为了适应各种屏幕尺寸，iOS 6后引入了自动布局（Auto Layout）的概念，通过使用各种 Constraint（约束）来实现页面自适应弹性布局。（想了解更多可查看我原来写的这篇文章：Swift - 使用Auto Layout和Size Classes实现页面自适应弹性布局）

在 StoryBoard 中使用约束实现自动布局很方便，但如果用纯代码来设置约束就很麻烦了。这里向大家推荐一个好用的第三方布局库：SnapKit（其前身是 Masonry，一个OC版的布局库）

1，SnapKit介绍

SnapKit是一个优秀的第三方自适应布局库，它可以让iOS、OS X应用更简单地实现自动布局（Auto Layout）。
GtiHub地址：https://github.com/SnapKit/SnapKit

2，SnapKit配置

（1）将下载下来的SnapKit项目的 SnapKit.xcodeproj 拖进自己的项目目录当中

（2）在工程 -> General -> Embedded Binaries 中点击加号，添加SnapKit库到项目中来

3，先看一个简单的使用样例
在页面正中央放置一个100*100的正方形view

import UIKit
import SnapKit

class ViewController: UIViewController {
    lazy var box = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        box.backgroundColor = UIColor.orange
        self.view.addSubview(box)
        
        box.snp.makeConstraints { (make) -> Void in
            make.width.equalTo(100)
            make.height.equalTo(100)
            make.center.equalTo(self.view)
        }
    }
}

由于长宽都一样，我们还可以串连视图属性，增加可读性：

import UIKit
import SnapKit

class ViewController: UIViewController {
    lazy var box = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        box.backgroundColor = UIColor.orange
        self.view.addSubview(box)
        
        box.snp.makeConstraints { (make) -> Void in
            make.width.height.equalTo(100)
            make.center.equalTo(self.view)
        }
    }
}

4，SnapKit的使用方法
通过 snp.makeConstraints 方法给view添加约束，约束有几种，分别是边距，宽，高，左上右下距离，基准线。同时，添加过约束后可以有修正，修正有位移修正（inset、offset）和倍率修正（multipliedBy）

语法一般是： make.equalTo 或 make.greaterThanOrEqualTo 或 make.lessThanOrEqualTo + 倍数和位移修正。

.equalTo：等于
.lessThanOrEqualTo：小于等于
.greaterThanOrEqualTo：大于等于

注意：使用 snp.makeConstraints 方法的元素必须事先添加到父元素的中，例如：self.view.addSubview(view)

5，约束条件参数支持如下三种类型：
（1）视图属性（ViewAttribute）

视图属性（ViewAttribute）	布局属性（NSLayoutAttribute）
view.snp.left	NSLayoutAttribute.Left
view.snp.right	NSLayoutAttribute.Right
view.snp.top	NSLayoutAttribute.Top
view.snp.bottom	NSLayoutAttribute.Bottom
view.snp.leading	NSLayoutAttribute.Leading
view.snp.trailing	NSLayoutAttribute.Trailing
view.snp.width	NSLayoutAttribute.Width
view.snp.height	NSLayoutAttribute.Height
view.snp.centerX	NSLayoutAttribute.CenterX
view.snp.centerY	NSLayoutAttribute.CenterY
view.snp.baseline	NSLayoutAttribute.Baseline

//使当前视图对象的中心x坐标小于等于视图view2的左边的x坐标
make.centerX.lessThanOrEqualTo(view2.snp.left)

（2）视图关系（UIView/NSView）

比如想让view.left 大于等于 label.left：

make.left.greaterThanOrEqualTo(label)

这个其实等价于：

make.left.greaterThanOrEqualTo(label.snp.left)

（3）严格检测（Strick Checks）
比如将宽度和高度属性设置为常量值：

make.height.equalTo(20)
make.width.equalTo(20)
make.top.equalTo(42)

6，给视图的各种属性设置约束
（1）width、height属性
自动布局允许宽度、高度设置为常量值。

 
make.height.equalTo(20)
make.width.equalTo(self.buttonSize.width)
//当前视图与label的顶部齐平
make.top.equalTo(label.snp.top)

（2） left、right、top、centerX、centerY等其他属性
这些属性直接设置常量值，表示他们相对于父容器的相对约束条件。比如我们将绿色方块放置橙色方块内部的右下角位置。

import UIKit
import SnapKit

class ViewController: UIViewController {
    
    //外部方块
    lazy var boxOutter = UIView()
    //内部方块
    lazy var boxInner = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        boxOutter.backgroundColor = UIColor.orange
        self.view.addSubview(boxOutter)
        boxInner.backgroundColor = UIColor.green
        boxOutter.addSubview(boxInner)
        
        boxOutter.snp.makeConstraints { (make) -> Void in
            make.width.height.equalTo(200)
            make.center.equalTo(self.view)
        }
        
        boxInner.snp.makeConstraints { (make) -> Void in
            make.width.height.equalTo(100)
            make.right.equalTo(0)
            make.bottom.equalTo(0)
        }
    }
}

当然也可以使用与其他视图的关系来添加约束。比如：下面绿色方块视图大小同上面橙色方块相同，下面视图与上面视图左侧平齐，下面视图顶部与上面视图底部平齐。

import UIKit
import SnapKit

class ViewController: UIViewController {
    
    //方块1
    lazy var box1 = UIView()
    //方块2
    lazy var box2 = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        box1.backgroundColor = UIColor.orange
        self.view.addSubview(box1)
        box2.backgroundColor = UIColor.green
        self.view.addSubview(box2)
        
        box1.snp.makeConstraints { (make) -> Void in
            make.left.equalTo(20)
            make.right.equalTo(-20)
            make.height.equalTo(40)
            make.top.equalTo(20)
        }
        
        box2.snp.makeConstraints { (make) -> Void in
            make.width.height.equalTo(box1)
            make.left.equalTo(box1) //等同于 make.left.equalTo(box1.snp.left)
            make.top.equalTo(box1.snp.bottom)
        }
    }
}

（3）edges(边缘）

//让当前视图 的 上下左右(top,left,bottom,right) 等于 view2
make.edges.equalTo(view2)

（4）size(尺寸）

//当前视图宽高 >= titleLabel
make.size.greaterThanOrEqualTo(titleLabel)

（5）center(中心）

//当前视图与 button1中心相同 （centerX 和 centerY）
make.center.equalTo(button1)

7，位移修正与倍率修正
（1）内位移修正：inset
比如下图中绿色视图view，它距离父视图上、左、下、右边距分别是10、15、20、25

import UIKit
import SnapKit

class ViewController: UIViewController {
    
    //外部方块
    lazy var boxOutter = UIView()
    //内部方块
    lazy var boxInner = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        boxOutter.backgroundColor = UIColor.orange
        self.view.addSubview(boxOutter)
        boxInner.backgroundColor = UIColor.green
        boxOutter.addSubview(boxInner)
        
        boxOutter.snp.makeConstraints { (make) -> Void in
            make.width.height.equalTo(200)
            make.center.equalTo(self.view)
        }
        
        boxInner.snp.makeConstraints { (make) -> Void in
            make.edges.equalTo(boxOutter).inset(UIEdgeInsetsMake(10, 15, 20, 25))
        }
    }
}

上面边距的偏移设置实际上相当于如下形式：

make.top.equalTo(boxOutter).offset(10)
make.left.equalTo(boxOutter).offset(15)
make.bottom.equalTo(boxOutter).offset(-20)
make.right.equalTo(boxOutter).offset(-25)

（2）外位移修正：offset

下面让绿色视图比橙色视图宽度、高度均减50。

import UIKit
import SnapKit

class ViewController: UIViewController {
    
    //外部方块
    lazy var boxOutter = UIView()
    //内部方块
    lazy var boxInner = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        boxOutter.backgroundColor = UIColor.orange
        self.view.addSubview(boxOutter)
        boxInner.backgroundColor = UIColor.green
        boxOutter.addSubview(boxInner)
        
        boxOutter.snp.makeConstraints { (make) -> Void in
            make.width.height.equalTo(200)
            make.center.equalTo(self.view)
        }
        
        boxInner.snp.makeConstraints { (make) -> Void in
            make.center.equalTo(boxOutter)
            // make width = superview.width - 50, height = superview.height - 50
            make.size.equalTo(boxOutter).offset(-50)
        }
    }
}

（3）倍率修正：multipliedBy

下面将绿色视图的尺寸设置成橙色视图一半大小。

import UIKit
import SnapKit

class ViewController: UIViewController {
    
    //外部方块
    lazy var boxOutter = UIView()
    //内部方块
    lazy var boxInner = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        boxOutter.backgroundColor = UIColor.orange
        self.view.addSubview(boxOutter)
        boxInner.backgroundColor = UIColor.green
        boxOutter.addSubview(boxInner)
        
        boxOutter.snp.makeConstraints { (make) -> Void in
            make.width.height.equalTo(200)
            make.center.equalTo(self.view)
        }
        
        boxInner.snp.makeConstraints { (make) -> Void in
            make.center.equalTo(boxOutter)
            // make width = superview.width / 2, height = superview.height / 2
            make.size.equalTo(boxOutter).multipliedBy(0.5)
        }
    }
}

15楼

2018-08-24 01:32

小李哥

楼主你好，请问下，使用SnapKit布局之后，如何获取view的高宽呢？我使用View.frame.size.width输出的是0.0

站长回复：
你应该是设置SnapKit布局之后就立刻去获取宽高吧，这时布局可能还没完全结束，自然得到的是0.0。
解决办法是稍等一会再去获取宽高，或者获取前调用view.layoutIfNeeded()方法强制更新下布局。
14楼

2018-01-05 16:52

沸腾

你好，请问为什么我在工程里添加的只有macOS的，没有iOS的呢？我选macOS的之后，在ViewController.swift里写import SnapKit后报错显示"No such module 'SnapKit' "。我Swift 4/Xcode 9.2。

站长回复：
就是用macOS的没错，你再编译试试呢。
13楼

2017-09-29 13:45

蠢货

航哥，请问为什么我拖进去的SnapKit.xcodeproj只有macOS,没有iOS呢

站长回复：
没有iOS的话选macOS一样的。
12楼

2017-05-11 16:09

古诗

航哥，我想问一下像Masonry中
UIView *lastView;
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(lastView ? lastView.bottom : @0);
make.left.equalTo(@0);
make.width.equalTo(contentView.width);
make.height.equalTo(@(height));
}];
make.top.equalTo(lastView ? lastView.bottom : @0); 这种写法在swift的Snapkit应该怎么写呢？

站长回复：
试试这个：make.top.equalTo(lastView != nil ? lastView!.snp.bottom : 0)
11楼

2017-04-26 14:24

凯

航歌作者。。问一下，这个Snapkit可用说可用，但一直有警告，看好像说原方法删除了

站长回复：
我测试了下，没有警告啊。你那边哪里会报，报什么警告？
10楼

2017-04-26 13:35

凯

您好，我用这个SnapKit提示方法都删除了？能用是可以用，但很多警告，不知作者你那里碰到了吗？看到回复一下，非常感谢

站长回复：
我测试了下，没有警告啊。你那边哪里会报，报什么警告？
9楼

2017-03-30 21:02

ioser

snapkit 和 masonry什么关系？

站长回复：
SnapKit前身就是是Masonry。只不过Masonry是OC写的，而SnapKit是Swift写的。
8楼

2017-03-23 16:24

咔客

不行啊导入后识别不了啊

站长回复：
我又测试了下，导入是没问题的啊，不清楚你那边是什么情况。
7楼

2017-03-15 09:33

pheromone

赞!!!!!!!!!!!!

站长回复：
多谢夸奖!
6楼

2017-03-04 17:27

apthfinder

我用 cocoapod 导入 snapkit, 编译没问题,可是无法调用代码. swift3.0.有最新的 demo 么?

站长回复：
我又使用CocoaPod测试了下，编译使用都是没问题的，不太清楚你那边是什么情况。
5楼

2016-07-13 19:41

别叫我小白

很好的SnapKit引导教程，对于我这个iOS开发小白来说真的是太关键了。好网站，果断收藏！！！

站长回复：
很高兴你能喜欢我写的文章。欢迎常来，我会持续更新下去的。
4楼

2016-07-04 17:13

无忧乐活

使用snapkit布局之后，如何获得控件的宽高呢？
我有多个标签，在同一行内。但是具体数量未知，每个标签的宽度未知。我希望每个标签的间距是10。这种情况怎么做？

站长回复：
比如你有ui1，ui2，ui3三个控件从左到右排列，间隔是10。
ui2.snp_makeConstraints { (make) -> Void in
make.left.equalTo(ui1.snp_right).offset(10)
}
ui3.snp_makeConstraints { (make) -> Void in
make.left.equalTo(ui2.snp_right).offset(10)
}
3楼

2016-05-23 09:42

肉球人

航哥，您的SWIFT文章真的都很不错，简直就是指路的明灯啊。很赞。
对于这个SnapKit，我想请教下，是不是还有cocoa那种引入以后install的办法？

不然感觉如果以后官方升级，每次都要拖入自己项目？

站长回复：
当然可以，CocoaPods现在已经能够很好地支持Swift了。下个月迟些的时候我会写篇相关文章。
2楼

2016-04-17 15:32

SkyGrass

航哥，我加入SnapKit之后，Build Failed 啊。然后我单独打开SnapKit, 里面报错，我用的是xCode7.1.1. SnapKit是从guitab下载的。。。。

站长回复：
可能你的版本还不够高，我用的是Xcode7.3。你升级下再试试看呢？
1楼

2016-04-01 11:24

小心

写得很棒，支持。从你的站点获益良多，多谢！加油！

站长回复：
谢谢支持，很高兴你能喜欢我的文章，欢迎常来看看。