AutoLayout詳解+手把手實戰(轉載)

時間 2019-11-13

標籤 autolayout 詳解手把手實戰轉載简体版

原文原文鏈接

首先說一下這篇博客雖然是標記爲原創，可是事實並不是本人親自寫出來的，知識點和例子本人花了一天各處查找和整理最終決定寫一個彙總的詳解，解去各位朋友處處盲目查找的必要，由於不是轉載某一我的的內容，故此不標記爲轉載，由於加入了我的的理解和細心整理所以標爲原創，請諒解！php

1.首先咱們要明確，當咱們使用自動佈局的時候爲了避免讓Contraint和view自己的autoresize屬性發生衝突，咱們首先須要把控件的屬性設爲setTranslatesAutoresizingMaskIntoConstraints:NOhtml

2.分清楚兩個函數的不一樣用處ios

@1+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;git

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

使用以前先明確一點：既然是佈局，再咱們佈局的時候必須是相對的對吧，因此咱們佈局一般都是把兩個view在一塊兒捆綁，相互之間存在某種關係作一些約束，一般不存在一個view佈局的現象！數組

注意到第一個函數是一個格式化輸入( format)，外加輸出的是一個數組，通常來講格式化的會包含不少信息量的，因此這個也不例外，能夠包含許多佈局信息app

首先說一下兩個函數的使用的不一樣方式ide

constraintWithItem函數的使用方式直接用addConstraint添加到父親視圖就行了函數

eg：佈局

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:tfEmail

attribute:NSLayoutAttributeHeight

relatedBy:NSLayoutRelationEqual

toItem:nil

attribute:NSLayoutAttributeNotAnAttribute

multiplier:1.0

constant:35]];

建立約束的方式以下：

[NSLayoutConstraint constraintWithItem:(id)item

attribute:(NSLayoutAttribute)attribute

relatedBy:(NSLayoutRelation)relation

toItem:(id)otherItem

attribute:(NSLayoutAttribute)otherAttribute

multiplier:(CGFloat)multiplier

constant:(CGFloat)constant]

參數說明:

第一個參數:指定約束左邊的視圖view1

第二個參數:指定view1的屬性attr1，具體屬性見文末。

第三個參數:指定左右兩邊的視圖的關係relation，具體關係見文末。

第四個參數:指定約束右邊的視圖view2

第五個參數:指定view2的屬性attr2，具體屬性見文末。

第六個參數:指定一個與view2屬性相乘的乘數multiplier

第七個參數:指定一個與view2屬性相加的浮點數constant

這個函數的對照公式爲

view1.attr1 <relation> view2.attr2 * multiplier + constant

注意:

1.若是你想設置的約束裏不須要第二個view，要將第四個參數設爲nil，第五個參數設爲NSLayoutAttributeNotAnAttribute

舉例:

[NSLayoutConstraint constraintWithItem:view1

attribute:NSLayoutAttributeLeft

relatedBy:NSLayoutRelationEqual

toItem:view2

attribute:NSLayoutAttributeRight

multiplier:1

constant:10]

翻譯過來就是:view1的左側，在，view2的右側，再多10個點，的地方

(經典)。

附視圖的屬性和關係的值

typedef NS_ENUM(NSInteger, NSLayoutRelation) {

NSLayoutRelationLessThanOrEqual = -1, //小於等於

NSLayoutRelationEqual = 0, //等於

NSLayoutRelationGreaterThanOrEqual = 1, //大於等於

};

typedef NS_ENUM(NSInteger, NSLayoutAttribute) {

NSLayoutAttributeLeft = 1, //左側

NSLayoutAttributeRight, //右側

NSLayoutAttributeTop, //上方

NSLayoutAttributeBottom, //下方

NSLayoutAttributeLeading, //首部

NSLayoutAttributeTrailing, //尾部

NSLayoutAttributeWidth, //寬度

NSLayoutAttributeHeight, //高度

NSLayoutAttributeCenterX, //X軸中心

NSLayoutAttributeCenterY, //Y軸中心

NSLayoutAttributeBaseline, //文本底標線

NSLayoutAttributeNotAnAttribute = 0 //沒有屬性

};

NSLayoutAttributeLeft/NSLayoutAttributeRight 和 NSLayoutAttributeLeading/NSLayoutAttributeTrailing的區別是left/right永遠是指左右，而 leading/trailing在某些從右至左習慣的地區會變成，leading是右邊，trailing是左邊。(大概是⊙﹏⊙b)

實戰解析：

UILabel *note = [[UILabel alloc] init];

