初识 AutoLayout

一、使用"公式":

1、frame: 原点以及自身的位置来确定自身的位置

2、autoLayout: 根据参照视图的位置  来定义自己的位置

3、autoLayout: 相对布局  约束视图和视图之间的关系 来分配 屏幕上的位置

4、使用VFL(Visual Format Language 视觉格式化语言)通过添加字符，来约束视图和视图之间的关系

5、使用autoLayout 必须把 translatesAutoresizingMaskIntoConstraints禁用才可以使用相对布局是找一个参照物 拿参照物当做基础，设置他和参照物的相对距离 来设置自己的位置

6、FVL 需有 横 竖 两个方向的约束  ( 1、“H:”(横向),

2、“V:”(竖向),

3、“|” (表示它的父视图),

4、“-50-”(表示两个视图之间的间距),

5、“[textField]”）

7、H:横向

| 表示他的父视图

-50- 表示后面视图 与前面视图的距离 （后面视图是textField，前面视图是他的父视图）

[textField(>=200)] 要约束视图的宽  (>=200)允许最小的宽度是200  如果是竖向  就是允许最小的高度

@"H:|-50-[textField(>=200)]-50-|"

距离坐边原点距离50   右边边界距离50    允许视图的最小宽度是200

8、使用 autoLayout 适配的时候 以最小尺寸设备 为基准

二、使用示例:

  1 #import "ViewController.h"
  2
  3 @interface ViewController ()
  4
  5 @end
  6
  7 @implementation ViewController
  8
  9 - (void)viewDidLoad {
 10     [super viewDidLoad];
 11     [self demo3];
 12
 13 }
 14
 15 // 一个视图
 16 - (void)demo1 {
 17     UIView *view = [[UIView alloc] init];
 18 //    如果使用autoLayout 那么 禁止使用 translatesAutoresizingMaskIntoConstraints 属性
 19
 20     view.translatesAutoresizingMaskIntoConstraints = NO;
 21     view.backgroundColor = [UIColor redColor];
 22     [self.view addSubview:view];
 23
 24
 25 //    VFL 横向 竖向布局
 26 //    @"H:" 设置横向布局
 27 //    @"H:|-20-"设置横向布局 距离父视图的左侧边距
 28 //    @"H:|-20-[view(>=200)]" 设置横向布局 距离父视图的左侧边距， 设置view横向的 尺寸不能小于200
 29 //    @"H:|-20-[view(>=200)]-20-|" 设置横向布局 距离父视图的左侧边距， 设置view横向的 尺寸不能小于200  设置右侧与父视图之间的间距
 30
 31
 32 //    @"V:|-40-[view(>=200)]-20-|"设置竖向布局 距离顶部边距40，设置view的尺寸不能小于400，设置底部与父视图之间的边距为20
 33 //    使用VFL 需要把视图的对象（视图）与 他的名字（字符串）绑定起来
 34     NSDictionary *views = NSDictionaryOfVariableBindings(view);
 35 //    给 self.view 和 view 添加约束
 36 //    addConstraints 添加约束的 方法
 37 //    NSLayoutConstraint 添加具体约束的一个类
 38
 39 //    + (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
 40 //    format VFL;
 41 //    opts 同意按照某个方向去布局;
 42 //    metrics 绑定的参数;
 43 //    views 绑定的视图参数
 44     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view(>=200)]-20-|" options:0 metrics:nil views:views]];
 45     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view(>=200)]-20-|" options:0 metrics:nil views:views]];
 46
 47 }
 48
 49
 50 - (void)demo2 {
 51     UIView *view = [[UIView alloc] init];
 52     //    如果使用autoLayout 那么 禁止使用 translatesAutoresizingMaskIntoConstraints 属性
 53
 54     view.translatesAutoresizingMaskIntoConstraints = NO;
 55     view.backgroundColor = [UIColor redColor];
 56     [self.view addSubview:view];
 57
 58
 59     UIView *view1 = [[UIView alloc] init];
 60     //    如果使用autoLayout 那么 禁止使用 translatesAutoresizingMaskIntoConstraints 属性
 61
 62     view1.translatesAutoresizingMaskIntoConstraints = NO;
 63     view1.backgroundColor = [UIColor brownColor];
 64     [self.view addSubview:view1];
 65
 66
 67     NSDictionary *views = NSDictionaryOfVariableBindings(view,view1);
 68 //    红色view 的横向约束
 69     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view(>=200)]-20-|" options:0 metrics:nil views:views]];
 70 //    红色view 的竖向约束
 71     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view(50)]-10-[view1]" options:0 metrics:nil views:views]];
 72
 73 //    棕色view1 的横向约束
 74     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view1(>=200)]-20-|" options:0 metrics:nil views:views]];
 75 //    棕色view1 的竖向约束
 76     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view]-10-[view1(50)]" options:0 metrics:nil views:views]];
 77
 78
 79         UIView *view2 = [[UIView alloc] init];
 80     view2.translatesAutoresizingMaskIntoConstraints = NO;
 81     view2.backgroundColor = [UIColor greenColor];
 82     [self.view addSubview:view2];
 83 //    view2 横向
 84 //    view2 竖向
 85 }
 86
 87 //  优化 demo2
 88 - (void)demo3 {
 89     UIView *view = [[UIView alloc] init];
 90     //    如果使用autoLayout 那么 禁止使用 translatesAutoresizingMaskIntoConstraints 属性
 91
 92     view.translatesAutoresizingMaskIntoConstraints = NO;
 93     view.backgroundColor = [UIColor redColor];
 94     [self.view addSubview:view];
 95
 96
 97     UIView *view1 = [[UIView alloc] init];
 98     //    如果使用autoLayout 那么 禁止使用 translatesAutoresizingMaskIntoConstraints 属性
 99
100     view1.translatesAutoresizingMaskIntoConstraints = NO;
101     view1.backgroundColor = [UIColor brownColor];
102     [self.view addSubview:view1];
103
104
105     NSDictionary *views = NSDictionaryOfVariableBindings(view,view1);
106     //    红色view 的横向约束
107     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view(>=200)]-20-|" options:0 metrics:nil views:views]];
108     //    红色view 棕色view1 的竖向约束
109 //    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view(50)]-10-[view1(50)]" options:0 metrics:nil views:views]];
110
111 //  红色view 棕色view1 两个视图的高度 都是50
112 //    [view1(view)];
113     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view(50)]-10-[view1(view)]" options:0 metrics:nil views:views]];
114
115     //    棕色view1 的横向约束
116     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view1(>=200)]-20-|" options:0 metrics:nil views:views]];
117
118 //    //    棕色view1 的竖向约束
119 //    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view]-10-[view1(50)]" options:0 metrics:nil views:views]];
120
121
122 }

三、模拟器运行效果图

demo1 运行效果：

demo2 运行效果：

demo3 运行效果：