iOS自動布局進階用法

本文主要介紹幾個我遇到並總結的相對高級的用法（當然啦牛人會覺得這也不算什么）。 簡單的storyboard中上下左右約束，固定寬高啥的用法在這里就不做贅述了。

autolayout自動布局是iOS6以后出現的，但是在開始的一段時間里大家並不怎么會用，都是一上來先勾掉。之后隨着5s，iPhone6的出現屏幕多種多樣。用多層if來判斷尺寸已經完全hold不住了才開始學習自動布局。

在這之前有個叫自動伸縮的autoresizing屬性，這個主要用於一個控件和自己父控件之間的關系。只有autolayout才真正可以在任意兩個控件中建立關系。

 如果你不是在董鉑然博客園看到本文 請點擊查看原文

關於autoresizing

autoresizing需要注意的是 storyboard中設置的約束和手碼中設置的約束是相反的。 storyboard圖形頁面里點的右邊的線和下邊的線的意思是“固定”

而手碼中常用的autoresizingMasks屬性中的枚舉都是Flexible可“伸縮”的。 所以假如想要讓右邊和下邊的距離固定，在代碼中應該設置左邊和上邊的可伸縮約束。

yellowView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin |UIViewAutoresizingFlexibleTopMargin;

有了autolayout之后這個自動伸縮很少用了 一共七個屬性。

無，寬可伸縮，高可伸縮，左間距可伸縮，右間距可伸縮，上間距可伸縮，下間距可伸縮

     UIViewAutoresizingNone                 = 0,

     UIViewAutoresizingFlexibleWidth        = 1 << 1,

     UIViewAutoresizingFlexibleHeight       = 1 << 4,

     UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,

     UIViewAutoresizingFlexibleRightMargin  = 1 << 2,

     UIViewAutoresizingFlexibleTopMargin    = 1 << 3,

     UIViewAutoresizingFlexibleBottomMargin = 1 << 5

 每個枚舉值都是位移枚舉，可以在一行代碼中傳多個值。

 

關於label的自動識別大小

label想要在界面中顯示成這樣

意義是下面的控件可以根據上面label的底部進行自動調整。 

這個不是用sizetofit設置的，而是用約束，會在程序運行中數據變了約束立即改變，尺寸也立即改變。

這種設計方法是：

1.設置label的左邊和上邊的約束，然后再設置下最寬度約束假設是150，把label里面的lines屬性設置成0即隨意任意多行。 這樣里面的文字就會自動換行並且一直顯示完，label的背景色也是自動匹配。

2.但是右邊還多出了一塊。label的右邊還有一塊藍色並不是緊緊的挨着。這時就要選中那個寬度的約束 再到右邊把Relation由原本的equal改成 less than or Equal 。這時候左邊的約束顯示變了  變成≤了。

運行之后結果是：這里可以清楚的看到label的右邊緊緊挨着邊了。

3.但是有時候數據可能為空，一旦為空label的大小就被擠沒有了，下面的控件也凌亂了。所以為了保證就算數據沒有空當也要留着占位，就找給他設置兩個高度約束，一個是大於等於一個是小於等於，包裹成一個范圍。 這時候要把上面width的小於等於改成equal。

就像這樣 這時候運行效果 遇到大量文字和沒文字的兩種效果是

起到了占位的作用。即使文字沒有地方還在。

 

關於Constraints在哪找的問題

左邊的圖constraints有的在label節點下有的在View節點下，究竟是什么原因決定了constraints在哪個節點下面？

是看這個約束是否依賴了別的控件，如果就是自己設置固定寬高啥的不關系到別人那就是在自己下面。如果依賴誰設置了間距，那這個約束就會放在自己和依賴的控件的最小公共父控件下。

如圖   

 

 

關於手碼編寫autolayout約束

storyboard界面里面的托拉拽固然方便但是不能批量操作（董鉑然原創），假如有類似的30個小控件，storyboard就太麻煩了，手碼的話一個循環就完事了

手碼創建就是所謂的那七個參數的長的像句子似得方法

之后再在相應的節點下添加約束，有添加一個和添加一組 兩種方法。

