iOS开发 | swift中自动布局框架SnapKit的使用 - Swift 教程-OStack程序员社区-中国程序员成长平台

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

iOS开发 | swift中自动布局框架SnapKit的使用

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

OC有masonry，swift有SnapKit。

熟悉masonry的同学上手SnapKit非常快，因为语法很像。

这里记录一下常用的几个方法：

先创建一个红色view：

1
2
3
4

let redView = UIView()
self.view.addSubview(redView)

         
redView.backgroundColor = UIColor.red

创建约束

1
2
3
4
5
6

// 创建约束

redView.snp.makeConstraints { (make) in

    // 距离上左下右各20

    make.top.left.equalToSuperview().offset(20)

    make.bottom.right.equalToSuperview().offset(-20)
}

更新约束

1
2
3
4
5

// 更新约束

redView.snp.updateConstraints { (make) in

    // 距离底部100

    make.bottom.equalTo(-100)
}

重新设置约束

1
2
3
4
5

// 重新设置约束

redView.snp.remakeConstraints { (make) in

    // 距离四边100

    make.edges.equalTo(UIEdgeInsetsMake(100, 100, 100, 100))
}

label宽度自适应（不设置宽度即可）

1
2
3
4
5
6
7
8
9
10
11

// label宽度自适应(不设置宽度)
let label = UILabel()
self.view.addSubview(label)

label.text = "这是一个绿色label"
label.backgroundColor = UIColor.green
label.font = UIFont.systemFont(ofSize: 15)

label.snp.makeConstraints { (make) in

    make.left.equalToSuperview()

    make.height.equalTo(20)

    make.bottom.equalTo(-60)
}

并排的两个label，优先让其中一个宽度自适应（别扯我）

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

// 并排的两个label，优先让右边的label宽度自适应
 
// 左边的label
let leftLabel = UILabel()
self.view.addSubview(leftLabel)
leftLabel.backgroundColor = UIColor.lightGray

leftLabel.text = "这是左边的label"
leftLabel.font = UIFont.systemFont(ofSize: 12)
 
// 右边的label
let rightLabel = UILabel()
self.view.addSubview(rightLabel)
rightLabel.backgroundColor = UIColor.orange

rightLabel.text = "这是右边的label，优先宽度自适应内容"
rightLabel.font = UIFont.systemFont(ofSize: 12)
// 别扯我，谢谢(这就是右边label优先宽度自适应的关键代码)

rightLabel.setContentHuggingPriority(1000, for: UILayoutConstraintAxis.horizontal);
 

leftLabel.snp.makeConstraints { (make) in

    make.left.equalToSuperview()

    make.bottom.equalTo(-20)

    make.height.equalTo(20)
}
 

rightLabel.snp.makeConstraints { (make) in

    make.left.equalTo(leftLabel.snp.right)

    make.bottom.height.equalTo(leftLabel)

    make.right.equalToSuperview()
}