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]];

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

注意 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的距離。

刪除約束:

  removeConstraint:(NSLayoutConstraint *) constraint;

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM