初识 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 适配的时候 以最小尺寸设备 为基准

二、使用示例:

 #import "ViewController.h"

 @interface ViewController ()

 @end

 @implementation ViewController

 - (void)viewDidLoad {
     [super viewDidLoad];
     [self demo3];

 }

 // 一个视图
 - (void)demo1 {
     UIView *view = [[UIView alloc] init];
 //    如果使用autoLayout 那么 禁止使用 translatesAutoresizingMaskIntoConstraints 属性

     view.translatesAutoresizingMaskIntoConstraints = NO;
     view.backgroundColor = [UIColor redColor];
     [self.view addSubview:view];

 //    VFL 横向 竖向布局
 //    @"H:" 设置横向布局
 //    @"H:|-20-"设置横向布局 距离父视图的左侧边距
 //    @"H:|-20-[view(>=200)]" 设置横向布局 距离父视图的左侧边距， 设置view横向的 尺寸不能小于200
 //    @"H:|-20-[view(>=200)]-20-|" 设置横向布局 距离父视图的左侧边距， 设置view横向的 尺寸不能小于200  设置右侧与父视图之间的间距

 //    @"V:|-40-[view(>=200)]-20-|"设置竖向布局 距离顶部边距40，设置view的尺寸不能小于400，设置底部与父视图之间的边距为20
 //    使用VFL 需要把视图的对象（视图）与 他的名字（字符串）绑定起来
     NSDictionary *views = NSDictionaryOfVariableBindings(view);
 //    给 self.view 和 view 添加约束
 //    addConstraints 添加约束的 方法
 //    NSLayoutConstraint 添加具体约束的一个类

 //    + (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
 //    format VFL;
 //    opts 同意按照某个方向去布局;
 //    metrics 绑定的参数;
 //    views 绑定的视图参数
     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view(>=200)]-20-|" options: metrics:nil views:views]];
     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view(>=200)]-20-|" options: metrics:nil views:views]];

 }

 - (void)demo2 {
     UIView *view = [[UIView alloc] init];
     //    如果使用autoLayout 那么 禁止使用 translatesAutoresizingMaskIntoConstraints 属性

     view.translatesAutoresizingMaskIntoConstraints = NO;
     view.backgroundColor = [UIColor redColor];
     [self.view addSubview:view];

     UIView *view1 = [[UIView alloc] init];
     //    如果使用autoLayout 那么 禁止使用 translatesAutoresizingMaskIntoConstraints 属性

     view1.translatesAutoresizingMaskIntoConstraints = NO;
     view1.backgroundColor = [UIColor brownColor];
     [self.view addSubview:view1];

     NSDictionary *views = NSDictionaryOfVariableBindings(view,view1);
 //    红色view 的横向约束
     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view(>=200)]-20-|" options: metrics:nil views:views]];
 //    红色view 的竖向约束
     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view(50)]-10-[view1]" options: metrics:nil views:views]];

 //    棕色view1 的横向约束
     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view1(>=200)]-20-|" options: metrics:nil views:views]];
 //    棕色view1 的竖向约束
     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view]-10-[view1(50)]" options: metrics:nil views:views]];

         UIView *view2 = [[UIView alloc] init];
     view2.translatesAutoresizingMaskIntoConstraints = NO;
     view2.backgroundColor = [UIColor greenColor];
     [self.view addSubview:view2];
 //    view2 横向
 //    view2 竖向
 }

 //  优化 demo2
 - (void)demo3 {
     UIView *view = [[UIView alloc] init];
     //    如果使用autoLayout 那么 禁止使用 translatesAutoresizingMaskIntoConstraints 属性

     view.translatesAutoresizingMaskIntoConstraints = NO;
     view.backgroundColor = [UIColor redColor];
     [self.view addSubview:view];

     UIView *view1 = [[UIView alloc] init];
     //    如果使用autoLayout 那么 禁止使用 translatesAutoresizingMaskIntoConstraints 属性

     view1.translatesAutoresizingMaskIntoConstraints = NO;
     view1.backgroundColor = [UIColor brownColor];
     [self.view addSubview:view1];

     NSDictionary *views = NSDictionaryOfVariableBindings(view,view1);
     //    红色view 的横向约束
     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view(>=200)]-20-|" options: metrics:nil views:views]];
     //    红色view 棕色view1 的竖向约束
 //    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view(50)]-10-[view1(50)]" options:0 metrics:nil views:views]];

 //  红色view 棕色view1 两个视图的高度 都是50
 //    [view1(view)];
     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view(50)]-10-[view1(view)]" options: metrics:nil views:views]];

     //    棕色view1 的横向约束
     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view1(>=200)]-20-|" options: metrics:nil views:views]];

 //    //    棕色view1 的竖向约束
 //    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view]-10-[view1(50)]" options:0 metrics:nil views:views]];

 }

三、模拟器运行效果图

demo1 运行效果：

demo2 运行效果：

demo3 运行效果：