SnapKit自动布局(一)

也许你在写OC的时候已经用过了Masonry这个第三方库来写自动布局，今天我们来说说Swift版本的Masonry第三方库SnapKit

SnapKit

今天就先来用SnapKit来做一件简单的自动布局。

效果图

Show your code

let greenView = UIView()
        greenView.backgroundColor = UIColor.greenColor()
        let redView = UIView()
        redView.backgroundColor = UIColor.redColor()
        let blueView = UIView()
        blueView.backgroundColor = UIColor.blueColor()
        
        self.view.addSubview(greenView)
        self.view.addSubview(redView)
        self.view.addSubview(blueView)
        
        greenView.snp_makeConstraints { (make) -> Void in
            make.leading.top.equalTo(20)
            make.trailing.equalTo(redView.snp_leading).offset(-20)
            make.width.height.equalTo(redView)
            make.height.equalTo(blueView)
        }
        
        redView.snp_makeConstraints { (make) -> Void in
            make.top.equalTo(greenView.snp_top)
            make.trailing.equalTo(-20)
        }
        
        blueView.snp_makeConstraints { (make) -> Void in
            make.top.equalTo(greenView.snp_bottom).offset(20)
            make.leading.equalTo(greenView.snp_leading)
            make.trailing.equalTo(redView.snp_trailing)
            make.bottom.equalTo(-20)
        }

首先我们实例化了三个不同的View ,并给他们不同的背景颜色，添加到父视图中。

接下来就是我们使用SnapKit来自定义布局。

 greenView.snp_makeConstraints { (make) -> Void in
                 //距离父视图 左 和 上 为20
            make.leading.top.equalTo(20)
            //右边距离 redView 的左边 20 （要注意这里的参数-20）
            make.trailing.equalTo(redView.snp_leading).offset(-20)
            // 设置 greenView  的高度 和 宽度 和 redView 相同
            make.width.height.equalTo(redView)
            //设置 blueView 的高度也和 greenView相同
            make.height.equalTo(blueView)
        }
        
        redView.snp_makeConstraints { (make) -> Void in
        //设置红色视图 的顶部和 绿色一样
            make.top.equalTo(greenView.snp_top)
            //设置它的左边距离父视图 20
            make.trailing.equalTo(-20)
        }
        
         blueView.snp_makeConstraints { (make) -> Void in
         //设置 blueView 顶部距离绿色视图 底部 20
            make.top.equalTo(greenView.snp_bottom).offset(20)
            //设置左边 和 绿色视图左边一样
            make.leading.equalTo(greenView.snp_leading)
            //设置右边和红色视图右边一样
            make.trailing.equalTo(redView.snp_trailing)
            //设置底部距离父视图 20
            make.bottom.equalTo(-20)
        }