Autolayout代碼實現舉例-01使用線性公式

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];

 

結果:  豎屏 :   橫屏: