代码实现Autolayout

使用代码实现Autolayout的方法1

代码实现Autolayout的步骤

1. 利用NSLayoutConstraint类创建具体的约束对象
2. 添加约束对象到相应的view上

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

代码实现Autolayout的注意点

1. 要先禁止autoresizing功能，设置view的下面属性为NO
2. 添加约束之前，一定要保证相关控件都已经在各自的父控件上
3. 不用再给view设置frame

view.translatesAutoresizingMaskIntoConstraints = NO;

NSLayoutConstraint

一个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 ：参照的控件
• vattr2 ：约束的类型（做怎样的约束）
• multiplier ：乘数
• c ：常量

    //添加控件到父控件
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    // 不要将AutoresizingMask转为Autolayout的约束
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    //设置约束
    /************************** 蓝色 **************************/
    // 添加高度约束:40
    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:40];
    [blueView addConstraint:heightConstraint];

    // 添加左边约束：blueView的左边距离父控件左边有20的间距
    NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
    [self.view addConstraint:leftConstraint];

    // 添加右边约束：blueView的右边距离父控件右边有20的间距
    NSLayoutConstraint *rightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
    [self.view addConstraint:rightConstraint];

    // 添加顶部约束：blueView的顶部距离父控件顶部有20的间距
    NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20];
    [self.view addConstraint:topConstraint];

使用代码实现Autolayout的方法2 - VFL

VFL全称是Visual Format Language，翻译过来是“可视化格式语言”

VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言

VFL示例

• H:[cancelButton(72)]-12-[acceptButton(50)]

  • canelButton宽72，acceptButton宽50，它们之间间距12

• H:[wideView(>=60@700)]

  • wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）

• V:[redBox][yellowBox(==redBox)]

  • 竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBox

• H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|

  • 水平方向上，Find距离父view左边缘默认间隔宽度，之后是FindNext距离Find间隔默认宽度；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。（竖线“|” 表示superview的边缘）

使用VFL来创建约束数组

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

• format ：VFL语句
• opts ：约束类型（NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom）
• metrics ：VFL语句中用到的具体数值
• views ：VFL语句中用到的控件

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

NSDictionaryOfVariableBindings(...)
NSNumber *margin = @20;

NSDictionary *mertrics = NSDictionaryOfVariableBindings(margin);
==
NSDictionary *mertrics1 = @{@"margin":margin};

使用代码实现Autolayout的方法3 - Masonry

• 目前最流行的Autolayout第三方框架
• 用优雅的代码方式编写Autolayout
• 省去了苹果官方恶心的Autolayout代码

• 大大提高了开发效率

• 框架地址：
  https://github.com/SnapKit/Masonry

mas_equalTo和equalTo

默认情况下

• mas_equalTo有自动包装功能,比如自动将20包装为@20
• equalTo没有自动包装功能

如果添加了下面的宏，那么mas_equalTo和equalTo就没有区别

// 注意：这个宏一定要添加到#import "Masonry.h"前面
#define MAS_SHORTHAND_GLOBALS

mas_width和width

默认情况下

• width是make对象的一个属性，用来添加宽度约束用的，表示对宽度进行约束

• mas_width是一个属性值，用来当做equalTo的参数，表示某个控件的宽度属性

  //如果添加了下面的宏，mas_width也可以写成width
  #define MAS_SHORTHAND
  

  mas_height、mas_centerX以此类推

添加约束的方法

// 这个方法只会添加新的约束
 [view makeConstraints:^(MASConstraintMaker *make) {

 }];

// 这个方法会将以前的所有约束删掉，添加新的约束
 [view remakeConstraints:^(MASConstraintMaker *make) {

 }];

 // 这个方法将会覆盖以前的某些特定的约束
 [view updateConstraints:^(MASConstraintMaker *make) {

 }];

约束的类型

1.尺寸：width\height\size
2.边界：left\leading\right\trailing\top\bottom
3.中心点：center\centerX\centerY
4.边界：edges