ios-AutoLayout(自動布局代碼控制)簡單總結

標籤：

轉自：http://blog.sina.com.cn/s/blog_7c336a830102vaht.html

原理：IOS6.0 之後，蘋果最佳化了UI介面的布局方式，提出了自動布局的概念，和之前的autoresizing相比功能更強大。子視圖基於父視圖的自動布局顯示。都是父視圖去添加對子視圖的約束。

在這裡主要說的是通過代碼對自動布局視圖的實現。

代碼中一般用到的有兩個添加約束的方式：

1.- (void)addConstraint:(NSLayoutConstraint *)constraint NS_AVAILABLE_IOS(6_0);

2.- (void)addConstraints:(NSArray *)constraints NS_AVAILABLE_IOS(6_0);

<</span>

在使用自動布局之前要對子視圖的布局方式進行調整，用到這個UIView的屬性。

- (BOOL)translatesAutoresizingMaskIntoConstraints NS_AVAILABLE_IOS(6_0); // Default YES

需要將其設定為NO；

>

下面用簡單例子說明一下：

   UIView *v1 = [[UIView alloc] initWithFrame:CGRectZero];
   v1.translatesAutoresizingMaskIntoConstraints = NO;
    v1.backgroundColor = [UIColor redColor];
    [self.view addSubview:v1];

    UIView *v2 = [[UIView alloc] initWithFrame:CGRectZero];
    v2.backgroundColor = [UIColor grayColor];
    v2.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:v2];//添加兩個允許自動布局的子視圖

   

   [self.view addConstraint:[NSLayoutConstraint constraintWithItem:v1
                                                          attribute:NSLayoutAttributeWidth
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeWidth
                                                         multiplier:1.0
                                                           constant:0]];//設定子視圖的寬度和父視圖的寬度相同

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:v1
                                                          attribute:NSLayoutAttributeHeight
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeHeight
                                                         multiplier:0.5
                                                           constant:0]];//設定子視圖的高度是父視圖高度的一半

 

   [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[v1][v2(==v1)]-0-|" options:0 metrics:nil views:views]];//通過addConstraints 添加對水平方向上v1的控制--距離父視圖左側距離為0（距離為0的話也可省略）同時將v2的水平方向的寬度和v1設定成相同
    
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[v1][v2(==v1)]|" options:0 metrics:nil views:views]];/通過addConstraints 添加對垂直方向上v1的控制--距離父視圖上側距離為0（距離為0的話也可省略）同時將v2的垂直方向的高度和v1設定成相同
    
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[v1]-0-[v2]-0-|" options:0 metrics:nil views:views]];//最後是垂直布局兩個子view

這樣就可以實現上下兩個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(>[email protected])]  :視圖的寬度為至少為60 不能超過  700

11: 如果沒有聲明方向預設為  水平  V:

ios-AutoLayout(自動布局代碼控制)簡單總結