autoLayout (相对布局)1（）

//

//  ViewController.m

//  UI-AutoLayout

//

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

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

//

/*

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

 

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

 

 

 autoLayout相对布局  约束视图和视图之间的关系 来分配 屏幕上的位置

 

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

 

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

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

 

 

 VFL:  需有 横 竖  两个方向 的约束

 横向: H:

 竖向: V:

 

 | 表示他的父视图

 -50- 两个视图之间的间距

 [textField] 是一个视图

 [textField(>=200)] (>=200) 如果是横向  表示textField自身的宽  最小是200

 

 

 H:横向

 | 表示他的父视图

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

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

 

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

 

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

 

 

 V: 竖向

 

 

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

 

 */

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    self.view.backgroundColor = [UIColor brownColor];

    [self demo1];

}

//一个视图

- (void)demo1

{

    

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

    view.translatesAutoresizingMaskIntoConstraints = NO;

    view.backgroundColor = [UIColor redColor];

    [self.view addSubview:view];

    

    NSDictionary *views = NSDictionaryOfVariableBindings(view);

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

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[view(>=100)]-300-|" options:0 metrics:nil views:views]];

}

//两个视图竖着排列

- (void)demo2

{

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

    view.translatesAutoresizingMaskIntoConstraints = NO;

    view.backgroundColor = [UIColor redColor];

    [self.view addSubview:view];

    

    

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

    view2.translatesAutoresizingMaskIntoConstraints = NO;

    view2.backgroundColor = [UIColor blueColor];

    [self.view addSubview:view2];

    

    

    NSDictionary *views = NSDictionaryOfVariableBindings(view,view2);

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

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[view(>=100)]-400-|" options:0 metrics:nil views:views]];

    

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

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

    

}

//三个视图  上面一个 下面两个

- (void)demo3

{

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

    view.translatesAutoresizingMaskIntoConstraints = NO;

    view.backgroundColor = [UIColor redColor];

    [self.view addSubview:view];

    

    

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

    view2.translatesAutoresizingMaskIntoConstraints = NO;

    view2.backgroundColor = [UIColor blueColor];

    [self.view addSubview:view2];

    

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

    view3.translatesAutoresizingMaskIntoConstraints = NO;

    view3.backgroundColor = [UIColor blueColor];

    [self.view addSubview:view3];

    

    NSDictionary *views = NSDictionaryOfVariableBindings(view,view2,view3);

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

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[view(>=100)]-400-|" options:0 metrics:nil views:views]];

    

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[view2(>=100)]-10-[view3]" options:0 metrics:nil views:views]];

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

    

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[view2]-10-[view3(>=100)]-10-|" options:0 metrics:nil views:views]];

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

    

}

//三个视图  上面一个 下面两个 下面两个 一般大

- (void)demo4

{

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

    view.translatesAutoresizingMaskIntoConstraints = NO;

    view.backgroundColor = [UIColor redColor];

    [self.view addSubview:view];

    

    

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

    view2.translatesAutoresizingMaskIntoConstraints = NO;

    view2.backgroundColor = [UIColor blueColor];

    [self.view addSubview:view2];

    

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

    view3.translatesAutoresizingMaskIntoConstraints = NO;

    view3.backgroundColor = [UIColor blueColor];

    [self.view addSubview:view3];

    

    NSDictionary *views = NSDictionaryOfVariableBindings(view,view2,view3);

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

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[view(>=100)]-400-|" options:0 metrics:nil views:views]];

    

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[view2(>=100)]-10-[view3]" options:0 metrics:nil views:views]];

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

    

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[view2]-10-[view3(view2)]-10-|" options:0 metrics:nil views:views]];

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

    

}

// 优化demo4

- (void)demo5

