OC-Layout自动布局-AutoResizing&AutoLayout&

1.布局 Layout

什么是布局

是指在一个视图中，如何摆放它的子视图 （设置子视图的位置和大小）

如何布局？

方法一： 纯代码布局 （古老的方法）

理念：当屏幕发生变化时，自动执行一段代码，在代码中根据新的屏幕大小重新计算各个视图的frame，从而达到重新定位的目的

特点：功能强大，非常繁琐

-(void)viewDidLayoutSubviews {
[super viewDidLayoutSubviews];
//纯代码布局
CGFloat viewWidth = (self.view.bounds.size.width - 50) / 2;
CGRect frame = self.myView1.frame;
frame.origin.x = 20;
frame.origin.y = 20;
frame.size.width = viewWidth;
frame.size.height = 40;
self.myView1.frame = frame;

frame.origin.x += 10 + viewWidth;
self.myView2.frame = frame;
}

方法二： Auto Resizing 以前的一种自动布局技术

理念：根据屏幕的等比变化，同样等比调整视图的距离上下左右边缘的距离，或等比调整视图的大小

特点：简单易用

- (void)viewDidLoad {
[super viewDidLoad];
UIView *myView = [[UIView alloc]init];
myView.frame = CGRectMake(self.view.frame.size.width - 20 - 100, 20, 100, 40);
myView.backgroundColor = [UIColor redColor];
//手动设置 AutoResizing  这里和故事版中点亮红线的方向是反
myView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleBottomMargin;
[self.view addSubview:myView];
}

方法三：Auto Layout 最新的自动布局方法

理念：将视图所在的位置使用多个约束条件描述出来，当屏幕大小发生变化时，系统会自动根据设定的多个约束，由系统计算出 不违背所有条件的一个合适的frame

工作原理

通过一系列的“约束constraint”来描述视图的展示位置

什么是约束？代表一个条，只需要设定一些约束，则系统会根据这一堆约束，自动计算出符合约束的frame

如何创建约束？

方式一：用代码创建

方式二：在故事版中可视化配置

约束的两个原则

1.描述清楚 （x, y, w, h 全部通过约束描述出来）

2.互不冲突

使用代码创建AutoLayout约束

如何实现：

step1：创建约束对象 NSLayoutConstraint

step2：将约束对象加入到视图的父试图中

创建一个约束对象

方式一 ： 万能公式法

view1.attr < relation> view2.attr *multiplier + constant

文字描述：按键1距离视图的左边为20个点

公式描述：button1.left = self.view.left * 1 + 20

文字描述：按键1的宽度是按键2宽度的一半

公式描述：button1.width = button2.width * 0.5 + 0

文字描述：按键1的右边和按键2的左边间隔10

公式描述：button1.right = button2.left * 1 + 10

