• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

swift约束框架SnapKit使用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
 
为了适应各种屏幕尺寸,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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import UIKit
import SnapKit
 
class ViewControllerUIViewController {
    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)
        }
    }
}
由于长宽都一样,我们还可以串连视图属性,增加可读性:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import UIKit
import SnapKit
 
class ViewControllerUIViewController {
    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)
比如将宽度和高度属性设置为常量值:
1
2
3
make.height.equalTo(20)
make.width.equalTo(20)
make.top.equalTo(42)

6,给视图的各种属性设置约束
(1)width、height属性
自动布局允许宽度、高度设置为常量值。
1
2
3
4
make.height.equalTo(20)
make.width.equalTo(self.buttonSize.width)
//当前视图与label的顶部齐平
make.top.equalTo(label.snp_top)

(2) left、right、top、centerX、centerY等其他属性
这些属性直接设置常量值,表示他们相对于父容器的相对约束条件。比如我们将绿色方块放置橙色方块内部的右下角位置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import UIKit
import SnapKit
 
class ViewControllerUIViewController {
     
    //外部方块
    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)
        }
    }
}
当然也可以使用与其他视图的关系来添加约束。比如:下面绿色方块视图大小同上面橙色方块相同,下面视图与上面视图左侧平齐,下面视图顶部与上面视图底部平齐。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import UIKit
import SnapKit
 
class ViewControllerUIViewController {
     
    //方块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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import UIKit
import SnapKit
 
class ViewControllerUIViewController {
     
    //外部方块
    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))
        }
    }
}
上面边距的偏移设置实际上相当于如下形式:
1
2
3
4
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。

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import UIKit
import SnapKit
 
class ViewControllerUIViewController {
     
    //外部方块
    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 
下面将绿色视图的尺寸设置成橙色视图一半大小。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import UIKit
import SnapKit
 
class ViewControllerUIViewController {
     
    //外部方块
    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() 方法把这个约束给移除。
            
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import UIKit
import SnapKit
 
class ViewControllerUIViewController {
     
    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像素。
            
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import UIKit
import SnapKit
 
class ViewControllerUIViewController {
     
    lazy var box = UIView()
     
    //保存约束的引用
    var topConstraint:Constraint?
     
    override func viewDidLoad() {
        super.viewDidLoad()
         
        box.backgroundColor = UIColor.orangeColor()

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
[Swift]LeetCode309.最佳买卖股票时机含冷冻期|BestTimetoBuyandSellStockwithCooldow ...发布时间:2022-07-13
下一篇:
3-01 Swift中的PCH发布时间:2022-07-13
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap