iOSSnapKit自动布局使用详解（Swift版Masonry）

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

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

对于自动布局：

我们在 StoryBoard 中可以使用约束实现，简单明了，但如果用纯代码来设置约束就很麻烦了

OC里面，我们常用的有Masonry，SDAutoLayout

Swift里，我们有SnapKit：GitHub下载链接

一、项目集成

pod 'SnapKit'

import SnapKit

SnapKit的使用方法

通过 snp.makeConstraints 方法给view添加约束，约束有几种，分别是边距，宽，高，左上右下距离，基准线。
同时，添加过约束后可以有修正，修正有位移修正（inset、offset）和倍率修正（multipliedBy）

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

.equalTo：等于 
.lessThanOrEqualTo：小于等于
.greaterThanOrEqualTo：大于等于

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

视图属性（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

对于如何使用SnapKit，这里简单讲一些常用的场景：

环境：Xcode8.1

语言：Swift3.0

场景1:

在view中心添加一个长宽200的view

  box1.snp.makeConstraints({ (make) in
                make.width.height.equalTo(200)
                make.center.equalTo(self.view)
            })

场景2:

在红色view里，添加一个子view，距离顶部30px

box1.backgroundColor = UIColor.red
            box2.backgroundColor = UIColor.green
            view.addSubview(box1)
            box1.addSubview(box2)
            box1.snp.makeConstraints({ (make) in
                
                make.width.height.equalTo(200)
                make.center.equalTo(self.view)
            })
            box2.snp.makeConstraints({ (make) in
                
                make.top.equalTo(box1.snp.top).offset(30)       //距离box1 30距离
                make.left.equalTo(box1)             //等效于 make.left.equalTo(box1.snp.left)
                make.right.equalTo(box1)
                make.height.equalTo(30)
                
            })

场景3:

添加两个view，高宽相等，绿色的紧靠红色上下排列

   box1.backgroundColor = UIColor.red
            box2.backgroundColor = UIColor.green
            view.addSubview(box1)
            view.addSubview(box2)
            box1.snp.makeConstraints({ (make) in     
                make.left.equalTo(20)      //距离左边20
                make.right.equalTo(-20)    //距离右边20，注意，这里要为负的20
                make.top.equalTo(100)
                make.height.equalTo(50)
            })
            box2.snp.makeConstraints({ (make) in
                
                make.top.equalTo(box1.snp.bottom)      //顶部靠着box1底部
                make.left.right.height.equalTo(box1)    //左右高和box1对齐
                
            })

场景4:

添加两个view，高宽相等，左右排列

box1.backgroundColor = UIColor.red
            box2.backgroundColor = UIColor.green
            view.addSubview(box1)
            view.addSubview(box2)
            box1.snp.makeConstraints({ (make) in
                make.width.height.equalTo(100)
                make.left.equalTo(view)
                make.top.equalTo(100)
            })
            box2.snp.makeConstraints({ (make) in
                
                make.size.equalTo(box1)             //大小等于box1
                make.top.equalTo(box1)              //顶部和box1对齐
                make.right.equalTo(view)
                
            })

场景5:

添加两个view，绿色大小为红色一半，上下排列

 box1.backgroundColor = UIColor.red
            box2.backgroundColor = UIColor.green
            view.addSubview(box1)
            view.addSubview(box2)
            box1.snp.makeConstraints({ (make) in
                
                make.size.equalTo(CGSize(width: 200, height: 200))
                make.centerX.equalTo(view)
                make.centerY.equalTo(view).offset(-100)     //中心点为view中心偏上100距离
            })
            box2.snp.makeConstraints({ (make) in
                
                make.size.equalTo(box1).multipliedBy(0.5)   //大小为box1一半
                make.centerX.equalTo(box1)
                make.top.equalTo(box1.snp.bottom).offset(20)
                
            })

场景6:

添加两个view，绿色在红色里面，内边距设置为依次10、20、30、40

 box1.backgroundColor = UIColor.red
            box2.backgroundColor = UIColor.green
            view.addSubview(box1)
            box1.addSubview(box2)
            box1.snp.makeConstraints({ (make) in
                make.width.height.equalTo(200)
                make.center.equalTo(self.view)
            })
            box2.snp.makeConstraints({ (make) in
                //内距box1边距分别为10、20、30、40
                make.edges.equalTo(box1).inset(UIEdgeInsetsMake(10, 20, 30, 40))
            })