AutoLayout的三種設定方式之——NSLayoutConstraint代碼篇，nslayoutconstraint

AutoLayout的三種設定方式之——NSLayoutConstraint代碼篇，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 width10     [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 width13     [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 view216     [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 view119     [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]];

下面我們一起來看一下這段代碼

注意 5、6行設定view的 translatesAutoresizingMaskIntoConstraints 屬性為NO，意思就是遵循autoLayout拋棄原有設定的高度寬度等，使用autolayout的視圖必須要設定該屬性。

10、11行設定view1的寬和高，大家可能已經發現item2為nil並且attrbute為attribute:NSLayoutAttributeNotAnAttribute，這樣做我們帶入公式就會明白

item1 = m * 0 + constant。也就是直接設定本視圖的寬和高。

13、14行是設定view2的寬高和view1相同，這裡細心的同學可能會發現添加約束的對象並不是像上面設定寬高時的view1，而是它們共同的父視圖self.view。因為在autolayout中有這樣的規定，如果是一元約束，即只針對自己的約束，那麼就直接添加在該視圖上。如果是二元約束，那麼就必須要添加在它們的共同最近的父視圖上面。

15、16行是設定view1和view2的關係，設定view1和view2具有相同的Y，並且view2在view1右邊距離100的位置。

18、19行最後我們設定了view1左邊距離父視圖左邊20的距離，並且view1的Y等於父視圖Y的中點值。

通過以上的設定，我們啟動並執行結果就是：

，視圖1在距左邊20的位置，視圖1視圖2都Y方向置中並且相距100的距離。