学习AutoLayout(NSLayoutConstraint)

概述

以前一直听说autoLayout，跟xib、storybord无缝结合使用
，设置各种约束条件来达到适配的目的。比如设置一个view的约束条件为距离superview上下左右边距都是10点，这样就可以确定这个view在superview中的位置，而且不管在哪个设备都是距离superview上下左右边距10点。
感觉是特别好使，不过我一直是纯代码编写项目，完全不知道怎么使用autoLayout，最近决定研究研究怎么适配。
一开始学习autoLayout毫无头绪，各种查资料看官方文档研究官方demo，从一开始不知道NSLayoutConstraint这个类，不知道VFL（Visual Format Language ），现在可以做简单的适配工作，今天就分享下学习经验。

autoLayout

这里引用喵神的WWDC 2012 Session笔记——202, 228, 232 AutoLayout（自动布局）入门的一段文字

使用一句Apple的官方定义的话
AutoLayout是一种基于约束的，描述性的布局系统。 Auto Layout Is a Constraint-Based, Descriptive Layout System.
关键词：

• 基于约束 － 和以往定义frame的位置和尺寸不同，AutoLayout的位置确定是以所谓相对位置的约束来定义的，比如x坐标为superView的中心，y坐标为屏幕底部上方10像素等
• 描述性 － 约束的定义和各个view的关系使用接近自然语言或者可视化语言（稍后会提到）的方法来进行描述
• 布局系统 － 即字面意思，用来负责界面的各个元素的位置。

在IB中拖拽的方法就不说了，网上的教程很详细。
这里说一下纯代码实现autoLayout的方法
要实现自动布局，必须关掉view的AutoresizeingMask

view.translatesAutoresizingMaskIntoConstraints = NO;

用到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;                //常量

公式是这样的：view1.attr1 = view2.attr2 * multiplier + constant
其中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, //大于等于
};

代码

创建view

UIView *view = [[UIView alloc] init]; //这里不需要设置frame
view.backgroundColor = [UIColor brownColor];
view.translatesAutoresizingMaskIntoConstraints = NO; //要实现自动布局，必须把该属性设置为NO
[self.view addSubview:view];

添加约束

[self.view addConstraint:
 [NSLayoutConstraint constraintWithItem:view
                              attribute:NSLayoutAttributeLeft
                              relatedBy:NSLayoutRelationEqual
                                 toItem:self.view
                              attribute:NSLayoutAttributeLeft
                             multiplier:1
                               constant:20]];
[self.view addConstraint:
 [NSLayoutConstraint constraintWithItem:view
                              attribute:NSLayoutAttributeRight
                              relatedBy:NSLayoutRelationEqual
                                 toItem:self.view
                              attribute:NSLayoutAttributeRight
                             multiplier:1
                               constant:-10]];
[self.view addConstraint:
 [NSLayoutConstraint constraintWithItem:view
                              attribute:NSLayoutAttributeTop
                              relatedBy:NSLayoutRelationEqual
                                 toItem:self.view
                              attribute:NSLayoutAttributeTop
                             multiplier:1
                               constant:30]];
[self.view addConstraint:
 [NSLayoutConstraint constraintWithItem:view
                              attribute:NSLayoutAttributeBottom
                              relatedBy:NSLayoutRelationEqual
                                 toItem:self.view
                              attribute:NSLayoutAttributeBottom
                             multiplier:1
                               constant:-20]];

效果图

NSLayoutConstraint

这个方法我用的少，毕竟太长，主要还是用的第二个方法，下篇介绍。

分享两个第三方

UIView-AutoLayout
Masonry
Masonry介绍与使用实践(快速上手Autolayout)