- (void)viewDidLoad {
[super viewDidLoad];
UIView *myView1 = [[UIView alloc]init];
myView1.backgroundColor = [UIColor redColor];
UIView *myView2 = [[UIView alloc]init];
myView2.backgroundColor = [UIColor greenColor];
[self.view addSubview:myView1];
[self.view addSubview:myView2];

//关闭系统 Autoresizing
myView1.translatesAutoresizingMaskIntoConstraints = NO;
myView2.translatesAutoresizingMaskIntoConstraints = NO;

/**创建左边view的约束对象**/
//左边距离屏幕左边 20
NSLayoutConstraint *c1 = [NSLayoutConstraint constraintWithItem:myView1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
//上边距离屏幕顶部 20
NSLayoutConstraint *c2 = [NSLayoutConstraint constraintWithItem:myView1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20];
//myView1的宽度 等于 myView2的宽度
NSLayoutConstraint *c3 = [NSLayoutConstraint constraintWithItem:myView1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:myView2 attribute:NSLayoutAttributeWidth multiplier:1 constant:0];
//高度为 40
NSLayoutConstraint *c4 = [NSLayoutConstraint constraintWithItem:myView1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:40];

//约束对象添加到父试图上
[self.view addConstraint:c1];
[self.view addConstraint:c2];
[self.view addConstraint:c3];
[self.view addConstraint:c4];

/**myView2 约束**/
//顶部
NSLayoutConstraint *c5 = [NSLayoutConstraint constraintWithItem:myView2 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view    attribute:NSLayoutAttributeTop multiplier:1 constant:20];
//高度
NSLayoutConstraint *c6 = [NSLayoutConstraint constraintWithItem:myView2 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil    attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:40];
//右边
NSLayoutConstraint *c7 = [NSLayoutConstraint constraintWithItem:myView2 attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view    attribute:NSLayoutAttributeRight multiplier:1 constant:-20];

c001
//左边
NSLayoutConstraint *c8 = [NSLayoutConstraint constraintWithItem:myView2 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:myView1    attribute:NSLayoutAttributeRight multiplier:1 constant:10];

//约束对象添加到父试图上
[self.view addConstraint:c5];
[self.view addConstraint:c6];
[self.view addConstraint:c7];
[self.view addConstraint:c8];
}

方法二： VFL 法 (Visual Format Language)

是什么？

一个字符串，具有一定的格式，不同的格式代表不同的约束，并且，一个字符串往往能一次性表达出多个约束

如何写VFL字符串?

- 文字：button1和button2之间的间距为30

- VFL：[button1]-30-[button]

- 文字：button1的宽度为50

- VFL：[button1(==50)] 或 [button1(50)]

- 文字：button1 距离 左边20，button2距离右边20， button1和button2间隔10， button1宽度和button2的宽度相等

- VFL: |-20-[button1(button2)]-10-[button2(button1)]-20-|

- 文字：button1 距离顶部 为20

- VFL: V:|-20-[button1]

- 文字：button1 和 button2 垂直方向间隔10

- VFL: V:[button1]-10-[button2]

VFL 特殊符号的含义

| 代表父视图的边缘

H:| 代表父试图的左边缘

V:| 代表父试图的上边缘

[] 代表一个子视图

() 代表一个宽度或高度的条件

-x- 代表间距是 x

-代表标准间距 8

- (void)viewDidLoad {
[super viewDidLoad];
UIView *view1 = [[UIView alloc]init];
view1.backgroundColor = [UIColor redColor];
UIView *view2 = [[UIView alloc]init];
view2.backgroundColor = [UIColor greenColor];
[self.view addSubview:view1];
[self.view addSubview:view2];

//关闭 autoresizing 自动翻译约束的 功能
view1.translatesAutoresizingMaskIntoConstraints = NO;
view2.translatesAutoresizingMaskIntoConstraints = NO;

//VFL表达式
//1.准备一个 VFL
NSString *hVFL = @"H:|-left-[view1]-space-[view2(view1)]-right-|";
//创建垂直方向约束
NSString *vVFL = @"V:|-top-[view1(40)]";

//创建一个对照表
NSDictionary *metricsDic = @{
@"left":@20,
@"right":@20,
@"space":@10,
@"top":@20};

//该宏会创建 一个字典， 该字典的value就是传入的对象， 该字典会自动使用传入的对象的名称 作为key
NSDictionary *dic = NSDictionaryOfVariableBindings(view1,view2);

NSArray<NSLayoutConstraint*> *constraints = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:metricsDic views:dic];

NSArray<NSLayoutConstraint*> *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:NSLayoutFormatAlignAllTop metrics:metricsDic views:dic];

//    NSArray<NSLayoutConstraint*> *constraints = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:nil views:@{@"view1":view1, @"view2":view2}];
//    NSArray<NSLayoutConstraint*> *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:NSLayoutFormatAlignAllTop metrics:nil views:@{@"view1":view1}];

[self.view addConstraints:constraints];
[self.view addConstraints:constraints2];

}