NSLayoutConstraint - 系统自动布局（详解）
如果一个界面创建三个View，要求第一行两个View等高等宽，第三个View与上面两个View等高，无论是横屏还是竖屏。那该如何编写使得View自动布局呢？那就要使用NSLayoutConstraint - 系统自动布局了，核心代码如下：
- (void)createThreeViews{
//1 创建3个view的对象
UIView *leftView = [[UIView alloc]init];
UIView *rightView = [[UIView alloc]init];
UIView *bottomView = [[UIView alloc]init];
//2 设置背景颜色
leftView.backgroundColor = [UIColor greenColor];
rightView.backgroundColor = [UIColor purpleColor];
bottomView.backgroundColor = [UIColor orangeColor];
//3 添加视图上显示
[self.view addSubview:leftView];
[self.view addSubview:rightView];
[self.view addSubview:bottomView];
//4 关闭系统的自定义布局
leftView.translatesAutoresizingMaskIntoConstraints = NO;
rightView.translatesAutoresizingMaskIntoConstraints = NO;
bottomView.translatesAutoresizingMaskIntoConstraints = NO;
//-----------------自动布局方法1 ----------------
/**
[NSLayoutConstraint constraintWithItem:(id)item
attribute:(NSLayoutAttribute)attribute
relatedBy:(NSLayoutRelation)relation
toItem:(id)otherItem
attribute:(NSLayoutAttribute)otherAttribute
multiplier:(CGFloat)multiplier
constant:(CGFloat)constant]
1.参数说明:
第一个参数:指定约束左边的视图view1
第二个参数:指定view1的属性attr1
第三个参数:指定左右两边的视图的关系relation
第四个参数:指定约束右边的视图view2
第五个参数:指定view2的属性attr2
第六个参数:指定一个与view2属性相乘的乘数multiplier
第七个参数:指定一个与view2属性相加的浮点数constant
依据的公式是：view1.attr1 = view2.attr2*multiplier +constant
2.NSLayoutAttribute的类型：
NSLayoutAttributeLeft 视图的左边
NSLayoutAttributeRight 视图的右边
NSLayoutAttributeTop 视图的上边
NSLayoutAttributeBottom 视图的下边
NSLayoutAttributeLeading 视图的前边
NSLayoutAttributeTrailing 视图的后边
NSLayoutAttributeWidth 视图的宽度
NSLayoutAttributeHeight 视图的高度
NSLayoutAttributeCenterX 视图的中点的X值
NSLayoutAttributeCenterY 视图中点的Y值
NSLayoutAttributeBaseline 视图的基准线
NSLayoutAttributeNotAnAttribute 无属性
3.NSLayoutRelation的类型：
NSLayoutRelationLessThanOrEqual 视图关系小于或等于
NSLayoutRelationEqual 视图关系等于
NSLayoutRelationGreaterThanOrEqual 视图关系大于或等于
**/
//leftView的上 = self.view的上+20
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:leftView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1.
constant:20]];
// leftView的左 = self.view的左 + 20
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:leftView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeft
multiplier:1.
constant:20]];
// rightView的上 = leftView的上
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:rightView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:leftView
attribute:NSLayoutAttributeTop
multiplier:1.
constant:0]];
// rightView的左 = leftView的右 + 20
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:rightView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:leftView
attribute:NSLayoutAttributeRight
multiplier:1.
constant:20]];
// rightView的右 = self.view的右 - 20
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:rightView
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeRight
multiplier:1.
constant:-20]];
// rightView的高 = leftView的高
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:rightView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:leftView
attribute:NSLayoutAttributeHeight
multiplier:1.
constant:0]];
// rightView的宽 = leftView的宽
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:rightView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:leftView
attribute:NSLayoutAttributeWidth
multiplier:1.0
constant:0]];
//bottomView的左 = self.view的左 + 20
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:bottomView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeft
multiplier:1
constant:20]];
//bottomView的右 = self.view的右 - 20
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:bottomView
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeRight
multiplier:1
constant:-20]];
//bottomView的上 = leftView的下 + 20
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:bottomView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:leftView
attribute:NSLayoutAttributeBottom
multiplier:1
constant:20]];
//bottomView的高 = leftView的高
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:bottomView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:leftView
attribute:NSLayoutAttributeHeight
multiplier:1
constant:0]];
//bottomView的下 = self.view的下 + 20
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:bottomView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1
constant:-20]];
//-----------------自动布局方法2 ----------------
/*
* 1. 自动布局使用可视化语言:VFL(Visual Format Language)
2. 自动布局的相关参数
NSArray *constrArray = [NSLayoutConstraint constraintsWithVisualFormat:@"string类型"
options:
metrics:
views:]；
3. 解释：
a) 第一个参数：使用VFL格式化的字符串，可以参见官方的帮助文档；
b) 第二个参数：指定VFL中所有对象的布局属性和方向。举例：有2个视图使用VFL进行布局，可以使用NSLayoutFormatAlignAllLeft，就让两个视图左对齐；
c) 第三个参数：度量或者指标的字典，字典里面有相关的键值对来控制相关的度量指标，通过key获取；
d) 第四个参数：指定约束的视图：一个或多个。
4. VFL语言的规则
a) "H" 表示水平方向，"V"表示垂直方向；
b) "|" 表示superview的边界；
c) "[]" 表示view，"()"表示尺寸，它们可以多个条件组合，中间使用逗号分隔，举例：[view(>=70, <=100)];
d) "-" 表示间隙；
e) "@"表示优先级。举例：V:|-50@750-[view(55)]
*/
/**
//创建VFL约束字符串
NSString *hVFL = @"H:|-space-[leftView(==rightView)]-space1-[rightView]-space-|";
NSString *hVFL1 = @"H:|-space-[bottomView]-space-|";
NSString *vVFL = @"V:|-space-[leftView(==bottomView)]-space-[bottomView]-space-|";
NSString *vVFL1 = @"V:|-space-[rightView(==bottomView)]-space-[bottomView]-space-|";
//创建键值映射
NSDictionary *metircs = @{@"space":@20,@"space1":@30};
NSDictionary *views = NSDictionaryOfVariableBindings(leftView,rightView,bottomView);
//创建约束
NSArray *hconstraint = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:NSLayoutFormatDirectionLeadingToTrailing metrics:metircs views:views];
NSArray *hconstraint1 = [NSLayoutConstraint constraintsWithVisualFormat:hVFL1 options:NSLayoutFormatDirectionLeadingToTrailing metrics:metircs views:views];
NSArray *vconstraint = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:NSLayoutFormatDirectionLeadingToTrailing metrics:metircs views:views];
NSArray *vconstraint1 = [NSLayoutConstraint constraintsWithVisualFormat:vVFL1 options:NSLayoutFormatDirectionLeadingToTrailing metrics:metircs views:views];
//添加约束
[self.view addConstraints:hconstraint];
[self.view addConstraints:hconstraint1];
[self.view addConstraints:vconstraint];
[self.view addConstraints:vconstraint1];
**/
}
总结：通过一个小小的编程，使大家初步了解了NSLayoutConstraint的使用规则和作用。这两种方式各有特点，本人比较喜欢用第二种，因为感觉代码较少。在使用NSLayoutConstraint 系统自动布局时，注意的地方很多，细心一点，用起来还是很方便的。
