布局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.創(chuàng)建視圖對象(不需要設(shè)置frame)
let redView = UIView()
redView.backgroundColor = UIColor.redColor()
//2.將視圖添加到界面
self.view.addSubview(redView)
//3.關(guān)閉Autoresizing
redView.translatesAutoresizingMaskIntoConstraints = false
//4.創(chuàng)建約束對象
//NSLayoutConstraint:約束類
//參數(shù)1的參數(shù)2 參數(shù)3 (參數(shù)4的參數(shù)5)*參數(shù)6+參數(shù)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.創(chuàng)建視圖對象
let greenView = UIView()
greenView.backgroundColor = UIColor.greenColor()
//2.添加到界面上
self.view.addSubview(greenView)
//3.關(guān)閉Autoresizing
greenView.translatesAutoresizingMaskIntoConstraints = false
//4.創(chuàng)建約束
//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)
//注意:通過添加的約束必須能夠確定視圖的坐標(biāo)和大小
}
自動布局SnapKit
//將第三方庫文件包含進來
import SnapKit
//SnapKit的作用:簡便的通過代碼添加約束,用法和Masonry一樣
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//1.創(chuàng)建視圖對象
let redView = UIView.init()
redView.backgroundColor = UIColor.redColor()
//2.添加到界面上
self.view.addSubview(redView)
//3.添加約束
//參數(shù):make,指的就是當(dāng)前的視圖(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)
}
//再創(chuàng)建一個綠色視圖
//1.創(chuàng)建視圖對象
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的應(yīng)用
import UIKit
import SnapKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//1.創(chuàng)建視圖
let redView = UIView()
let greenView = UIView()
let blueView = UIView()
//2.設(shè)置背景顏色
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.藍(lán)色視圖
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)
}
}
