swift约束框架SnapKit使用

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›Swift 教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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

为了适应各种屏幕尺寸，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.orangeColor()

        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.orangeColor()

        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

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

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

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

1	`make.left.greaterThanOrEqualTo(label)`

这个其实等价于：

1	`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.orangeColor()

        self.view.addSubview(boxOutter)

        boxInner.backgroundColor = UIColor.greenColor()

        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.orangeColor()

        self.view.addSubview(box1)

        box2.backgroundColor = UIColor.greenColor()

        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(边缘）

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

（4）size(尺寸）

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

（5）center(中心）

1 2	`//当前视图与 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.orangeColor()

        self.view.addSubview(boxOutter)

        boxInner.backgroundColor = UIColor.greenColor()

        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，高度减50。

import UIKit

import SnapKit
 
class ViewController: UIViewController {

    //外部方块

    lazy var boxOutter = UIView()

    //内部方块

    lazy var boxInner = UIView()

    override func viewDidLoad() {

        super.viewDidLoad()

        boxOutter.backgroundColor = UIColor.orangeColor()

        self.view.addSubview(boxOutter)

        boxInner.backgroundColor = UIColor.greenColor()

        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 + 100, height = superview.height - 50

            make.size.equalTo(boxOutter).offset(CGSizeMake(50, -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.orangeColor()

        self.view.addSubview(boxOutter)

        boxInner.backgroundColor = UIColor.greenColor()

        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)

        }

    }
}

二、Swift - 自动布局库SnapKit的使用详解2（约束的更新、移除、重做）

在之前的文章中我介绍了如何使用SnapKit的 snp_makeConstraints 方法进行各种约束的设置。但有时我们的页面并不是一直固定不变的，这就需要修改已经存在的约束。本文介绍如何更新、移除、代替现有的约束。

1，删除约束

要实现对现有的约束进行更新或者移除，我们需要先将约束的结果赋值给一个局部变量或一个类属性，然后对这个约束的引用进行操作。
比如下面样例：开始时我们给橙色方块添加了个距屏幕上方40像素的约束，点击按钮后使用 uninstall() 方法把这个约束给移除。

import UIKit

import SnapKit
 
class ViewController: UIViewController {

    lazy var box = UIView()

    //保存约束的引用

    var topConstraint:Constraint?

    override func viewDidLoad() {

        super.viewDidLoad()

        box.backgroundColor = UIColor.orangeColor()

        self.view.addSubview(box)

        box.snp_makeConstraints { (make) -> Void in

            make.width.height.equalTo(150)

            make.centerX.equalTo(self.view)

            self.topConstraint = make.top.equalTo(self.view).offset(40).constraint

        }

    }

    //按钮点击

    @IBAction func btnTouch(sender: AnyObject) {

        //移除约束

        self.topConstraint?.uninstall()

    }
}

2，通过约束的引用来更新约束
还是以上面距屏幕上方40像素的约束为例，点击按钮后，通过调用约束引用的 updateOffset() 方法把距离修改成60像素。

import UIKit

import SnapKit
 
class ViewController: UIViewController {

    lazy var box = UIView()

    //保存约束的引用

    var topConstraint:Constraint?

    override func viewDidLoad() {

        super.viewDidLoad()

        box.backgroundColor = UIColor.orangeColor()
 
鲜花

握手

雷人

路过

鸡蛋