iOS开发·布局篇

iOS自动布局

2016-04-05  本文已影响126人  CMD独白

使用自动布局的步骤是:

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]];
    }

    
}

上一篇下一篇

猜你喜欢

热点阅读