iOS自动布局

作者: CMD独白 | 来源:发表于2016-04-05 17:19 被阅读126次

    使用自动布局的步骤是:

    1、使用代码自动布局(autolayout) frame就会失效,所以 不需要再去设置视图的frame,另外,使用代码自动布局的时候 需要禁用translatesAutoresizingMaskIntoConstraints = NO;

    2、绑定视图与字符串

    3、添加约束

    关于横向竖向的设置:

    横向:距离父视图左侧100 视图本身的宽度最小是100 距离父视图右侧100
    H:|-50-[view1(>=100)]-50-|

    竖向:距离父视图顶部150 视图本身高度是40
    V:|-100-[view1(30)]

    注意:|表示父视图 ,-本身表示一段距离, -距离-表示指定距离,[字符串表示的视图] 表示参照视图,[字符串表示的视图(视图的宽高 或者 最小最大的宽高、相对宽高)]中的()小括号千万不要丢掉。

    第一种添加约束的方法:

    - (void)demo1{
        UIView *view = [UIView new];
        //    1、禁用
        view.translatesAutoresizingMaskIntoConstraints = NO;
        view.backgroundColor = [UIColor grayColor];
        
        [self.view addSubview:view];
        
        //    2、绑定视图和字符串
        NSDictionary *views = NSDictionaryOfVariableBindings(view);
        
        //    3、添加约束
        //    NSLayoutConstraint 约束的类
        /*
         VisualFormat:VFL语句
         options:基于哪一个选项(基于方向去计算布局)
         metrics:绑定数值 与字符串
         views:绑定视图 与字符串
         */
        /*
         横向:距离父视图左侧100  视图本身的宽度最小是100  距离父视图右侧100
         竖向:距离父视图顶部150  视图本身高度是40
         
         可视化语言
         H:|-100-[view(>=100)]-100-|
         V:|-100-[view(40)]
         */
        
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
        
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-100-[view(40)]" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
    }
    
    

    第二种添加约束的方法:

    UIView *view1 = [self createView:@"UIView" addView:self.view];
        UIView *view2 = [self createView:@"UIView" addView:self.view];
        
        view1.backgroundColor = [UIColor redColor];
        view2.backgroundColor = [UIColor grayColor];
    //    2、绑定
        
        NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
        
    //    3、添加约束
        /*
         view2:
         横向:距离父视图左侧100 view2宽度最小是100 距离父视图右侧是100
         竖向:距离view1 50 view2的高度和view1相同
        
         可视化语言
         view1:
         H:|-100-[view(>=100)]-100-|
         V:|-100-[view(40)]
         view2:
         H:|-100-[view2(>=100)]-100-|
         V:[view1]-50-[view2(view1)]
         */
    //    view1:
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view1(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-100-[view1(40)]" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
    //    view2:
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view2(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view1]-50-[view2(view1)]" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
        
       }
    
    
    

    第三种添加约束的方法:

    - (void)demo3{
    
        /*
         研究发现:
         两个视图 竖向 是有交集的
         -> 尝试把两个竖向的约束 放到一起
         view1:
         V:|-150-[view1(40)]
         
         view2:
         V:[view1]-50-[view2(view1)]
         
         放到一起:
         V:|-150-[view1(40)]-50-[view2(view1)]
         */
        
        UIView *view1 = [self createView:@"UIView" addView:self.view];
        UIView *view2 = [self createView:@"UIView" addView:self.view];
        
        view1.backgroundColor = [UIColor redColor];
        view2.backgroundColor = [UIColor grayColor];
        //    2、绑定
        
        NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
        
        //    view1:
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view1(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
        //    view2:
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view2(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-150-[view1(40)]-50-[view2(view1)]" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
    
        
    }
    
    

    第四种添加约束的方法:

    - (void)demo4{
        UIView *view1 = [self createView:@"UIView" addView:self.view];
        UIView *view2 = [self createView:@"UIView" addView:self.view];
        
        view1.backgroundColor = [UIColor redColor];
        view2.backgroundColor = [UIColor grayColor];
        //    2、绑定
        
        NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
        
    //    所有约束的 VFL数组
        NSArray *constraints = @[@"H:|-100-[view1(>=100)]-100-|",@"H:|-100-[view2(>=100)]-100-|",@"V:|-150-[view1(40)]-50-[view2(view1)]"];
        for (int i = 0; i < constraints.count; i++) {
            [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:constraints[i] options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
        }
        
    }
    
    

    第五种添加约束的方法:

    - (void)demo5{
    
        UIView *view1 = [self createView:@"UIView" addView:self.view];
        UIView *view2 = [self createView:@"UIView" addView:self.view];
        
        view1.backgroundColor = [UIColor redColor];
        view2.backgroundColor = [UIColor grayColor];
        //    2、绑定
        
        NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
        
        NSNumber *leftSpace = @100;
        NSNumber *rightSpace = @100;
        NSNumber *view1TopSpace = @150;
        NSNumber *view1MinWidth = @100;
        NSNumber *view1Hight = @40;
        NSNumber *view2TopSpace = @50;
        
        NSDictionary *metrics = NSDictionaryOfVariableBindings(leftSpace,rightSpace,view1MinWidth,view1Hight,view1TopSpace,view2TopSpace);;
        NSArray *constraints = @[@"H:|-leftSpace-[view1(>=view1MinWidth)]-rightSpace-|",@"H:|-leftSpace-[view2(view1)]-rightSpace-|",@"V:|-view1TopSpace-[view1(view1Hight)]-view2TopSpace-[view2(view1)]"];
        
        for (int i = 0; i < constraints.count; i++) {
            [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:constraints[i] options:NSLayoutFormatAlignAllLeft metrics:metrics views:views]];
        }
    
        
    }
    
    

    相关文章

      网友评论

        本文标题:iOS自动布局

        本文链接:https://www.haomeiwen.com/subject/fcmplttx.html