iOS布局总结

自动布局，一般使用Masonry第三方，能更轻松上手并且简单易懂，但其也是用系统自带的NSLayoutConstraint。先了解系统自带的NSLayoutConstraint的使用方法。

1.NSLayoutConstraint的第一个方法

+(instancetype)constraintWithItem:(id)view1                  //约束左边的视图
                        attribute:(NSLayoutAttribute)attr1   //view1的属性
                        relatedBy:(NSLayoutRelation)relation //左右视图的关系
                           toItem:(id)view2                  //约束右边的视图
                        attribute:(NSLayoutAttribute)attr2   //view2的属性
                       multiplier:(CGFloat)multiplier        //乘数
                         constant:(CGFloat)c;                //常量

NSLayoutAttribute属性

typedef NS_ENUM(NSInteger, NSLayoutAttribute) {
    NSLayoutAttributeLeft = 1, //左边
    NSLayoutAttributeRight,    //右边
    NSLayoutAttributeTop,      //顶部
    NSLayoutAttributeBottom,   //底部
    NSLayoutAttributeLeading,  //首部
    NSLayoutAttributeTrailing, //尾部
    NSLayoutAttributeWidth,    //宽度
    NSLayoutAttributeHeight,   //高度
    NSLayoutAttributeCenterX,  //X轴中心
    NSLayoutAttributeCenterY,  //Y轴中心
    NSLayoutAttributeBaseline, //基线
    NSLayoutAttributeLastBaseline = NSLayoutAttributeBaseline,
    NSLayoutAttributeFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0),

    //iOS8的这里不说明了，我也不知道。
    NSLayoutAttributeLeftMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeRightMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeTopMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeBottomMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeLeadingMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeTrailingMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeCenterXWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeCenterYWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),

    NSLayoutAttributeNotAnAttribute = 0 //无属性
};

NSLayoutRelation关系

typedef NS_ENUM(NSInteger, NSLayoutRelation) {
    NSLayoutRelationLessThanOrEqual = -1,   //小于等于
    NSLayoutRelationEqual = 0,              //等于
    NSLayoutRelationGreaterThanOrEqual = 1, //大于等于
};

例子：

UIView * view = [[UIView alloc]init];
    view.backgroundColor = [UIColor redColor];
    
    [self.view addSubview:view];
    
    view.translatesAutoresizingMaskIntoConstraints = NO;
    
    [self.view addConstraint:
     [NSLayoutConstraint constraintWithItem:view
                                  attribute:NSLayoutAttributeLeft
                                  relatedBy:NSLayoutRelationEqual
                                     toItem:self.view
                                  attribute:NSLayoutAttributeLeft
                                 multiplier:1
                                   constant:10]];
    
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20]];
    
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:100]];
    
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1 constant:-200]];

效果：

734CF7D4-6A4E-438A-ACA2-F0F1751F9BBD.png

2.NSLayoutConstraint的第二个方法， VFL（Visual Format Language），“可视化格式语言”，不做过多介绍，感兴趣可以去具体了解一下

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

例子：

UIView * view = [[UIView alloc]init];
    view.backgroundColor = [UIColor redColor];
    
    [self.view addSubview:view];
    
    view.translatesAutoresizingMaskIntoConstraints = NO;
    
    NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(view);
    //约束1 横向
    [self.view addConstraints:
     [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[view]-20-|"
                                             options:0
                                             metrics:nil
                                               views:viewsDictionary]];
    //约束2 纵向
    [self.view addConstraints:
     [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-100-[view]-200-|"
                                             options:0
                                             metrics:nil
                                               views:viewsDictionary]];
    
    [self.view addConstraint:
     [NSLayoutConstraint constraintWithItem:view
                                  attribute:NSLayoutAttributeLeft
                                  relatedBy:NSLayoutRelationEqual
                                     toItem:self.view
                                  attribute:NSLayoutAttributeLeft
                                 multiplier:1
                                   constant:10]];

3. Masonry的使用

/**
 *    The following properties return a new MASViewConstraint
 *  with the first item set to the makers associated view and the appropriate MASViewAttribute
 */
@property (nonatomic, strong, readonly) MASConstraint *left; //左侧
@property (nonatomic, strong, readonly) MASConstraint *top;  //上侧
@property (nonatomic, strong, readonly) MASConstraint *right; //右侧
@property (nonatomic, strong, readonly) MASConstraint *bottom;  //下侧
@property (nonatomic, strong, readonly) MASConstraint *leading;    //首部
@property (nonatomic, strong, readonly) MASConstraint *trailing; //尾部
@property (nonatomic, strong, readonly) MASConstraint *width;    //宽
@property (nonatomic, strong, readonly) MASConstraint *height;    //高
@property (nonatomic, strong, readonly) MASConstraint *centerX;    横向中心点
@property (nonatomic, strong, readonly) MASConstraint *centerY;    //纵向中心点
@property (nonatomic, strong, readonly) MASConstraint *baseline; //文本基线

例子：

[_evaView makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(MARGIN_BIG);
        make.right.equalTo(-MARGIN_BIG);
        make.top.equalTo(_userInfoView.bottom);
        make.height.equalTo(0);
    }];