Autolayout代码实现举例-01使用线性公式

1.例子1

　　需求: 令一个宽高都为200的view永远显示在屏幕的中央。

 1  　　// 1.创建蓝色view
 2     UIView *blueView =[[UIView alloc] init];
 3     blueView.backgroundColor = [UIColor blueColor];
 4         // 使用Autolayout必须关闭下面这个属性, 意思是不要把AutoresizingMask应用到Contrainsts中
 5     blueView.translatesAutoresizingMaskIntoConstraints = NO;
 6         // 使用Autolayout之前必须把view加到父视图上
 7     [self.view addSubview:blueView];
 8
 9
10     // 2.对红色view添加约束
11     // 2.1.约束宽度
12     CGFloat width = 200;
13         // 创建约束对象, 实际是就是在表述线性公式  y = ax + b;
14     NSLayoutConstraint *widthConst = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:width];
15         // 与其他view无关的约束只需加在自己的约束集合中
16     [blueView addConstraint:widthConst];
17
18     // 2.2.约束高度
19     CGFloat height = 200;
20     NSLayoutConstraint *heightConst = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:height];
21     [blueView addConstraint:heightConst];
22
23     // 2.3.约束中心位置
24     NSLayoutConstraint *centerXConst = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
25         // 与其他view有关的约束加在离自己最近的父视图上
26     [self.view addConstraint:centerXConst];
27
28     NSLayoutConstraint *centerYConst = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0];
29     [self.view addConstraint:centerYConst];

结果:  竖屏 :     横屏: 

2.例子2

　　需求: 创建两个View, 一个蓝色, 一个红色,  蓝色距离屏幕最上面、左边、右边的距离为20, 使红色view的顶部与蓝色view的底部的间距为20，且两者的右边缘对齐。

 1 　　// 1.蓝色view
 2     UIView *blueView =[[UIView alloc] init];
 3     blueView.backgroundColor = [UIColor blueColor];
 4     blueView.translatesAutoresizingMaskIntoConstraints = NO;
 5     [self.view addSubview:blueView];
 6
 7     // 2.红色view
 8     UIView *redView =[[UIView alloc] init];
 9     redView.backgroundColor = [UIColor redColor];
10     redView.translatesAutoresizingMaskIntoConstraints = NO;
11     [self.view addSubview:redView];
12
13     // 3.蓝色view的约束
14     // 3.1.高度
15     CGFloat height = 40;
16     NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:height];
17     [blueView addConstraint:blueHeight];
18
19     // 3.2.左边间距
20     CGFloat margin = 20;
21     NSLayoutConstraint *leftMargin = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:margin];
22     [self.view addConstraint:leftMargin];
23
24     // 3.3.右边间距
25         // 注意constant的正负
26     NSLayoutConstraint *rightMargin = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-margin];
27     [self.view addConstraint:rightMargin];
28
29     // 3.4.顶部间距
30     NSLayoutConstraint *topMargin = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:margin];
31     [self.view addConstraint:topMargin];
32
33     // 4.红色view的约束
34     // 4.1.高度
35         // 注意这里redView的高度关联到blueView, 所以此约束必须加到他们共同的(且为最近的)父视图上, 否则引发崩溃
36     NSLayoutConstraint *redHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0];
37     [self.view addConstraint:redHeight];
38
39     // 4.2.左边缘
40     NSLayoutConstraint *leftEadge = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];
41     [self.view addConstraint:leftEadge];
42
43     // 4.3.右边间距 == blueView
44     NSLayoutConstraint *rightMarginRed = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0.0];
45     [self.view addConstraint:rightMarginRed];
46
47     // 4.4.顶部间距 == blueView底部 + 20
48     NSLayoutConstraint *topMarginRed = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:margin];
49     [self.view addConstraint:topMarginRed];

结果:  竖屏 :   横屏: