布局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)
}
}
网友评论