iOS 自動布局詳細介紹

標籤：

1. 自動布局的理解

iOS自動布局很有用，可以在不同size的螢幕上運行，原先看的頭痛，還是習慣用最蠢的[UIScreen mainScreen].bounds.size.width等來布局，後來實在不行了，開始好好地看自動布局，發現理解後真的很好用，現在就來分享分享我的心得吧。

 

首先要明白一個控制項在螢幕上的位置怎麼樣才能真正地確定。最簡單的情況是：

1. 例如一個矩形，只要知道它左上方點的座標，寬，高，那麼位置就固定了。

2. 例如一個圓，只要知道它的圓心座標，半徑，那麼位置就固定了。

自動布局就是這個意思，它可以理解為活的布局，因為確定一個控制項的位置有很多方法，死死地確定位置，那麼螢幕size變了，可能位置就不是我們想要的。

所以做自動布局的時候，需要思考的就是螢幕變的情況下，我設定的約束條件還能使它在我想要的位置，那麼這些約束條件就是好的。

舉個最簡單的例子。讓一個矩形在螢幕正中。

設定它的左上方座標，寬，高。那麼螢幕變了位置肯定變了。

設定它的中心為螢幕的中心，寬，高，那麼螢幕size變了，它肯定還在中心，這就是好的約束。

所以我的理解就是，自動布局的核心就在於，設定好的約束，讓螢幕的size變化時，它所在的位置仍然是我們想要的。

2. 自動布局的實現

自動布局的實現只有兩種。

1. storyboard 

2. 純程式碼控制

在storyboard上設定約束條件很容易，按住Ctrl拖動就可以了。如果你設定的約束條件不足或者衝突，那麼會有紅色的提示；如果你設定的約束條件和你控制項所在的位置有誤差，那麼會有黃色的提示，按下讓系統更改就行了。

最容易的方法就是，拖控制項的時候讓它和螢幕上顯示的藍線對齊，最後reset to suggested constraints就行了。

不過有些情況還是需要自己來設定。

3. 純程式碼設定約束

很多人是純程式碼流，如果用純程式碼來設定約束，也有很多方法，比較常見的是3種。

1.  constraints with visualFormat

例如

//給文字框添加約束    self.sendTextView.translatesAutoresizingMaskIntoConstraints = NO;    NSString *sendStringH = [NSString stringWithFormat:@"H:|-(%d)-[_sendTextView(%f)]",padding,textViewWidth];    NSString *sendStringV = [NSString stringWithFormat:@"V:|-(%d)-[_sendTextView]-(%d)-|",padding,padding];    NSArray *sendTextViewConstraintH = [NSLayoutConstraint constraintsWithVisualFormat:sendStringH options:0 metrics:0 views:NSDictionaryOfVariableBindings(_sendTextView)];    [self addConstraints:sendTextViewConstraintH];        NSArray *sendTextViewConstraintV = [NSLayoutConstraint constraintsWithVisualFormat:sendStringV options:0 metrics:0 views:NSDictionaryOfVariableBindings(_sendTextView)];    [self addConstraints:sendTextViewConstraintV];

有兩個需要注意的地方：

因為大部分情況是相對於父視圖和兄弟視圖的布局，所以一定要先讓父視圖addSubView，然後在設定約束。

[]裡要用_View,不要用self.view,這個stackOverflow上有解釋。

 

它的用法主要是constraintsWithVisualFormat的參數的指定。參數為NSString型，指定Contsraint的屬性，是垂直方向的限定還是水平方向的限定，參數定義一般如下：

V:|-(>=x)-[_view(x)]-((>=x))-| :表示垂直方向上相對於SuperView左右間距大於、等於、小於某個距離

若是要定義水平方向，則將V：改成H：就可以了。
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(>[email protected])]  :視圖的寬度為至少為60 不能超過  700 ，最大為1000

2. 通過函數顯示地添加一個個約束

@interface NSLayoutConstraint : NSObject...@property (readonly, assign) id firstItem;@property (readonly) NSLayoutAttribute firstAttribute;@property (readonly) NSLayoutRelation relation;@property (readonly, assign) id secondItem;@property (readonly) NSLayoutAttribute secondAttribute;@property (readonly) CGFloat multiplier;@property CGFloat constant;...+(instancetype)constraintWithItem:(id)firstItem attribute:(NSLayoutAttribute)firstAttribute  relatedBy:(NSLayoutRelation)relation  toItem:(id)secondItem attribute:(NSLayoutAttribute)secondAttribute  multiplier:(CGFloat)multiplier constant:(CGFloat)constant;

主要是通過上面的類函數顯示地添加約束。

這個我也是學習的別人的，地址：http://www.2cto.com/kf/201504/391282.html

這個寫的很詳細，大家看了應該就會了。

3. 第三方開源架構：masonry

這個主要用塊來做的，很清晰明了，大家可以去學習源碼，很有益。

不過我自己也還沒看，只是把別人寫的學習了下，大家有興趣地也可以去學習

地址：http://adad184.com/2014/09/28/use-masonry-to-quick-solve-autolayout/

iOS 自動布局詳細介紹