// 高度約束（添加到yellowView身上）
    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:yellowView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:50];
    [yellowView addConstraint:heightConstraint];
    
    // 間距約束（添加到self.view身上）
    CGFloat margin = 20;
    [self.view addConstraints:@[
                                // 左邊
                                [NSLayoutConstraint constraintWithItem:yellowView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:margin],
                                
                                // 右邊
                                [NSLayoutConstraint constraintWithItem:yellowView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant: - margin],
                                
                                // 底部
                                [NSLayoutConstraint constraintWithItem:yellowView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant: - margin]
                                ]];
}

　　

這里用到了一個核心公式，任何兩個控件間的約束都可以通過這個公式算出

obj1.property1 =（obj2.property2 * multiplier）+ constant value

multiplier和constant 就是向量系數和偏移量

還有為了避免和系統生成的自動伸縮的約束不沖突 一般加上這句

系統默認這個屬性是yes

 

 

關於VFL語言 

Visual Format Language，翻譯過來是“可視化格式語言”  是蘋果公司為了簡化Autolayout的編碼而推出的抽象語言

相當於打出象形文字似得，而且要全在字符串里寫，遇到錯誤比較難調，但是相對來說代碼精簡了不少。

然后在添加約束的時候就會用到系統提供的另外一種方法。

    NSArray *contraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:metrics views:views];

VFL的詳細語法 可以在官方文檔中 搜 “Visual Format” 就能搜到 

上面的方法中傳到的兩個參數metrics 和 views 是兩個字典。（董鉑然原創） 第一個字典metrics是用來告訴系統里面的每一個值對應哪個字母 

第二個字典views是 用來告訴里面的每一個控件對應字符串里的什么

如果整個VFL語言里的所有控件你都是用原名寫在里面的，那可以用宏代替

括號里可以傳多個值逗號隔開

 

關於常用的手碼約束的第三方框架

有 Masonry 和 UIView+Autolayout

框架地址是：

https://github.com/Masonry/Masonry 

https://github.com/smileyborg/UIView-AutoLayout

 

UIView+Autolayout框架

這個相對於masonry，是個輕量級的框架易於上手，里面一共也就兩個文件。也非常好用，都是用auto開頭。適用於約束不經常改變的項目

事例用法：

直接設置四周的間隔距離

[self.yellowView autoPinEdgesToSuperviewEdgesWithInsets:UIEdgeInsetsMake(20, 20, 20, 20)]; //直接設置四周的間隔距離

設置三個間隔，然后再添加個高度，

[self.yellowView autoPinEdgesToSuperviewEdgesWithInsets:UIEdgeInsetsMake(20, 20, 20, 20)excludingEdge:ALEdgeTop]; // 讓頂部約束無效
    [self.yellowView autoSetDimension:ALDimensionHeight toSize:100]; // 自己再添加個高度約束正好四個

也可以直接設置大小

[self.yellowView autoSetDimensionsToSize:CGSizeMake(200, 200)];

總之還有很多用法，在這不一一介紹了，大概就是這個代碼風格。有興趣的可以去上面說的那個github地址上仔細查看。

 

 

Masonry框架

這個框架是重量級的里面好多文件，難於上手，但是用熟練了的話比上面那個牛X，適合於約束要經常改變的項目。

示例代碼：

添加距離四個方向20的間隔約束

[yellowView mas_makeConstraints:^(MASConstraintMaker *make) {
        // make代表yellowView
        // 添加約束
        make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(20, 20, 20, 20));
    }];

下面這個是更新約束，非常方便會自動識別上左下右的屬性來更改。

[self.yellowView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view.mas_left).offset(100);
        make.top.equalTo(self.view.mas_top).offset(100);
        make.right.equalTo(self.view.mas_right).offset(-100);
        make.bottom.equalTo(self.view.mas_bottom).offset(-100);
    }];

還有一些別的屬性用法。

主要是作者設置的屬性比較多這張圖摘自他的github，有興趣可以去github仔細看

 

關於想給約束改變添加動畫。

因為約束的改變是瞬時操作和frame的概念不一樣，所以把約束的代碼放在動畫的block里是無效的

錯！

正確做法是，把約束寫在外面面，然后在動畫的block中包裹 layoutifneed

對！

 如果你不是在董鉑然博客園看到本文 請點擊查看原文

對了還有一個注意點是：需要依賴父控件的約束要在添加了父控件之后再寫。

有什么不同的看法歡迎評論。本博客所有文章均原創，轉載請注明出處