Swift - 自动布局库SnapKit的使用详解

Swift - 自动布局库SnapKit

来源:原文

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

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

原文出自:www.hangge.com转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1097.html

例子:计算器

1,SnapKit介绍

SnapKit是一个优秀的第三方自适应布局库,它可以让iOS、OS X应用更简单地实现自动布局(Auto Layout)。

GtiHub地址:https://github.com/SnapKit/SnapKit

2,SnapKit配置

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

Swift - 自动布局库SnapKit的使用详解_第1张图片

(2)在 工程 ->General->Embedded Binaries中点击加号,添加SnapKit库到项目中来

Swift - 自动布局库SnapKit的使用详解_第2张图片

3.SnapKit的使用方法

通过snp.makeConstraints方法给view添加约束

约束:边距,宽,高,左右上下距离,基准线。

同时,添加过约束后可以修正,修正有位移修正(inset、offset)和倍率修正(multipliedBy)

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

.equalTo:等于

.lessThanOrEqualTo:小于等于

.greaterThanOrEqualTo:大于等于

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


4.给视图的各种属性设置约束

(1)width、height属性

自动布局允许宽度、高度设置为常量值。

make.height.equalTo(20)

make.width.equalTo(self.buttonSize.width)

//当前视图与label的顶部齐平

make.top.equalTo(label.snp.top)

(2)使用snp.updateConstraints更新约束

我们还可以用snp.updateConstraints方法来代替snp.makeConstraints进行约束的更新,这个更新操作通常放在UIViewController的updateViewConstraints()方法中,或者UIView的updateConstraints()方法中执行,这样视图约束需要更新的时候会自动调用。

比如下面样例,我们使用snp.updateConstraints()方法设置橙色视图的宽度约束为与屏幕等宽,这样不管设备如何旋转,视图都回自动更新约束撑满屏幕。

Swift - 自动布局库SnapKit的使用详解_第3张图片

importUIKit

importSnapKit

classViewController:UIViewController{

lazyvarbox =UIView()

overridefuncviewDidLoad() {

super.viewDidLoad()

box.backgroundColor =UIColor.orange

self.view.addSubview(box)

box.snp.makeConstraints { (make) ->Voidin

make.width.equalTo(self.view)

make.height.equalTo(150)

make.centerX.equalTo(self.view)

}

}

//视图约束更新

overridefuncupdateViewConstraints() {

self.box.snp.updateConstraints{ (make) ->Voidin

//视图宽度与屏幕等宽

make.width.equalTo(self.view)

}

super.updateViewConstraints()

}

}


5、约束优先级

我们使用SnapKit的时候,还可以定义约束的优先级。这样当约束出现冲突的时候,优先级高的约束覆盖优先级低的约束。具体优先级可以放在约束链的结束处。

(1)优先级设置

通过priority()方法我们可以设置任意的优先级,接受的参数是0-1000的数字。比如:priority(600)。

如果不设置的话,默认的优先级是1000。

(2)使用优先级的样例

下面我们在屏幕中央放置一个100*100的橙色方块,给其定义了长宽尺寸小于等于屏幕的大小的默认优先级约束。同时,每次点击屏幕的时候,会更新放大它的尺寸。但由于这个约束的优先级是低,所有方块顶到屏幕边缘后就会不再放大。

Swift - 自动布局库SnapKit的使用详解_第4张图片
Swift - 自动布局库SnapKit的使用详解_第5张图片
Swift - 自动布局库SnapKit的使用详解_第6张图片

importUIKit

importSnapKit

classViewController:UIViewController{

lazyvarbox =UIView()

varscacle = 1.0

overridefuncviewDidLoad() {

super.viewDidLoad()

//单击监听

lettapSingle=UITapGestureRecognizer(target:self,action:#selector(tapSingleDid))

tapSingle.numberOfTapsRequired=1

tapSingle.numberOfTouchesRequired=1

self.view.addGestureRecognizer(tapSingle)

box.backgroundColor =UIColor.orange

self.view.addSubview(box)

box.snp.makeConstraints { (make) ->Voidin

//视图居中

make.center.equalTo(self.view)

//初始宽、高为100(优先级低)

make.width.height.equalTo(100 *self.scacle).priority(250)

//最大尺寸不能超过屏幕

make.width.height.lessThanOrEqualTo(self.view.snp.width)

make.width.height.lessThanOrEqualTo(self.view.snp.height)

}

}

//点击屏幕

functapSingleDid(){

self.scacle += 0.5

self.box.snp.updateConstraints{ (make) ->Voidin

//放大视图(优先级最低)

make.width.height.equalTo(100 *self.scacle).priority(250)

}

}

}

2,带有动画效果

配合UIView.animate(withDuration: ),我们可以在约束改变的时候有动画效果。

还是以上面的样例演示,不够这次点击屏幕时橙色视图放大的时候会有过渡,而不是一下就变大。

Swift - 自动布局库SnapKit的使用详解_第7张图片

importUIKit

importSnapKit

classViewController:UIViewController{

lazyvarbox =UIView()

varscacle = 1.0

overridefuncviewDidLoad() {

super.viewDidLoad()

//单击监听

lettapSingle=UITapGestureRecognizer(target:self,action:#selector(tapSingleDid))

tapSingle.numberOfTapsRequired=1

tapSingle.numberOfTouchesRequired=1

self.view.addGestureRecognizer(tapSingle)

box.backgroundColor =UIColor.orange

self.view.addSubview(box)

box.snp.makeConstraints { (make) ->Voidin

//视图居中

make.center.equalTo(self.view)

//初始宽、高为100(优先级低)

make.width.height.equalTo(100 *self.scacle).priority(250)

//最大尺寸不能超过屏幕

make.width.height.lessThanOrEqualTo(self.view.snp.width)

make.width.height.lessThanOrEqualTo(self.view.snp.height)

}

}

//视图约束更新

overridefuncupdateViewConstraints() {

self.box.snp.updateConstraints{ (make) ->Voidin

//放大尺寸(优先级低)

make.width.height.equalTo(100 *self.scacle).priority(250)

}

super.updateViewConstraints()

}

//点击屏幕

functapSingleDid(){

self.scacle += 0.5

//告诉self.view约束需要更新

self.view.setNeedsUpdateConstraints()

//动画

UIView.animate(withDuration: 0.3) {

self.view.layoutIfNeeded()

}

}

}

原文出自:www.hangge.com转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1114.html

你可能感兴趣的:(Swift - 自动布局库SnapKit的使用详解)