转载

IOS开发学习笔记039-autolayout 代码实现

1、代码实现比较复杂

代码实现Autolayout的步骤
- 利用NSLayoutConstraint类创建具体的约束对象
- 添加约束对象到相应的view上

1     - (void)addConstraint:(NSLayoutConstraint *)constraint; 2  3     - (void)addConstraints:(NSArray *)constraints;

代码实现Autolayout的注意点
- 要先禁止autoresizing功能，设置view的下面属性为NO
  
  view.translatesAutoresizingMaskIntoConstraints = NO;
- 添加约束之前，一定要保证相关控件都已经在各自的父控件上
- 不用再给view设置frame
一个NSLayoutConstraint对象就代表一个约束

// 创建约束对象的常用方法 +(id)constraintWithItem:(id)view1  attribute:(NSLayoutAttribute)attr1  relatedBy:(NSLayoutRelation)relation       toItem:(id)view2  attribute:(NSLayoutAttribute)attr2      multiplier:(CGFloat)multiplier   constant:(CGFloat)c;  view1:要约束的控件  attr1:约束的类型（做怎样的约束）  relation:与参照控件之间的关系  view2:参照的控件  attr2:约束的类型（做怎样的约束）  multiplier:乘数  c:常量

自动布局的核心计算公式

view1.attr1 =（view2.attr2 * multiplier）+ c ;
约束添加规则
- 对于两个同层级view之间的约束关系，添加到它们的父view上。
- 对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上
- 对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上

2、简单练习:一个view

实现一个大小为100*200的redView显示到view中，距离左边和顶部间距都是20

 1   // 实现一个大小为100*200的redView显示到view中，距离左边和顶部间距都是20  2     UIView *redView = [[UIView alloc] init];  3     redView.backgroundColor = [UIColor redColor];  4     // 关闭控件的自动添加约束功能  5     redView.translatesAutoresizingMaskIntoConstraints = NO;  6     // 先把控件添加到父控件才能接着添加约束  7     [self.view addSubview:redView];  8     // 设置宽度  9     NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:0 constant:100]; 10     [redView addConstraint:widthConstraint]; 11     // 设置高度 12     NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:0 constant:200]; 13     [redView addConstraint:heightConstraint]; 14     // 设置尺寸:距离顶部20 15     NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20]; 16     [self.view addConstraint:topConstraint]; 17     // 距离左边约束20 18     NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20]; 19     [self.view addConstraint:leftConstraint];

3、练习：两个view

在控制器view顶部添加2个view，1个蓝色，1个红色
- 2个view高度永远相等
- 红色view和蓝色view右边对齐
- 蓝色view距离父控件左边、右边、上边间距相等
- 蓝色view距离红色view间距固定
- 红色view的左边和父控件的中点对齐

 1   UIView *redView = [[UIView alloc] init];  2     redView.backgroundColor = [UIColor redColor];  3     // 关闭控件的自动添加约束功能  4     redView.translatesAutoresizingMaskIntoConstraints = NO;  5     // 先把控件添加到父控件才能接着添加约束  6     [self.view addSubview:redView];  7   8     UIView *blueView = [[UIView alloc] init];  9     blueView.backgroundColor = [UIColor blueColor]; 10     // 关闭控件的自动添加约束功能 11     blueView.translatesAutoresizingMaskIntoConstraints = NO; 12     // 先把控件添加到父控件才能接着添加约束 13     [self.view addSubview:blueView]; 14  15     /** 16      *  - 在控制器view顶部添加2个view，1个蓝色，1个红色 17      - 2个view高度永远相等 18      - 红色view和蓝色view右边对齐 19      - 蓝色view距离父控件左边、右边、上边间距相等 :20 20      - 蓝色view距离红色view间距固定 21      - 红色view的左边和父控件的中点对齐 22      */ 23  24     /**************blue*********************************************************/ 25     // blueHeight 26     NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:kNilOptions multiplier:0 constant:40]; 27     [self.view addConstraint:blueHeight]; // 同级控件之间的约束要添加到共同的父控件 28  29     //蓝色view距离父控件左边、右边、上边间距相等 :20 30     NSLayoutConstraint *blueViewRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view  attribute:NSLayoutAttributeRight multiplier:1 constant:-20]; 31     [self.view addConstraint:blueViewRight]; 32  33     NSLayoutConstraint *blueViewTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view  attribute:NSLayoutAttributeTop multiplier:1 constant:20]; 34     [self.view addConstraint:blueViewTop]; 35  36     NSLayoutConstraint *blueViewLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view  attribute:NSLayoutAttributeLeft multiplier:1 constant:20]; 37     [self.view addConstraint:blueViewLeft]; 38  39     /**************red*********************************************************/ 40     //  - redview与blueview等高 41     NSLayoutConstraint *equalHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem: blueView attribute:NSLayoutAttributeHeight multiplier:1 constant:0]; 42     [self.view addConstraint:equalHeight]; // 43  44     //   - redview的左边和父控件的中点对齐 45     NSLayoutConstraint *centerX = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]; 46     [self.view addConstraint:centerX]; // 47  48     //   - redview距离blueView间距20 49     NSLayoutConstraint *margin = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1 constant:20]; 50     [self.view addConstraint:margin]; // 51  52        //- 红色view和蓝色view右边对齐 53     NSLayoutConstraint *equalRight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView  attribute:NSLayoutAttributeRight multiplier:1 constant:0]; 54     [self.view addConstraint:equalRight]; //

