NSLayoutConstraint - 系统自动布局（详解 s
原始图.png
竖屏图
在写代码前需要了解NSLayoutConstraint的作用，本文我门使用的NSLayoutConstraint的init方法(建议使用init方法,如果使用构造方法，则不会自动补全).
view.addConstraint(NSLayoutConstraint.init(item: view1, attribute: .left, relatedBy: .equal, toItem: view, attribute: .left, multiplier: 1, constant: 20))
view1(item):被约束的视图。
.left(attribute)：指定view1的属性attribute
.eauql(relatedBy):指定左右两边的视图的关系relation
.view(toItem):view1所参照的参照物.
.left(attribute):指定view.的属性attribute
1(multiplier):倍数
20(constan):指定一个与view2属性相加的浮点数constant
依据的公式是：view1.attr1 = view2.attr2*multiplier +constant
public enum NSLayoutRelation : Int {
case lessThanOrEqual视图关系小于等于
case equal视图关系等于
case greaterThanOrEqual视图关系大于等于
}
public enum NSLayoutAttribute : Int {
case left视图左边
case right视图右边
case top视图顶部
case bottom视图底部
case leading视图前边
case trailing视图后边
case width视图宽度
case height视图高度
case centerX视图中心的X值
case centerY视图中心的Y值
case lastBaseline视图的基准线
case notAnAttribute无属性
}
方法，属性，对应关系搞清楚了， 那就一个字撸。
//初始化，全局变量
let view1: UIView = UIView.init()
let view2: UIView = UIView.init()
let view3: UIView = UIView.init()
//
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
//子视图的颜色制作,以及添加到父视图
view1.backgroundColor = UIColor.red
view2.backgroundColor = UIColor.green
view3.backgroundColor = UIColor.yellow
view.addSubview(view1)
view.addSubview(view2)
view.addSubview(view3)
//关闭系统的自定义视图布局
view1.translatesAutoresizingMaskIntoConstraints = false
view2.translatesAutoresizingMaskIntoConstraints = false
view3.translatesAutoresizingMaskIntoConstraints = false
//Note:不要在布局里面使用子视图的x,y,width,height,例如view.addConstraint(NSLayoutConstraint.init(item: view2, attribute: .left, relatedBy: .equal, toItem: view, attribute: .left, multiplier: 2, constant: (20 + view1.bounds.size.width))),view1.bounds.size.width等于0
//view1视图的属性制作
//view1的left = view.left+20
view.addConstraint(NSLayoutConstraint.init(item: view1, attribute: .left, relatedBy: .equal, toItem: view, attribute: .left, multiplier: 1, constant: 20))
//view1的top = view.top+20
view.addConstraint(NSLayoutConstraint.init(item: view1, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1, constant: 20))
//view1的width =100
view.addConstraint(NSLayoutConstraint.init(item: view1, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .width, multiplier: 1, constant: 100))
//view1的height = 50
view.addConstraint(NSLayoutConstraint.init(item: view1, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1, constant: 50))
print("the height is \(view1.bounds.size.height)")
//view2
//view2的left = view.left+20+50
view.addConstraint(NSLayoutConstraint.init(item: view2, attribute: .left, relatedBy: .equal, toItem: view, attribute: .left, multiplier: 2, constant: (20 + 50)))
//view2的top = view1.bottom+20
view.addConstraint(NSLayoutConstraint.init(item: view2, attribute: .top, relatedBy: .equal, toItem: view1, attribute: .bottom, multiplier: 1, constant: 20))
//view2的width = view1.width
view.addConstraint(NSLayoutConstraint.init(item: view2, attribute: .width, relatedBy: .equal, toItem: view1, attribute: .width, multiplier: 1, constant:0))
//view2的height = view1.height *2 + 10
view.addConstraint(NSLayoutConstraint.init(item: view2, attribute: .height, relatedBy: .greaterThanOrEqual, toItem: view1, attribute: .height, multiplier: 2, constant:10))
//view3
//view3的left = view.left *2+20(view.left = 0)
view.addConstraint(NSLayoutConstraint.init(item: view3, attribute: .left, relatedBy: .equal, toItem: view, attribute: .left, multiplier: 2, constant: 20))
//view3的top = view2.bottom+30
view.addConstraint(NSLayoutConstraint.init(item: view3, attribute: .top, relatedBy: .equal, toItem: view2, attribute: .bottom, multiplier: 1, constant: 30))
//view3的width = 150
view.addConstraint(NSLayoutConstraint.init(item: view3, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .width, multiplier: 1, constant:150))
//view3的height = view2.height
view.addConstraint(NSLayoutConstraint.init(item: view3, attribute: .height, relatedBy: .equal, toItem: view2, attribute: .height, multiplier: 1, constant:0))
}
如果要做横屏适配的童鞋要注意会不会超屏了。
假设我将view的height改成100，然后横屏显示,结果可想超乎想象。
横屏.png
总结:玩法很多,套路很多,我所展现的只是很小的一部分。童鞋们多敲敲代码,多玩玩套路，有什么精彩的活着不懂的大家可以一起来交流。
