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;

在刪除約束時要找準約束的綁定對象。