一.自動布局基礎知識
- VFL:Visual Format Language 可視化格式語言
H:水平方向
V：水平方向
| 表示父視圖 - 本身表示一段距離： -
- 表示指定距離： -距離-
注意：使用自動布局步驟：
1.使用自動布局(autolayout) frame就會失效字管，就不需要再去設置視圖的frame
使用代碼自動布局 需要禁用這個屬性：
translatesAutoresizingMaskIntoConstraints = NO
2.綁定視圖與字符串
3.添加約束 - 可視化語言編譯
可視化語言：
H:|-100-[view(>=100)]-100-|
V:|-150-[view(40)]
編譯：
橫向：距離父視圖左側(cè)100 視圖本身的寬度最小是100 距離父視圖右側(cè)是100
豎向：距離父視圖頂部150 視圖本身的高度是40 - 常見的兩個錯誤：
1.Unable to parse constraint format: Expected a view or '|' 丟了豎杠谷暮。
2.'Unable to parse constraint format: Unable to interpret '|' character, because the related view doesn't have a superview 在布局后把View放在父視圖上就會報這個錯 要初始化view時 就把它放在父視圖上。
二.具體實例解析 自動布局
1.先用一個簡單的例子來說明（可以全部寫在ViewDidLoad中）
UIView *view = [[UIView alloc]init];
view.backgroundColor = [UIColor greenColor];
[self.view addSubview:view];
// 1.禁用屬性
view.translatesAutoresizingMaskIntoConstraints = NO;
// 2.綁定視圖和字符串
NSDictionary *views = NSDictionaryOfVariableBindings(view);
// 3.添加約束
/*
第一個參數(shù)：VFL語句
第二個參數(shù)：options 基于哪一個選項 （基于哪個方向去計算布局）
第三個參數(shù)：metrics：綁定數(shù)值(NSNumber)與字符串
第四個參數(shù)：綁定視圖 與字符串
*/
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view(>=100)]-20-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[view(40)]" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
2.下面用一個比較復雜的例子來剖析自動布局（在viewDidLoad中調(diào)用loadDemo這個方法即可）
- (void)loadDemo{
// 1 創(chuàng)建三個視圖 紅/綠/藍/黃/橙色視圖
// 紅
UIView *redView = [self alive];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
// 綠
UIView *greenView = [self alive];
greenView.backgroundColor = [UIColor greenColor];
[self.view addSubview:greenView];
// 藍
UIView *blueView = [self alive];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
// 黃
UIView *yellowView = [self alive];
yellowView.backgroundColor = [UIColor yellowColor];
[self.view addSubview:yellowView];
// 橙
UIView *orangeView = [self alive];
orangeView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:orangeView];
[self.view addConstraints:[self portraitConstraints:redView :greenView :blueView yellowView:yellowView orangeView:orangeView]];
}
// 這樣寫完全是為了代碼的方便使用,創(chuàng)建對象的同時初始化控件
- (UIView *)alive
{
UIView *newView = [UIView new];
newView.translatesAutoresizingMaskIntoConstraints = NO;
return newView;
}
- (NSMutableArray *) portraitConstraints:(UIView *)redView :(UIView *)greenView :(UIView *)blueView yellowView:(UIView *)yellowView orangeView:(UIView *)orangeView{
NSMutableArray *array = [NSMutableArray array];
// 注1：紅色視圖的寬度大于等于10 小于30 黃色視圖的寬度大于40 小于120 水平
[array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redView(>=10,<=30)]-20-[greenView(>=40,<=120)]-20-[yellowView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView, greenView, yellowView)]];
// 注2：垂直方向 red高度V:100<= <=160 藍色 V:30<= <=60 橙色待定
[array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[redView(>=100,<=160)]-20-[blueView(>=30,<=60)]-[orangeView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView, blueView, orangeView)]];
// 和注2類似
[array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[greenView(>=100,<=160)]-20-[blueView(>=30,<=60)]-[orangeView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(greenView, blueView, orangeView)]];
// 和注2類似 或許有人會問 為什么得添加黃色和綠色横辆，原因很簡單，就是為了滿足各個約束谨履，避免造成約束不足
[array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[yellowView(>=100,<=160)]-20-[blueView(>=30,<=60)]-[orangeView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(yellowView, blueView, orangeView )]];
// 注3：控制blued的寬度
[array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-120-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView)]];
// 注4：為橙色高度添加約束條件
[array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueView]-20-[orangeView(>=blueView)]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView, orangeView)]];
// 注4：為橙色添加寬度約束條件
[array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[orangeView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView, orangeView)]];
return array;
}
