iOS 开发之 AutoLayout 自动布局

iOS 开发之 AutoLayout 自动布局

frame 原点自身的尺寸 来确定自身的位置

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

autoLayout 约束视图和视图的关系来分配屏幕上的位置

 

// 使用VFL（Visual Format Language视觉格式语言）通过添加字符串来约束视图和视图之间的关系

使用 autoLayout，必须把 translatesAutoresizingMaskIntoConstraints禁用才可以使用

相对布局是找一个参照物 拿参照物当做基础，设置他和参照物的相对距离来设置自己的位置

 

VFL 需有横竖两个方向的约束 H:横向  V:竖向  |表示他的父视图  -50-表示两个视图的间距

 

 

H:横向

| 表示他的父视图

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

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

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

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

 

 

V: 竖向

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

VFL  横向竖向布局

@"H:" 设置横向布局

@"V:" 设置竖向布局

设置横向布局 距离参照视图的左侧边距

@"H:|-20-"

@"H:[view]-20-"

@"H:|-20-[view(200)]" view的宽  永远是200

@"H:|-20-[view(otherView)]" view的宽 与otherView的宽相同

@"H:|-20-[view(>=200)]" 设置横向布局距离参照视图的左侧边距设置view横向的尺寸不能低于200

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

视图使用属性的时候绑定 key 需要绑定它真实的名字  _titleLable

self.titleLable = _titleLable

一个视图

- (void)demo1
{
    UIView *view = [[UIView alloc]init];
//    如果使用 autoLayout 下面这个属性必须禁用
    view.translatesAutoresizingMaskIntoConstraints = NO;
    view.backgroundColor = [UIColor grayColor];
    [self.view addSubview:view];
    
//    VFL 横向 竖向 布局
//    横向  @"H:" 设置横向布局
//    @"H:|-20-" 设置横向布局 距离父视图的左侧边距
//    @"H:|-20-[view(>=200)]" 设置横向布局 距离父视图的左侧边距 设置view 横向的尺寸，不能低于200
//    @"H:|-20-[view(>=200)]-20|" 设置横向布局 距离父视图的左侧边距 设置view 横向的尺寸，不能低于200,设置右侧与父视图之间的间距
    
//    竖向布局
//    @"V:|-40-[view(>400)]-20-|"
    
//    使用VFL 需把视图的对象（视图）与他的名字（字符串）绑定起来
    
    NSDictionary *views = NSDictionaryOfVariableBindings(view);
    
//    给self.view 和view 添加约束
//    addConstraint 添加约束
//    NSLayoutConstraint 具体添加约束的一个类
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view(>=200)]-20-|" options:0 metrics:nil views:views]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view(>=200)]-20-|" options:0 metrics:nil views:views]];
    

//    Format: VFL
//    options : 同意按照某个反向去布局
//    metrics 绑定的参数
//    views 绑定视图的参数
    
}

两个视图的相对布局

// 两个视图
- (void)demo2
{
    UIView *view = [[UIView alloc]init];
//    如果使用 autoLayout 下面这个属性必须禁用
    view.translatesAutoresizingMaskIntoConstraints = NO;
    view.backgroundColor = [UIColor grayColor];
    [self.view addSubview:view];
    
    
    
    UIView *view1 = [[UIView alloc]init];
    //    如果使用 autoLayout 下面这个属性必须禁用
    view1.translatesAutoresizingMaskIntoConstraints = NO;
    view1.backgroundColor = [UIColor redColor];
    [self.view addSubview:view1];
    
    
    NSDictionary *views = NSDictionaryOfVariableBindings(view,view1);
    
//    红色 view 的约束
//    @"H:|-20-[view(>=200)]-20-|"
//    @"V:|-40-[view(50)]-10-[view1]"
    
    
//    黄色 view1 的约束
//    @"H:|-20-[view1(>=200)]-20-|"
//    @"V:[view]-10-[view1(50)]"
    
    
//    红色 view 横向的约束
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view(>=200)]-20-|" options:0 metrics:nil views:views ] ];
//    红色 view 竖向的约束
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view(50)]-10-[view1]" options:0 metrics:nil views:views]];
    
    
//    黄色视图的横向约束1
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view1(>=200)]-20-|" options:0 metrics:nil views:views ] ];

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

优化 demo2

- (void)demo3
{
    NSArray *colorList = @[[UIColor redColor],[UIColor yellowColor]];
    for (int i = 0; i<2; i++)
    {
        UIView *view = [[UIView alloc]init];
        view.translatesAutoresizingMaskIntoConstraints = NO;
        view.backgroundColor = colorList[i];
        view.tag = 10+i;
        [self.view addSubview:view];
        
    }
    
    UIView *redView = [self.view viewWithTag:10];
    UIView *yellowView = [self.view viewWithTag:11];
    
    
    NSDictionary *views = NSDictionaryOfVariableBindings(redView,yellowView);
    
   
    
//    两个视图横向的 约束
    NSArray *constraints = @[@"H:|-20-[redView(>=200)]-20-|",@"H:|-20-[yellowView(>=200)]-20-|"];
    for (NSString *VFL in constraints)
    {
       [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:VFL options:0 metrics:nil views:views ] ];
    }
    
    
//   红色 view 黄色 view 两个视图的高度都是50
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[redView(50)]-10-[yellowView(redView)]" options:0 metrics:nil views:views ]];
    
}

三个视图的相对布局

- (void)demo5
{
    NSArray *colorList = @[[UIColor redColor],[UIColor yellowColor],[UIColor blueColor]];
    for (int i = 0; i<3; i++)
    {
        UIView *view = [[UIView alloc]init];
        view.translatesAutoresizingMaskIntoConstraints = NO;
        view.backgroundColor = colorList[i];
        view.tag = 10+i;
        [self.view addSubview:view];
    }
    
    UIView *redView = [self.view viewWithTag:10];
    UIView *yellowView = [self.view viewWithTag:11];
    UIView *blueView = [self.view viewWithTag:12];
    
    
    NSDictionary *views = NSDictionaryOfVariableBindings(redView,yellowView,blueView);

//    @"H:|-20-[redView(>=200)]-20-|"
//    @"H:|-20-[yellowView(>=100)]-10-[blueView(yellowView)]-20-|"
    
//    横向 约束关系 数组
    NSArray *HList = @[@"H:|-20-[redView(>=200)]-20-|", @"H:|-20-[yellowView(>=100)]-10-[blueView(yellowView)]-20-|"];
    
//    竖向  红色视图与蓝色视图  红色视图与黄色视图   约束关系 数组
    NSArray *VList = @[@"V:|-40-[redView(50)]-10-[yellowView(redView)]",@"V:|-40-[redView(50)]-10-[blueView(redView)]"];
    
    
    for (int i = 0; i<VList.count ; i++)
    {
        
       [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:HList[i] options:0 metrics:nil views:views ] ];
       [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:VList[i] options:0 metrics:nil views:views ] ];
        
    }
    
}

效果图