[note setText:@"歡迎提出寶貴意見！您留下的每一份心意都將澆灌母嬰寶的茁壯成長。"];

[note setLineBreakMode:NSLineBreakByWordWrapping];

note.numberOfLines = 0;

[self.view addSubview:note];

//將自適應向佈局約束的轉化關掉(根據狀況有時須要有時不須要)

[note setTranslatesAutoresizingMaskIntoConstraints:NO];

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:note

attribute:NSLayoutAttributeTop

relatedBy:NSLayoutRelationEqual

toItem:_nab //

_nab是導航條

attribute:NSLayoutAttributeBottom

multiplier:1.0

constant:10]];

文字解釋：這個文字處於導航條下面+10的位置：

代碼解釋：note.frame.origin.y = _nab.frame.origin.y+_nab.frame.size.height + 10

字面量解釋: note.NSLayoutAttributeTop

NSLayoutRelationEqual_nab.NSLayoutAttributeBottom*1.0 + 10

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:note

attribute:NSLayoutAttributeLeft

relatedBy:NSLayoutRelationEqual

toItem:self.view

attribute:NSLayoutAttributeLeft

multiplier:1.0

constant:10]];

這個你們算是給你本身一個測試，看能不能對着講出它的含義來，注意一點他們的約束都是加在他們共同的父視圖self.view上

關於constraintsWithVisualFormat：函數介紹：

constraintsWithVisualFormat:參數爲NSString型，指定Contsraint的屬性，是垂直方向的限定仍是水平方向的限定，參數定義通常以下：

V:|-(>=XXX) :表示垂直方向上相對於SuperView大於、等於、小於某個距離

如果要定義水平方向，則將V：改爲H：便可

在接着後面-[]中括號裏面對當前的View/控件的高度/寬度進行設定；

options：字典類型的值；這裏的值通常在系統定義的一個enum裏面選取

metrics：nil；通常爲nil ，參數類型爲NSDictionary，從外部傳入 //衡量標準

views：就是上面所加入到NSDictionary中的綁定的View

在這裏要注意的是 AddConstraints 和 AddConstraint 之間的區別，一個添加的參數是NSArray，一個是NSLayoutConstraint

使用規則

|: 表示父視圖

-:表示距離

V: :表示垂直

H: :表示水平

>= :表示視圖間距、寬度和高度必須大於或等於某個值

<= :表示視圖間距、寬度和高度必須小宇或等於某個值

== :表示視圖間距、寬度或者高度必須等於某個值

@ :>=、<=、== 限制最大爲 1000

1.|-[view]-|: 視圖處在父視圖的左右邊緣內

2.|-[view] : 視圖處在父視圖的左邊緣

3.|[view] : 視圖和父視圖左邊對齊

4.-[view]- : 設置視圖的寬度高度

5.|-30.0-[view]-30.0-|: 表示離父視圖左右間距 30

6.[view(200.0)] : 表示視圖寬度爲 200.0

7.|-[view(view1)]-[view1]-| :表示視圖寬度同樣，而且在父視圖左右邊緣內

8. V:|-[view(50.0)] : 視圖高度爲 50

9: V:|-(==padding)-[imageView]->=0-[button]-(==padding)-| : 表示離父視圖的距離

爲Padding,這兩個視圖間距必須大於或等於0而且距離底部父視圖爲 padding。

10: [wideView(>=60@700)] :視圖的寬度爲至少爲60 不能超過 700

11: 若是沒有聲明方向默認爲水平 V:

使用方式：

1.首先須要建立一個數組來保存，這個約束返回的數組

NSMutableArray *tmpConstraints = [NSMutableArray array];

2.第二點就是建立約束，建立的方式按上面的規定寫

[tmpConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[tfEmail]-10-[btnSubmit(==35)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(tfEmail,btnSubmit)]];

[tmpConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[btnSubmit]-10-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(btnSubmit)]];

3.把建立的約束保存到以前建立的數組中

4.把這個包含約束的總數組，加到他們共同的父視圖self.view上做爲一個約束數組傳遞進去

[self.view addConstraints:tmpConstraints];

實戰解讀：

[tmpConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[btnSubmit]-10-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(btnSubmit)]];

H 水平方向

：| 父視圖左邊

- 距離

10 10個像素

- 距離

[btnSubmit] 提交按鈕

- 距離

10 10個像素

- 距離

| 父視圖右邊

總的解讀：這個提交按鈕距離父視圖左邊10個像素，右邊10個像素

V:垂直方向上