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];
    //左边
    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];




}