代码 AutoLayout

1、使用代码创建AutoLayout

必须先禁用autoresizing

[objc] view plain copy print ?

1. /** 
2.  *  某个控件在父控件中居中 
3.  */  
4. - (void)centerTest  
5. {  
6.     // 1.添加控件  
7.     UIView *blueView = [[UIView alloc] init];  
8.     blueView.backgroundColor = [UIColor blueColor];  
9.     [self.view addSubview:blueView];  
10.       
11.     // 2.添加约束  
12.     // 关闭autoresizing  
13.     blueView.translatesAutoresizingMaskIntoConstraints = NO;  
14.       
15.     /** 
16.      宽高:100 
17.      位置:在父控件中居中 
18.      */  
19.     // blueView的width == 100  
20.     NSLayoutConstraint *width = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:100];  
21.     [blueView addConstraint:width];  
22.       
23.     // blueView的height == 100  
24.     NSLayoutConstraint *height = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:100];  
25.     [blueView addConstraint:height];  
26.       
27.     // blueView的CenterX == self.view的CenterX * 1.0 + 0.0  
28.     NSLayoutConstraint *centerX = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];  
29.     [self.view addConstraint:centerX];  
30.       
31.     // blueView的CenterY == self.view的CenterY * 1.0 + 0.0  
32.     NSLayoutConstraint *centerY = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0];  
33.     [self.view addConstraint:centerY];  
34. }  

[objc] view plain copy print ?

1. - (void)viewDidLoad  
2. {  
3.     [super viewDidLoad];  
4.       
5.     // 1.添加控件  
6.     UIView *blueView = [[UIView alloc] init];  
7.     blueView.backgroundColor = [UIColor blueColor];  
8.     blueView.translatesAutoresizingMaskIntoConstraints = NO;  
9.     [self.view addSubview:blueView];  
10.       
11.     UIView *redView = [[UIView alloc] init];  
12.     redView.backgroundColor = [UIColor redColor];  
13.     redView.translatesAutoresizingMaskIntoConstraints = NO;  
14.     [self.view addSubview:redView];  
15.       
16.     // 2.约束蓝色  
17.     // 2.1.高度  
18.     NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:40];  
19.     [blueView addConstraint:blueHeight];  
20.     // 2.2.左边间距  
21.     CGFloat margin = 20;  
22.     NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:margin];  
23.     [self.view addConstraint:blueLeft];  
24.     // 2.3.顶部间距  
25.     NSLayoutConstraint *blueTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:margin];  
26.     [self.view addConstraint:blueTop];  
27.     // 2.4.右边间距  
28.     NSLayoutConstraint *blueRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-margin];  
29.     [self.view addConstraint:blueRight];  
30.       
31.     // 3.约束红色  
32.     // 3.1.让红色右边 == 蓝色右边  
33.     NSLayoutConstraint *redRight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0.0];  
34.     [self.view addConstraint:redRight];  
35.   
36.     // 3.2.让红色高度 == 蓝色高度  
37.     NSLayoutConstraint *redHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0];  
38.     [self.view addConstraint:redHeight];  
39.       
40.     // 3.3.让红色顶部 == 蓝色底部 + 间距  
41.     NSLayoutConstraint *redTop = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:margin];  
42.     [self.view addConstraint:redTop];  
43.       
44.     // 3.4.让红色宽度 == 蓝色宽度 * 0.5  
45.     NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];  
46.     [self.view addConstraint:redWidth];  
47. }  

2、使用VFL语言创建AutoLayout中的约束

示例1的效果和代码如下:

[objc] view plain copy print ?

1. // 顶部一个blueView 下面一个redView,其中redView的左边和blueView的中心对齐  
2. - (void)VFLtest1  
3. {  
4.     // 1.添加控件  
5.     UIView *blueView = [[UIView alloc] init];  
6.     blueView.backgroundColor = [UIColor blueColor];  
7.     blueView.translatesAutoresizingMaskIntoConstraints = NO;  
8.     [self.view addSubview:blueView];  
9.       
10.     UIView *redView = [[UIView alloc] init];  
11.     redView.backgroundColor = [UIColor redColor];  
12.     redView.translatesAutoresizingMaskIntoConstraints = NO;  
13.     [self.view addSubview:redView];  
14.       
15.     // 2.VFL生成约束,注意,对象必须用[]括起来  
16.     NSArray *conts = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:@{@"blueView" : blueView}];  
17.     [self.view addConstraints:conts];  
18.       
19.     NSArray *conts2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(40)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView" : blueView, @"redView" : redView}];  
20.     [self.view addConstraints:conts2];  
21.       
22.     // 3.注意,VFL暂时不支持 a = b*0.5这样的语法  
23.     NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];  
24.     [self.view addConstraint:redWidth];  
25. }  

示例2的效果和代码   如下:

[objc] view plain copy print ?

1. - (void)viewDidLoad  
2. {  
3.     [super viewDidLoad];  
4.       
5.     // 1.添加控件  
6.     UIView *blueView = [[UIView alloc] init];  
7.     blueView.backgroundColor = [UIColor blueColor];  
8.     blueView.translatesAutoresizingMaskIntoConstraints = NO;  
9.     [self.view addSubview:blueView];  
10.       
11.     UIView *redView = [[UIView alloc] init];  
12.     redView.backgroundColor = [UIColor redColor];  
13.     redView.translatesAutoresizingMaskIntoConstraints = NO;  
14.     [self.view addSubview:redView];  
15.       
16.     // 2.VFL生成约束,注意使用下面的宏,必须保证键值对的名称一样  
17.     NSDictionary *mertrics = @{@"margin" : @20}; // 参数\数值  
18.     NSDictionary *views = NSDictionaryOfVariableBindings(blueView, redView);  
19.     NSArray *conts = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|" options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:mertrics views:views];  
20.       
21.     NSArray *conts2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueView(==blueHeight)]-margin-|" options:0 metrics:@{@"blueHeight" : @40, @"margin" : @20} views:views];  
22.     [self.view addConstraints:conts];  
23.     [self.view addConstraints:conts2];  
24. }  

3、使用AutoLayout中的约束创建动画

将storyboard中的约束 拖到.m文件中,使之成为IBOutlet对象,例如:

@property (weak,nonatomic)IBOutletNSLayoutConstraint*leftMarginConstraint;

@property (weak,nonatomic)IBOutletNSLayoutConstraint*widthConstraint;

当事件触发时,改变其constant值,然后调用约束所在的对象的 layoutIfNeeded方法,固定的~ 例如:

self.leftMarginConstraint.constant= 100;

   self.widthConstraint.constant= 200;

[UIViewanimateWithDuration:2.0animations:^{

        [self.viewlayoutIfNeeded];

        [self.redViewlayoutIfNeeded];

    }];

4、建议上边距 使用Top Layout Guide,即状态栏下边线,因为iOS6是以状态栏下边线为原点,而iOS7以上是以屏幕的左上角为原点