当前位置: > > > Swift - 自动布局库SnapKit的使用详解1(配置、使用方法、样例)

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

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添加约束,约束有几种,分别是边距,宽,高,左上右下距离,基准线。同时,添加过约束后可以有修正,修正有位移修正(insetoffset)和倍率修正(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
  • 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
    小心

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

    站长回复

    谢谢支持,很高兴你能喜欢我的文章,欢迎常来看看。