autoLayout(相对布局)二

//

//  ViewController.m

//  UI-AutoLayout.

//

//  Created by Bruce on 15/9/7.

//  Copyright (c) 2015年 Bruce. All rights reserved.

//

 

#import "ViewController.h"

 

@interface ViewController ()

 

@end

 

@implementation ViewController

 

- (void)viewDidLoad {

    [super viewDidLoad];

    

    [self demo5];

}

 

//一个视图

- (void)demo1

{

    UIView *view = [[UIView alloc]init];

//    如果需要使用autoLayout   translatesAutoresizingMaskIntoConstraints 必须禁用

    view.translatesAutoresizingMaskIntoConstraints = NO;

    view.backgroundColor = [UIColor redColor];

    [self.view addSubview:view];

    

//    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

 

    

//    @"H:|-20-" 设置横向布局 距离父视图的左侧边距

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

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

    

//    竖向布局@"V:|-40-[view(>=200)]-20-|"

    

//    使用VFL  需把视图的对象（视图） 与 他的名字（字符串） 绑定起来

    NSDictionary *views = NSDictionaryOfVariableBindings(view);

    

//    给 self.view 和 view 添加约束

//    addConstraints 添加约束

//    NSLayoutConstraint 添加 具体约束的一个类

//    + (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views

//    format:VFL

//    opts:同意按照某个方向去布局

//    metrics:绑定的参数

//    views:绑定视图的参数

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

}

 

//两个视图的布局

- (void)demo2

{

    UIView *view = [[UIView alloc]init];

    //    如果需要使用autoLayout   translatesAutoresizingMaskIntoConstraints 必须禁用

    view.translatesAutoresizingMaskIntoConstraints = NO;

    view.backgroundColor = [UIColor redColor];

    [self.view addSubview:view];

    

    UIView *view1 = [[UIView alloc]init];

    //    如果需要使用autoLayout   translatesAutoresizingMaskIntoConstraints 必须禁用

    view1.translatesAutoresizingMaskIntoConstraints = NO;

    view1.backgroundColor = [UIColor yellowColor];

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

    

//    黄色view1横向的约束

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view1(>=200)]-20-|" options:0 metrics:nil views:views]];

//    黄色view1竖向的约束

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view]-10-[view1(50)]" options:0 metrics:nil views:views]];

}

 

 

//两个视图的布局 优化demo2

- (void)demo3

{

    UIView *view = [[UIView alloc]init];

    //    如果需要使用autoLayout   translatesAutoresizingMaskIntoConstraints 必须禁用

    view.translatesAutoresizingMaskIntoConstraints = NO;

    view.backgroundColor = [UIColor redColor];

    [self.view addSubview:view];

    

    UIView *view1 = [[UIView alloc]init];

    //    如果需要使用autoLayout   translatesAutoresizingMaskIntoConstraints 必须禁用

    view1.translatesAutoresizingMaskIntoConstraints = NO;

    view1.backgroundColor = [UIColor yellowColor];

    [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 黄色view1 都在同一个父视图 而且两个视图之间 又有关系

    //    红色view 黄色view1 竖向的约束

//    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view(50)]-10-[view1(50)]" options:0 metrics:nil views:views]];

    

//    红色view 黄色view1 两个视图的高度 都是50

//    [view1(view)]

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view(50)]-10-[view1(view)]" options:0 metrics:nil views:views]];

    

    //    黄色view1横向的约束

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view1(>=200)]-20-|" options:0 metrics:nil views:views]];

    //    黄色view1竖向的约束

//    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view]-10-[view1(50)]" options:0 metrics:nil views:views]];

}

 

//再次优化 demo2

- (void)demo4

{

    NSArray *colorList = @[[UIColor redColor],[UIColor yellowColor]];

    

    for (int i=0; i<2; i++) {

        

        UIView *view = [[UIView alloc]init];

        view.backgroundColor = colorList[i];

        view.translatesAutoresizingMaskIntoConstraints = NO;

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

    }

    

//    两个视图的竖向约束

    [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:[redView]-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]];

        

    }

    

}

 

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

 

@end