什么是NSLayoutConstraint?
在xib中,我们可以用拖拽约束的方式来给空间添加约束条件,但是如果控件过多,则整个xib文件中的线条会变得混乱不堪,虽然苹果在极力推荐可视化的加约束方式,但是还是给我们提供了代码的方式来添加约束:NSLayoutConstraint。
如何使用NSLayoutConstraint?
在使用NSLayoutConstraint前,我们需要知道一个小的知识点:Autoresizing Mask。在使用 Auto Layout 时,首先需要将视图的 setTranslatesAutoresizingMaskIntoConstraints
属性设置为 NO。这个属性默认为 YES。当它为 YES 时,运行时系统会自动将 Autoresizing Mask 转换为 Auto Layout 的约束,这些约束很有可能会和我们自己添加的产生冲突。 我们常常会忘了做这一步,然后引起的约束报错就是这样的:
在xib中,如果我们勾选了use auto layout
,则编译器会自动帮我们关闭Autoresizing Mask,如果是使用代码添加约束,则需要手动关闭Autoresizing Mask。
setTranslatesAutoresizingMaskIntoConstraints
这个方法是交给被添加约束的视图来执行的,关闭该视图的Autoresizing Mask。在添加约束前,就应该关闭该属性。
使用NSLayoutConstraint为视图添加约束
Auto Layout 中约束对应的类为 NSLayoutConstraint,一个 NSLayoutConstraint 实例代表一条约束。
NSLayoutConstraint有两个方法,我们主要介绍 constraintWithItem:也是最常用的:
+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
该方法有7个参数,不过不用但心,这七个参数的联系是很紧密的,前三个和被约束的视图有关,后四个和他的父视图有关。这个方法连起来可以翻译如下:view1的某个属性(attr1)等于view2的某个属性(attr2)的值的多少倍(multiplier)加上某个常量(constant)。描述的是一个view与另外一个view的位置和大小约束关系。其中属性attribute有上、下、左、右、宽、高等,关系relation有小于等于、等于、大于等于。需要注意的是,小于等于 或 大于等于 优先会使用 等于 关系,如果 等于 不能满足,才会使用 小于 或 大于。例如设置一个 大于等于100 的关系,默认会是 100,当视图被拉伸时,100 无法被满足,尺寸才会变得更大。
下边我们上代码,看看如何使用这个类来给视图添加约束。
假如我们设计一个简单的页面。一个子view在父view中,其中子view的上下左右边缘都离父view的边缘40个像素。这个我们该如何写呢?如下:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.view.backgroundColor = [UIColor yellowColor];
UIView *subView = [[UIView alloc] init];
subView.backgroundColor = [UIColor redColor];
// 在设置约束前,先将子视图添加进来
[self.view addSubview:subView];
// 使用autoLayout约束,禁止将AutoresizingMask转换为约束
[subView setTranslatesAutoresizingMaskIntoConstraints:NO];
// 设置subView相对于VIEW的上左下右各40像素
NSLayoutConstraint *constraint1 = [NSLayoutConstraint constraintWithItem:subView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:40];
NSLayoutConstraint *constraint2 = [NSLayoutConstraint constraintWithItem:subView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:40];
// 由于iOS坐标系的原点在左上角,所以设置右边距使用负值
NSLayoutConstraint *constraint3 = [NSLayoutConstraint constraintWithItem:subView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-40];
// 由于iOS坐标系的原点在左上角,所以设置下边距使用负值
NSLayoutConstraint *constraint4 = [NSLayoutConstraint constraintWithItem:subView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-40];
// 将四条约束加进数组中
NSArray *array = [NSArray arrayWithObjects:constraint1, constraint2, constraint3, constraint4 ,nil];
// 把约束条件设置到父视图的Contraints中
[self.view addConstraints:array];
}
然后我们看运行效果:
这里有几个注意点
- 添加约束前确定已经把需要布局的子view添加到父view上了
- 一定要禁止将Autoresizing Mask转换为约束
- 要把子view的约束加在父view上
- 因为iOS中原点在左上角所以使用offset时注意right和bottom用负数
我们再添加一个需求:
子view在父view的中间,且子view长200,高100。
// ssubView在subView中间,宽高200,100
UIView *ssubView = [[UIView alloc] init];
ssubView.backgroundColor = [UIColor blackColor];
[self.view addSubview:ssubView];
[ssubView setTranslatesAutoresizingMaskIntoConstraints:NO];
// 加约束
NSLayoutConstraint *sContraint1 = [NSLayoutConstraint constraintWithItem:ssubView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
NSLayoutConstraint *sContraint2 = [NSLayoutConstraint constraintWithItem:ssubView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0];
NSLayoutConstraint *sConstraint3 = [NSLayoutConstraint constraintWithItem:ssubView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:300];
NSLayoutConstraint *sConstraint4 = [NSLayoutConstraint constraintWithItem:ssubView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:200];
NSArray *array2 = [NSArray arrayWithObjects:sContraint1, sContraint2,sConstraint3,sConstraint4, nil];
[self.view addConstraints: array2];
查看运行效果:
这里有几个注意点
- 如果是设置view自身的属性,不涉及到与其他view的位置约束关系。比如view自身的宽、高等约束时,方法
constraintWithItem:
的第四个参数view2(secondItem)
应设为nil
;且第五个参数attire(secondAttribute
)应设为NSLayoutAttributeNotAnAttribute
。 - 在设置宽和高这两个约束时,
relatedBy
参数使用的是NSLayoutRelationGreaterThanOrEqual
,而不是NSLayoutRelationEqual
。因为 Auto Layout 是相对布局,所以通常你不应该直接设置宽度和高度这种固定不变的值,除非你很确定视图的宽度或高度需要保持不变。