1 //  2 //  ViewController.m  3 //  IOS_0115_AutoLayout  4 //  5 //  Created by ma c on 16/1/15.  6 //  Copyright (c) 2016年 博文科技. All rights reserved.  7 //  8   9 #import "ViewController.h" 10  11 @interface ViewController () 12  13 @property (nonatomic, strong) NSLayoutConstraint *changeBlueTop; 14 @property (nonatomic, strong) UIView *blueView; 15  16  17  18 @end 19  20 @implementation ViewController 21  22 - (void)viewDidLoad { 23     [super viewDidLoad]; 24  25     //创建蓝色View 26     UIView *blueView = [[UIView alloc] init]; 27     blueView.frame = CGRectMake(0, 0, 100, 100); 28     blueView.backgroundColor = [UIColor blueColor]; 29     [self.view addSubview:blueView]; 30     self.blueView = blueView; 31     //创建红色View 32     UIView *redView = [[UIView alloc] init]; 33     redView.frame = CGRectMake(100, 100, 100, 100); 34     redView.backgroundColor = [UIColor redColor]; 35     [blueView addSubview:redView]; 36      37     //禁用autoresizing 38     blueView.translatesAutoresizingMaskIntoConstraints = NO; 39     redView.translatesAutoresizingMaskIntoConstraints = NO; 40      41     //创建并添加约束 42  43     //1.创建蓝色View的约束 44      45     /* 46      (id)对象 的 (NSLayoutAttribute)属性 47      (NSLayoutRelation)关系（> = <） 48      (id)对象的(NSLayoutAttribute)属性 49      乘以multiplier的参数 加上constant的参数 50      */ 51  52     //高度的约束 53     NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:50]; 54     //把约束加到控件上 55     [blueView addConstraint:blueHeight]; 56      57     //距离左边30 58     NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:blueView.superview attribute:NSLayoutAttributeLeft multiplier:1.0 constant:30]; 59     [blueView.superview addConstraint:blueLeft]; 60      61     //距离上面30(topLayoutGuide状态栏) 62     NSLayoutConstraint *blueTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView.superview attribute:NSLayoutAttributeTop multiplier:1.0 constant:30]; 63     [blueView.superview addConstraint:blueTop]; 64     self.changeBlueTop = blueTop; 65  66      67     //距离右边30 68     NSLayoutConstraint *blueRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView.superview attribute:NSLayoutAttributeRight multiplier:1.0 constant:-30]; 69     [blueView.superview addConstraint:blueRight]; 70      71     //1.创建红色View的约束 72     //红色View的高度等于蓝色View的高度 73     NSLayoutConstraint *redHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0]; 74     [redView.superview addConstraint:redHeight]; 75  76     //红色view的Top距离蓝色View的Bottom30 77     NSLayoutConstraint *redTop = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:30]; 78     [redView.superview addConstraint:redTop]; 79  80     //红色View与蓝色View右对齐 81     NSLayoutConstraint *redRight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0]; 82     [redView.superview addConstraint:redRight]; 83  84     //红色View的宽度等于蓝色View的宽度的一半 85     NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0]; 86     [redView.superview addConstraint:redWidth]; 87  88     //修改约束实现动画效果 89      90     UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; 91      92     [btn setFrame:CGRectMake(0, 300, 50, 50)]; 93     [btn setTitle:@"移动" forState:UIControlStateNormal]; 94     [btn setBackgroundColor:[UIColor orangeColor]]; 95     [self.view addSubview:btn]; 96     [btn addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside]; 97      98 } 99 100 - (void)btnClick101 {102     //修改约束-没有根据新的约束计算蓝色View的frame103     self.changeBlueTop.constant += 50;104     [UIView animateWithDuration:1 animations:^{105         //根据新的约束修改新的frame106         [self.blueView layoutIfNeeded];107     }];108 }109 110 111 - (void)didReceiveMemoryWarning {112     [super didReceiveMemoryWarning];113     // Dispose of any resources that can be recreated.114 }115 116 @end

 VFL语言-可视化格式语言（Visual Format Language）

1.代码分析：

1    NSArray *arr = [NSLayoutConstraint constraintsWithVisualFormat:<#(NSString *)#> options:<#(NSLayoutFormatOptions)#> metrics:<#(NSDictionary *)#> views:<#(NSDictionary *)#>]

VisualFormat:VFL语句

options:约束类型

metrics ：VFL语句中用到的具体数值

views ：VFL语句中用到的控件

 

2.使用步骤：

创建控件

添加到父控件

禁用Autoresizing

添加约束

 

3.总结

简化了代码量，方便书写约束

不支持乘法

 

////  ViewController.m//  IOS_0116_VFL////  Created by ma c on 16/1/16.//  Copyright (c) 2016年 博文科技. All rights reserved.//#import "ViewController.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];        // 链式语法    UIView *blueView = UIView.new;    blueView.backgroundColor = UIColor.blueColor;    [self.view addSubview:blueView];        UIView *redView = [[UIView alloc] init];    redView.backgroundColor = [UIColor redColor];    [self.view addSubview:redView];        blueView.translatesAutoresizingMaskIntoConstraints = NO;    redView.translatesAutoresizingMaskIntoConstraints = NO;        /** 一个方向上的所有控件的对齐方法     NSLayoutFormatAlignAllLeft = (1 << NSLayoutAttributeLeft),     NSLayoutFormatAlignAllRight = (1 << NSLayoutAttributeRight),     NSLayoutFormatAlignAllTop = (1 << NSLayoutAttributeTop),     NSLayoutFormatAlignAllBottom = (1 << NSLayoutAttributeBottom),     NSLayoutFormatAlignAllLeading = (1 << NSLayoutAttributeLeading),     NSLayoutFormatAlignAllTrailing = (1 << NSLayoutAttributeTrailing),     NSLayoutFormatAlignAllCenterX = (1 << NSLayoutAttributeCenterX),     NSLayoutFormatAlignAllCenterY = (1 << NSLayoutAttributeCenterY),     NSLayoutFormatAlignAllBaseline = (1 << NSLayoutAttributeBaseline),     NSLayoutFormatAlignAllLastBaseline = NSLayoutFormatAlignAllBaseline,     NSLayoutFormatAlignAllFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0) = (1 << NSLayoutAttributeFirstBaseline),     */    // 添加约束        // 添加blueView水平方向的约束    NSArray *blueViewH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:@{
   @"blueView" : blueView}];    [self.view addConstraints:blueViewH];            NSArray *blueAndRedV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{
   @"blueView" : blueView, @"redView" : redView}];    [self.view addConstraints:blueAndRedV];        // VFL语言不支持运算符    //   NSArray *redViewWidth = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView" : blueView, @"redView" : redView}];    //    [self.view addConstraints:redViewWidth];        NSLayoutConstraint *redViewWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];    [self.view addConstraint:redViewWidth];}@end

 

Masonry轻量级布局框架

meɪs(ə)nrɪ

采用更优雅的链式语法封装自动布局，简洁明了并具有高可读性

1 // 2 //  ViewController.m 3 //  IOS_0106_Masonry 4 // 5 //  Created by ma c on 16/1/16. 6 //  Copyright (c) 2016年 博文科技. All rights reserved. 7 // 8  9 10 #import "ViewController.h"11 //define this constant if you want to use Masonry without the 'mas_' prefix12 // 如果想在使用Masonry框架时省略mas_前缀请定义下面这个宏13 #define MAS_SHORTHAND14 15 //define this constant if you want to enable auto-boxing for default syntax16 // 如果你想在使用equalTo的时候让它也带有自动装箱功能请定义下面这个宏17 #define MAS_SHORTHAND_GLOBALS18 #warning mark - 上面的两个宏必须定义在框架的主头文件的上面19 20 #import "Masonry.h"21 @interface ViewController ()22 23 @end24 25 @implementation ViewController26 27 - (void)viewDidLoad {28     [super viewDidLoad];29     30     UIView *blueView = [[UIView alloc] init];31     blueView.backgroundColor = [UIColor blueColor];32     [self.view addSubview:blueView];33     34     35     // 添加约束36     [blueView mas_makeConstraints:^(MASConstraintMaker *make) {37         //        make.left.equalTo(self.view.left).offset(50);38         make.top.equalTo(self.view.mas_top).offset(50);39         make.right.equalTo(self.view.mas_right).offset(-50);40         make.bottom.equalTo(self.view.mas_bottom).offset(-50);41         42         // 当约束控件的属性和参照控件的属性相同时,参数控件的属性可以省略不写43         //        make.left.equalTo(self.view).offset(50);44         //        make.top.equalTo(self.view).offset(50);45         //        make.right.equalTo(self.view).offset(-50);46         //        make.bottom.equalTo(self.view).offset(-50);47         48         // 当两个约束属性的offset值一样的时候属性也可以连写49         //        make.left.top.equalTo(self.view).offset(50);50         //        make.right.bottom.equalTo(self.view).offset(-50);51         52         //        make.edges.equalTo(UIEdgeInsetsMake(50, 50, 50, 50));53         // mas_equalTo可以把基本数据类型转换为对象类型,这个转换过程叫装箱,如果把一个对象类型转换成一个基本数据类型,为拆箱,解箱54         //        make.edges.mas_equalTo(UIEdgeInsetsMake(50, 50, 50, 50));55         56     }];57     58     59     // 更新约束60     // 如果之前已经添加过有相同的属性,在此方法中可以重写添加在此添加时会把之前添加的相同属性的约束覆盖掉61     // 如果在此方法中添加的了新属性的约束,可能会照成约束冲突62     [blueView updateConstraints:^(MASConstraintMaker *make) {63         make.left.equalTo(self.view).offset(100);64         //        make.width.equalTo(200);65     }];66     67     68     // 重置blueView的约束"把blueView之前添加的所有约束删除"同时也可以在此方法中重新给blueView添加新的约束69     [blueView remakeConstraints:^(MASConstraintMaker *make) {70         make.edges.mas_equalTo(UIEdgeInsetsMake(150, 50, 150, 150));71         72     }];73     74     75     76 }77 78 @end