{

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

    view.translatesAutoresizingMaskIntoConstraints = NO;

    view.backgroundColor = [UIColor redColor];

    [self.view addSubview:view];

    

    

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

    view2.translatesAutoresizingMaskIntoConstraints = NO;

    view2.backgroundColor = [UIColor blueColor];

    [self.view addSubview:view2];

    

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

    view3.translatesAutoresizingMaskIntoConstraints = NO;

    view3.backgroundColor = [UIColor blueColor];

    [self.view addSubview:view3];

    

    NSDictionary *views = NSDictionaryOfVariableBindings(view,view2,view3);

    

    NSArray *constraintsH = @[@"H:|-100-[view(>=100)]-100-|",@"H:|-10-[view2(>=100)]-10-[view3(view2)]-10-|",@"V:[view]-10-[view3(>=50)]-200-|"];

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

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[view(>=100)]-400-|" options:0 metrics:nil views:views]];

    

//    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[view2(>=100)]-10-[view3(view2)]-10-|" options:0 metrics:nil views:views]];

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

    

//    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[view2]-10-[view3(view2)]-10-|" options:0 metrics:nil views:views]];

    for (int i=0; i<constraintsH.count; i++) {

        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:constraintsH[i] options:0 metrics:nil views:views]];

    }

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

    

}

//metrics 是一个字典 字典的键必须是出现在 VFL 语句中的字符串，值必须是 NSNumber 类型，作用是将在 VFL 语句中出现的键替换为相应的值

- (void)demo6

{

    

    NSArray *titleList = @[@"用户名",@"密码",@"确认密码"];

    

    for (int i=0; i<titleList.count; i++) {

        UITextField *textField = [[UITextField alloc]init];

        textField.translatesAutoresizingMaskIntoConstraints = NO;

        textField.tag = i+100;

        textField.placeholder = titleList[i];

        textField.borderStyle = UITextBorderStyleLine;

        [self.view addSubview:textField];

    }

    UITextField *accTextField = (UITextField *)[self.view viewWithTag:100];

    UITextField *pswTextField = (UITextField *)[self.view viewWithTag:101];;

    UITextField *isPswTextField = (UITextField *)[self.view viewWithTag:102];;

    

    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];

    button.backgroundColor = [UIColor grayColor];

    button.layer.cornerRadius = 5;

    button.layer.masksToBounds = YES;

    button.showsTouchWhenHighlighted = YES;

    [button setTitle:@"注册" forState:UIControlStateNormal];

    [self.view addSubview:button];

    

    button.translatesAutoresizingMaskIntoConstraints = NO;

    

    NSDictionary *views = NSDictionaryOfVariableBindings(accTextField,pswTextField,isPswTextField,button);

    

    //    metrics 是一个字典 字典的键必须是出现在 VFL 语句中的字符串，值必须是 NSNumber 类型，作用是将在 VFL 语句中出现的键替换为相应的值

    

    NSNumber *left = @50;

    NSNumber *right = @50;

    NSNumber *top = @60;

    NSNumber *weight = @200;

    NSNumber *height = @40;

    NSNumber *jianju = @30;

    

//    metrics 是一个字典 字典的键必须是出现在 VFL 语句中的字符串，值必须是 NSNumber 类型，作用是将在 VFL 语句中出现的键替换为相应的值

    NSDictionary *metrics = NSDictionaryOfVariableBindings(left,right,top,weight,height,jianju);

    

    NSArray *VFList = @[@"H:|-left-[accTextField(>=weight)]-right-|",@"H:|-left-[pswTextField(>=weight)]-right-|",@"H:|-left-[isPswTextField(>=weight)]-right-|",@"H:|-left-[button(>=weight)]-right-|"];

    

    for (int i = 0; i<VFList.count; i++) {

        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:VFList[i] options:0 metrics:metrics views:views]];

    }

    

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-top-[accTextField(>=height)]-jianju-[pswTextField(pswTextField)]-jianju-[isPswTextField(pswTextField)]-jianju-[button(pswTextField)]" options:0 metrics:metrics views:views]];

}

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end