4、使用VFL语言简化代码

visual Format Lauguage ,可视化格式语言

可以使用VFL实现自动布局代码的简化。

VFL的使用

使用VFL来创建约束数组

1 + (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views; 2  3 format ：VFL语句 4 opts ：约束类型 5 metrics ：VFL语句中用到的具体数值 6 views ：VFL语句中用到的控件

创建一个字典（内部包含VFL语句中用到的控件）的快捷宏定义

NSDictionaryOfVariableBindings(...)

  NSDictionaryOfVariableBindings(abc);

返回一个字典对象，内容为{@"abc" : abc};

4.1、VFL示例1：一个View

 1 代码示例  2     UIView *redView = [[UIView alloc] init];  3     redView.backgroundColor = [UIColor redColor];  4     // 关闭控件的自动添加约束功能  5     redView.translatesAutoresizingMaskIntoConstraints = NO;  6     // 先把控件添加到父控件才能接着添加约束  7     [self.view addSubview:redView];   8     NSString *vfl  = @"H:[redView(100)]-20-|"; // 设置宽度100，距离右边20  9     NSDictionary *view = @{@"redView" : redView}; 10     // 水平方向约束 11     NSArray *constraint = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:nil views:view]; 12     [self.view addConstraints:constraint]; 13     // 垂直方向约束 14     vfl = @"V:|-100-[redView(200)]"; // 设置高度200，距离顶部100 15     NSArray *constraint2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:nil views:view]; 16     [self.view addConstraints:constraint2 ];

4.2、VFL示例2：居中显示

// 居中显示  UIView *redView = [[UIView alloc] init];  redView.backgroundColor = [UIColor redColor];  // 关闭控件的自动添加约束功能  redView.translatesAutoresizingMaskIntoConstraints = NO;  // 先把控件添加到父控件才能接着添加约束  [self.view addSubview:redView];  NSNumber *margin = @100;  NSString *vfl  = @"H:|-margin-[redView]-margin-|"; // 设置宽度100，距离右边20  NSDictionary *view = @{@"redView" : redView};  NSDictionary *metric = @{@"margin" : margin};  // 水平方向约束  NSArray *constraint = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:NSLayoutFormatAlignAllCenterX metrics:metric views:view];  [self.view addConstraints:constraint];  // 垂直方向约束  NSDictionary *view2 = NSDictionaryOfVariableBindings(redView);  NSDictionary *metric2 = NSDictionaryOfVariableBindings(margin);  vfl = @"V:|-margin-[redView]-margin-|"; // 设置高度200，距离顶部100  NSArray *constraint2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:NSLayoutFormatAlignAllCenterY metrics:metric2 views:view2];  [self.view addConstraints:constraint2 ];

4.3、VFL示例：并排显示

IOS开发学习笔记039-autolayout 代码实现

 1  UIView *blueView = [[UIView alloc] init];  2     blueView.backgroundColor = [UIColor blueColor];  3     // 不要将AutoresizingMask转为Autolayout的约束  4     blueView.translatesAutoresizingMaskIntoConstraints = NO;  5     [self.view addSubview:blueView];  6       7     UIView *redView = [[UIView alloc] init];  8     redView.backgroundColor = [UIColor redColor];  9     // 不要将AutoresizingMask转为Autolayout的约束 10     redView.translatesAutoresizingMaskIntoConstraints = NO; 11     [self.view addSubview:redView]; 12      13     // 间距 14     NSNumber *margin = @20; 15     // 添加水平方向的约束 16     NSString *vfl1 = @"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|"; 17      18     NSDictionary *views = NSDictionaryOfVariableBindings(blueView,redView); 19     NSDictionary *mertics = NSDictionaryOfVariableBindings(margin); 20     NSArray *cons = [NSLayoutConstraint constraintsWithVisualFormat:vfl1 options:NSLayoutFormatAlignAllBottom | NSLayoutFormatAlignAllTop metrics:mertics views:views]; 21      22     [self.view addConstraints:cons]; 23     // 添加竖直方向的间距 24     // 高度 25     NSNumber *height = @100; 26     NSString *vfl2 = @"V:[blueView(height)]-margin-|"; 27     NSDictionary *views2 = NSDictionaryOfVariableBindings(blueView); 28     NSDictionary *mertics2 = NSDictionaryOfVariableBindings(margin,height); 29     NSArray *cons2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:mertics2 views:views2]; 30     [self.view addConstraints:cons2];