iOS开发之 AutoLayout自动布局

最新推荐文章于 2022-05-29 13:10:09 发布

刘亭均

最新推荐文章于 2022-05-29 13:10:09 发布

阅读量487

点赞数

分类专栏：软件开发类文章标签： AutoLayout AutoLayout自动布局自动布局布局 iOS屏幕适配

本文链接：https://blog.csdn.net/ltj1171528192/article/details/48831673

版权

软件开发类专栏收录该内容

43 篇文章 0 订阅

订阅专栏

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 ,因为找不到这个self.titleLable

1、demo1

<span style="color:#42b05c;">    </span><span style="color:#333333;"> UIView *view = [[UIView alloc]init];
    view.translatesAutoresizingMaskIntoConstraints = NO;
    view.backgroundColor = [UIColor grayColor];
    [self.view addSubview:view];
    
    NSDictionary *views = NSDictionaryOfVariableBindings(view);
    
    [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]];</span>

2、demo2

<span style="color:#42b05c;">   </span><span style="color:#333333;"> UIView *view1 = [[UIView alloc]init];
    view1.translatesAutoresizingMaskIntoConstraints = NO;
    view1.backgroundColor = [UIColor redColor];
    [self.view addSubview:view1];
    
    UIView *view2 = [[UIView alloc]init];
    view2.translatesAutoresizingMaskIntoConstraints = NO;
    view2.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:view2];
    
    NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
    
//    红色view横向约束
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view1(>=200)]-20-|" options:0 metrics:nil views:views]];
//    红色view竖向约束
     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view1(50)]-10-[view2]" options:0 metrics:nil views:views]];
    
//    黄色view横向约束
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view2(>=200)]-20-|" options:0 metrics:nil views:views]];
//    黄色view竖向约束
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view1]-10-[view2(50)]" options:0 metrics:nil views:views]];</span>

3、demo3（优化后的demo2）

<span style="color:#42b05c;">  </span><span style="color:#333333;"> UIView *view1 = [[UIView alloc]init];
    view1.translatesAutoresizingMaskIntoConstraints = NO;
    view1.backgroundColor = [UIColor redColor];
    [self.view addSubview:view1];
    
    UIView *view2 = [[UIView alloc]init];
    view2.translatesAutoresizingMaskIntoConstraints = NO;
    view2.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:view2];
    
    NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
    
    //    红色view横向约束
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view1(>=200)]-20-|" options:0 metrics:nil views:views]];
    //    黄色view横向约束
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view2(>=200)]-20-|" options:0 metrics:nil views:views]];
    
//    红色view1  和黄色view2 都在同一个父视图上 约束
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view1(50)]-10-[view2(50)]" options:0 metrics:nil views:views]];</span>

4、demo4

<span style="color:#42b05c;">   </span><span style="color:#333333;"> 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 = 100+i;
        [self.view addSubview:view];
    }
    UIView *redView = [self.view viewWithTag:100];
    UIView *yellowView = [self.view viewWithTag:101];
    UIView *blueView = [self.view viewWithTag:102];
    
    NSDictionary *views = NSDictionaryOfVariableBindings(redView,yellowView,blueView);
    
    NSArray *Harray = @[@"H:|-20-[redView(>=200)]-20-|",@"H:|-20-[yellowView(>=100)]-10-[blueView(yellowView)]-20-|"];
    
//    红黄 竖向关系   红蓝 竖向关系
    NSArray *Varray = @[@"V:|-40-[redView(50)]-10-[yellowView(redView)]",@"V:|-40-[redView(50)]-10-[blueView(redView)]"];
    
    for (int i = 0; i<Harray.count; i++) {
        
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:Harray[i] options:0 metrics:nil views:views]];
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:Varray[i] options:0 metrics:nil views:views]];
    }</span>

效果图如下：