返回 导航

Swift

hangge.com

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

作者：hangge | 2016-03-31 08:40
SnapKit文章系列：（代码均已升级至Swift3）
Swift - 自动布局库SnapKit的使用详解1（配置、使用方法、样例） --- 当前文章
Swift - 自动布局库SnapKit的使用详解2（约束的更新、移除、重做）
Swift - 自动布局库SnapKit的使用详解3（约束优先级，约束做动画）
Swift - 自动布局库SnapKit的使用详解4（样例1：实现一个登录页面）
Swift - 自动布局库SnapKit的使用详解5（样例2：实现一个计算器界面）

为了适应各种屏幕尺寸，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.orange
        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.orange
        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 
//使当前视图对象的中心x坐标小于等于视图view2的左边的x坐标
make.centerX.lessThanOrEqualTo(view2.snp.left)

（2）视图关系（UIView/NSView） 
比如想让view.left 大于等于 label.left： 
make.left.greaterThanOrEqualTo(label)
这个其实等价于： 
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.orange
        self.view.addSubview(boxOutter)
        boxInner.backgroundColor = UIColor.green
        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.orange
        self.view.addSubview(box1)
        box2.backgroundColor = UIColor.green
        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(边缘） 
//让当前视图 的 上下左右(top,left,bottom,right) 等于 view2
make.edges.equalTo(view2)

（4）size(尺寸） 
//当前视图宽高 >= titleLabel
make.size.greaterThanOrEqualTo(titleLabel)

（5）center(中心） 
//当前视图与 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.orange
        self.view.addSubview(boxOutter)
        boxInner.backgroundColor = UIColor.green
        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。
import UIKit
import SnapKit

class ViewController: UIViewController {
    
    //外部方块
    lazy var boxOutter = UIView()
    //内部方块
    lazy var boxInner = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        boxOutter.backgroundColor = UIColor.orange
        self.view.addSubview(boxOutter)
        boxInner.backgroundColor = UIColor.green
        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 - 50, height = superview.height - 50
            make.size.equalTo(boxOutter).offset(-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.orange
        self.view.addSubview(boxOutter)
        boxInner.backgroundColor = UIColor.green
        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)
        }
    }
}
评论

全部评论（15）

回到顶部