NSLayoutConstraint|NSLayoutConstraint (原生自动布局) NSLayoutConstraint(原生自动布局

文章图片
![2.png](http://upload-images.jianshu.io/upload_images/870787-edc0bdc70c314335.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

如果一个界面创建三个View，要求第一行两个View等高等宽，第三个View与上面两个View等高，无论是横屏还是竖屏。
那该如何编写使得View自动布局呢？那就要使用NSLayoutConstraint - 系统自动布局了

-----------------自动布局方法1 ----------------

[NSLayoutConstraint constraintWithItem:(id)itemattribute:(NSLayoutAttribute)attributerelatedBy:(NSLayoutRelation)relationtoItem:(id)otherItemattribute:(NSLayoutAttribute)otherAttributemultiplier:(CGFloat)multiplierconstant:(CGFloat)constant]

1.参数说明:

第一个参数:指定约束左边的视图view1

第二个参数:指定view1的属性attr1

第三个参数:指定左右两边的视图的关系relation

第四个参数:指定约束右边的视图view2

第五个参数:指定view2的属性attr2

第六个参数:指定一个与view2属性相乘的乘数multiplier

第七个参数:指定一个与view2属性相加的浮点数constant

依据的公式是：view1.attr1 = view2.attr2*multiplier +constant 2.NSLayoutAttribute的类型：

NSLayoutAttribute	类型
NSLayoutAttributeLeft	视图的左边
NSLayoutAttributeRight	视图的右边
NSLayoutAttributeTop	视图的上边
NSLayoutAttributeBottom	视图的下边
NSLayoutAttributeLeading	视图的前边
NSLayoutAttributeTrailing	视图的后边
NSLayoutAttributeWidth	视图的宽度
NSLayoutAttributeHeight	视图的高度
NSLayoutAttributeCenterX	视图的中点的X值
NSLayoutAttributeCenterY	视图中点的Y值
NSLayoutAttributeBaseline	视图的基准线
NSLayoutAttributeNotAnAttribute	无属性

3.NSLayoutRelation的类型：

NSLayoutRelation	类型
NSLayoutRelationLessThanOrEqual	视图关系小于或等于
NSLayoutRelationEqual	视图关系等于
NSLayoutRelationGreaterThanOrEqual	视图关系大于或等于

核心代码如下：

- (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; //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 ---------------- 自动布局使用可视化语言:VFL(Visual Format Language)
1. 自动布局的相关参数

NSArray *constrArray = [NSLayoutConstraint constraintsWithVisualFormat:@"string类型" options: metrics: views:]；

2. 解释： a) 第一个参数：使用VFL格式化的字符串，可以参见官方的帮助文档；
b) 第二个参数：指定VFL中所有对象的布局属性和方向。举例：有2个视图使用VFL进行布局，可以使用NSLayoutFormatAlignAllLeft，就让两个视图左对齐；
c) 第三个参数：度量或者指标的字典，字典里面有相关的键值对来控制相关的度量指标，通过key获取；
d) 第四个参数：指定约束的视图：一个或多个。
3. VFL语言的规则 a) "H" 表示水平方向，"V"表示垂直方向；
b) "|" 表示superview的边界；
c) "[]" 表示view，"()"表示尺寸，它们可以多个条件组合，中间使用逗号分隔，举例：[view(>=70, <=100)];
d) "-" 表示间隙；
e) "@"表示优先级。举例：V:|-50@750-[view(55)]

核心代码如下：

- (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; //创建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]; }

收藏 @学长的日常的
http://www.jianshu.com/p/bab69690cb1a
并添加 Demo: https://github.com/policx/autoLayout

【NSLayoutConstraint|NSLayoutConstraint (原生自动布局)】总结：http://www.jianshu.com/p/bab69690cb1a 学长的日常
通过一个小小的编程，使大家初步了解了NSLayoutConstraint的使用规则和作用。这两种方式各有特点，本人比较喜欢用第二种，因为感觉代码较少。在使用NSLayoutConstraint 系统自动布局时，注意的地方很多，细心一点，用起来还是很方便的。