自动布局、SnapKit、Layout之约束动画

布局Layout之约束动画

import UIKit

class ViewController: UIViewController {
    
    
    //属性:
    @IBOutlet weak var topConstraint: NSLayoutConstraint!
    
    @IBOutlet weak var widthConstraint: NSLayoutConstraint!
    

    override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
        
        
        UIView.animateWithDuration(1) {
            
            //改变约束的值的大小
            self.topConstraint.constant = 280
            self.widthConstraint.constant = 250
            
            //如果想要通过改变约束值去动画的改变视图的位置和大小必须添加下面的代码才能有效
            self.view.layoutIfNeeded()
            
        }
        
    }


}

原生方式添加约束

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //手写约束的步骤:
        //1.创建视图对象(不需要设置frame)
        let redView = UIView()
        redView.backgroundColor = UIColor.redColor()
        //2.将视图添加到界面
        self.view.addSubview(redView)
        //3.关闭Autoresizing
        redView.translatesAutoresizingMaskIntoConstraints = false
        
        //4.创建约束对象
        //NSLayoutConstraint:约束类
        //参数1的参数2 参数3 (参数4的参数5)*参数6+参数7
        //a.top
        //redView.Top = (self.view.Top)*1+50
        let top = NSLayoutConstraint.init(item: redView, attribute: .Top, relatedBy: .Equal, toItem: self.view, attribute: .Top, multiplier: 1, constant: 50)
        
        //b.left
        let left = NSLayoutConstraint.init(item: redView, attribute: .Left, relatedBy: .Equal, toItem: self.view, attribute: .Left, multiplier: 1, constant: 50)
        
        //c.right 
        let right = NSLayoutConstraint.init(item: redView, attribute: .Right, relatedBy: .Equal, toItem: self.view, attribute: .Right, multiplier: 1, constant:-50)
        
        //d.bottom
        let bottom = NSLayoutConstraint.init(item: redView, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1, constant:-200)
        
        //5.添加约束(注意添加约束的对象)
        self.view.addConstraints([top,left,right,bottom])
        
        //再添加一个绿色视图
        //1.创建视图对象
        let greenView = UIView()
        greenView.backgroundColor = UIColor.greenColor()
        //2.添加到界面上
        self.view.addSubview(greenView)
        //3.关闭Autoresizing
        greenView.translatesAutoresizingMaskIntoConstraints = false
        
        //4.创建约束
        //a.left
        let left2 = NSLayoutConstraint.init(item: greenView, attribute: .Left, relatedBy: .Equal, toItem: redView, attribute: .Left, multiplier: 1, constant: 0)
        //b.top
        let top2 = NSLayoutConstraint.init(item: greenView, attribute: .Top, relatedBy: .Equal, toItem: redView, attribute: .Bottom, multiplier: 1, constant: 30)
        //c.width
        let width2 = NSLayoutConstraint.init(item: greenView, attribute: .Width, relatedBy: .Equal, toItem: redView, attribute: .Width, multiplier: 0.5, constant: 0)
        //d.height
        let height2 = NSLayoutConstraint.init(item: greenView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .Height, multiplier: 0, constant: 60)
        
        //5.添加约束
        self.view.addConstraints([left2,top2,width2])
        greenView.addConstraint(height2)
        
        //注意:通过添加的约束必须能够确定视图的坐标和大小

        
        
        
    }

自动布局SnapKit

//将第三方库文件包含进来
import SnapKit
//SnapKit的作用:简便的通过代码添加约束,用法和Masonry一样


class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //1.创建视图对象
        let redView = UIView.init()
        redView.backgroundColor = UIColor.redColor()
        //2.添加到界面上
        self.view.addSubview(redView)
        
        //3.添加约束
        //参数:make,指的就是当前的视图(redView)
        redView.snp_makeConstraints { (make) in
            
            //a.left
            //redView的left 等于 self.view的left偏移20
            make.left.equalTo(self.view.snp_left).offset(20)
            //b.top
            make.top.equalTo(self.view.snp_top).offset(20)
            //c.right
            make.right.equalTo(self.view.snp_right).offset(-20)
            //d.bottom
            make.bottom.equalTo(self.view.snp_bottom).offset(-250)
        }
        
        //再创建一个绿色视图
        //1.创建视图对象
        let greenView = UIView()
        greenView.backgroundColor = UIColor.greenColor()
        //2.添加到界面上
        self.view.addSubview(greenView)
        
        //3.添加约束
        greenView.snp_makeConstraints { (make) in
            //1.left
            //greenView的left等于redView的left(注:如果后边的属性和前面的属性是一样的，后边属性名可以省略)
            make.left.equalTo(redView)
            //2.top
            make.top.equalTo(redView.snp_bottom).offset(20)
            //3.width
            make.width.equalTo(redView).multipliedBy(0.5)
            //4.height
            make.height.equalTo(60)
        }

SnapKit的应用

import UIKit
import SnapKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //1.创建视图
        let redView = UIView()
        let greenView  = UIView()
        let blueView = UIView()
        
        //2.设置背景颜色
        redView.backgroundColor = UIColor.redColor()
        greenView.backgroundColor = UIColor.greenColor()
        blueView.backgroundColor = UIColor.blueColor()
        
        //3.添加到界面上
        self.view.addSubview(redView)
        self.view.addSubview(greenView)
        self.view.addSubview(blueView)
        
        let margin: CGFloat = 20
        
        //4.添加约束
        //a.绿色视图
        greenView.snp_makeConstraints { (make) in
            make.left.equalTo(self.view).offset(margin)
            make.top.equalTo(self.view).offset(margin)
            make.right.equalTo(redView.snp_left).offset(-margin)
            make.bottom.equalTo(blueView.snp_top).offset(-margin)
            make.height.equalTo(redView)
            make.height.equalTo(blueView)
            make.width.equalTo(redView)
        }
        
        //b.红色视图
        redView.snp_makeConstraints { (make) in
            make.left.equalTo(greenView.snp_right).offset(margin)
            make.top.equalTo(self.view).offset(margin)
            make.right.equalTo(self.view).offset(-margin)
            make.bottom.equalTo(blueView.snp_top).offset(-margin)
            make.height.equalTo(greenView)
            make.height.equalTo(blueView)
            make.width.equalTo(greenView)
        }
        
        
        //c.蓝色视图
        blueView.snp_makeConstraints { (make) in
            make.left.equalTo(greenView)
            make.right.equalTo(redView)
            make.top.equalTo(greenView.snp_bottom).offset(margin)
            make.bottom.equalTo(self.view).offset(-margin)
            make.height.equalTo(greenView)
        }
        
        
        
        
        
    }