AutoLayout的三种设置方式之——NSLayoutConstraint代码篇

AutoLayout是从IOS 6开始苹果引入来取代autoresizing的新的布局技术，该技术有三种设置方式，等下我来为你们一一叙述一下。

在说三种设置方式前，咱们先简单的说一下autolayout可以设置哪些行为。

1.视图的大小（即视图的绝对大小）。

2.视图的位置（视图相对于父视图或者兄弟视图的位置）。

3.视图的对齐方式（相对于父视图或者相对于兄弟视图）。

　　能够看到autolayout相比autoresizing技术来讲要灵活的多，该技术有不少布局的约束设置。此次主要讲的用代码来设置AutoLayout，代码向咱们须要添加autoLayout视图使用该方法

+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

该方法实际上就是知足一个数学关系

item1 =(>=,<=) multiplier * item2 + constant。

参数说明：

view1：第一个视图即item1。

attr1：是第一个视图选择的属性

relation：即中间的关系（= , >= , <=）

view2：第二个视图即item2。

attr2：是第二个视图选择的属性

c：就是常熟constant。

　　举个简单的例子来讲咱们想设置第一个视图的宽度是第二个视图宽度的2倍，咱们能够这样写：

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:view1 attribute:NSLayoutAttributeWidth multiplier:2 constant:0]];

能够看到这里咱们item1是view1，item2是view2，attr1是attribute:NSLayoutAttributeWidth，attr2是attribute:NSLayoutAttributeWidth，relation是NSLayoutRelationEqual，mutiplier 是2，constant是0.

带入上面的公式得：

第一个视图（宽度） = 2 * 第二个视图（宽度） + 0 

以下是咱们全部能够控制的属性：

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

 

　　

 

 

 

 

 

 

 

 

 

 

 

这里解释一下前边NSLayoutAttributeLeading和后边NSLayoutAttributeTrailing，这里前边和后边并非老是为左边和右边的，有些国家的前边是右边后边是左边因此这样设定是为了国际化考虑。还有视图基准线NSLayoutAttributeBaseline一般是指视图的底部放文字的地方。

　　接下咱们一块儿来看一个demo

　　咱们想让两个视图Y方向居中，第一个视图距离左边缘20，第一个视图以第二个视图等大而且X方向距离为100。

 1 UIView *view1 = [[UIView alloc] init];
 2     UIView *view2 = [[UIView alloc] init];
 3     [self.view addSubview:view1];
 4     [self.view addSubview:view2];
 5     view1.translatesAutoresizingMaskIntoConstraints = NO;
 6     view2.translatesAutoresizingMaskIntoConstraints = NO;
 7     view1.backgroundColor = [UIColor blueColor];
 8     view2.backgroundColor = [UIColor grayColor];
 9     //set view1 height and width
10     [view1 addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:100]];
11     [view1 addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:100]];
12     //set view2 height and width
13     [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:view1 attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];
14     [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:view1 attribute:NSLayoutAttributeHeight multiplier:1 constant:0]];
15     //set relationship between view1 and view2
16     [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:view1 attribute:NSLayoutAttributeRight multiplier:1 constant:100]];
17     [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:view2 attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];
18     //set relationship between topView and view1
19     [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:20]];
20     [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];

下面咱们一块儿来看一下这段代码

注意 五、6行设置view的 translatesAutoresizingMaskIntoConstraints 属性为NO，意思就是遵循autoLayout抛弃原有设置的高度宽度等，使用autolayout的视图必需要设置该属性。

十、11行设置view1的宽和高，你们可能已经发现item2为nil而且attrbute为attribute:NSLayoutAttributeNotAnAttribute，这样作咱们带入公式就会明白

item1 = m * 0 + constant。也就是直接设置本视图的宽和高。

1三、14行是设置view2的宽高和view1相同，这里细心的同窗可能会发现添加约束的对象并非像上面设置宽高时的view1，而是它们共同的父视图self.view。由于在autolayout中有这样的规定，若是是一元约束，即只针对本身的约束，那么就直接添加在该视图上。若是是二元约束，那么就必需要添加在它们的共同最近的父视图上面。

1五、16行是设置view1和view2的关系，设置view1和view2具备相同的Y，而且view2在view1右边距离100的位置。

1八、19行最后咱们设置了view1左边距离父视图左边20的距离，而且view1的Y等于父视图Y的中点值。

经过以上的设置，咱们运行的结果就是：

如图，视图1在距左边20的位置，视图1视图2都Y方向居中而且相距100的距离。

删除约束：

　　removeConstraint:(NSLayoutConstraint *) constraint;

在删除约束时要找准约束的绑定对象。