IOS開發之UI佈局

前言：本篇隨筆會經常更新，隨著本人對佈局的深入學習，會不斷補充新的知識、新的使用技巧、新的認識等等。

1、Autoresizing(在代碼中使用)

先簡單的看看下麵的代碼，以及左邊運行出來的效果，然後後面就會對iPhone模擬器進行旋轉，再看看效果，然後結合代碼中的autoresizingMask屬性來體會一下：

橫屏之後，說明豎屏預設的frame(0,0,100,500)換到橫屏之後會預設在中間一些的位置，但是因為上面設置autoresizingMask屬性是左邊和上邊自動伸縮：

以上就是基本的autoresizing在代碼中的使用。

2、Autolayout的使用（代碼中使用）

在Autolayout之前，有Autoresizing可以做屏幕適配，但是局限性很大，有些任務根本無法完成（Autoresizing只能設置自身和父控制項之間的相對關係）。

相比之下，Autolayout的功能就比Autoresizing的功能就強大的多，它能解決任何控制項之間的關係。

AutoLayout的2個核心概念：

　　①約束：通過給控制項添加約束，來決定控制項的位置和尺寸。

　　　　使用AutoLayout就需要創建約束類創建約束對象：

　　　　　　NSLayoutConstraint *leftLC = [NSLayoutConstraint constrainWithItem:......];

　　②參照：在添加約束時，是依照誰來添加（可以是父控制項或者兄弟控制項）。

如果會使用Autolayout就可以不需要考慮Frame值了。

在實際開發中，如果要使用AutoLayout，要註意一個問題，有的蘋果Cocoa框架提供UIView或者自定義的UIView可能預設設置了相關Autoresizing，那麼可能會和你後面添加的AutoLayout代碼相互衝突，所以就需要下麵的代碼，將Autoresizing自動轉換為AutoLayout：

代碼實現Autolayout的步驟

1. 1. 利用NSLayoutConstraint類創建具體的約束對象
   2. 添加約束對象到相應的view上
   3. - (void)addConstraint:(NSLayoutConstraint *)constraint;
   4. - (void)addConstraints:(NSArray *)constraints;

 　　然後下麵代碼來使用AutoLayout，我們來實現下麵的效果，當然旋轉成豎屏還是要這樣的佈局哦，不然自動佈局還有啥意義：

在代碼實現之前，我需要補充幾個知識：

 使用自動佈局是需要遵守一些約束的規則的：

　　添加約束的規則（1）

　　　　在創建約束之後，需要將其添加到作用的view上
　　　　在添加時要註意目標view需要遵循以下規則：
　　　　1）對於兩個同層級view之間的約束關係，添加到它們的父view上

　　　　
　　添加約束的規則（2）
　　　　2）對於兩個不同層級view之間的約束關係，添加到他們最近的共同父view上
　　　　

　　添加約束的規則（3）
　　　　3）對於有層次關係的兩個view之間的約束關係，添加到層次較高的父view上
　　　　
　　　　在下麵展示全部的代碼中，我抽取一部分來理解上面約束添加規則的意思：

　　　　接著再補充這個約束的類和創建對象的各個參數的意義：

　　　　　　一個NSLayoutConstraint對象就代表一個約束。
　　　　　　創建約束對象的常用方法

　　　　　　　　
　　　　　　　　　　　　　　　　view1 ：要約束的控制項
　　　　　　　　　　　　　　　　 attr1 ：約束的類型（做怎樣的約束）
　　　　　　　　　　　　　　　relation ：與參照控制項之間的關係
　　　　　　　　　　　　　　　　view2 ：參照的控制項
　　　　　　　　　　　　　　　　 attr2 ：約束的類型（做怎樣的約束）
　　　　　　　　　　　　　　multiplier ：乘數
　　　　　　　　　　　　　　　　　　 c ：常量

　　　　 下麵展示實現的完整代碼：

  1 - (void)viewDidLoad {
  2     [super viewDidLoad];
  3     // 1.創建藍色的view
  4     UIView *blueView = [[UIView alloc] init];
  5     blueView.backgroundColor = [UIColor blueColor];
  6     // 禁止autoresizing自動轉為autolayout的約束
  7     blueView.translatesAutoresizingMaskIntoConstraints = NO;
  8     [self.view addSubview:blueView];
  9     
 10     // 2.創建紅色的view
 11     UIView *redView = [[UIView alloc] init];
 12     redView.backgroundColor = [UIColor redColor];
 13     // 禁止autoresizing自動轉為autolayout的約束
 14     redView.translatesAutoresizingMaskIntoConstraints = NO;
 15     [self.view addSubview:redView];
 16     
 17     // 設置約束
 18     /*****藍色view的約束****/
 19     // 左邊的約束
 20     // 左邊約束
 21     NSLayoutConstraint *leftlc_b = \
 22      [NSLayoutConstraint constraintWithItem:blueView
 23                                   attribute:NSLayoutAttributeLeft
 24                                   relatedBy:NSLayoutRelationEqual
 25                                      toItem:self.view
 26                                   attribute:NSLayoutAttributeLeft
 27                                  multiplier:1.0
 28                                    constant:30];
 29     [self.view addConstraint:leftlc_b];
 30     
 31     // 底部約束
 32     NSLayoutConstraint *bottomlc_b = \
 33     [NSLayoutConstraint constraintWithItem:blueView
 34                                  attribute:NSLayoutAttributeBottom
 35                                  relatedBy:NSLayoutRelationEqual
 36                                     toItem:self.view
 37                                  attribute:NSLayoutAttributeBottom
 38                                 multiplier:1.0
 39                                   constant:-30];
 40     [self.view addConstraint:bottomlc_b];
 41     
 42     // 右邊約束
 43     NSLayoutConstraint *rightlc_b = \
 44     [NSLayoutConstraint constraintWithItem:blueView
 45                                  attribute:NSLayoutAttributeRight
 46                                  relatedBy:NSLayoutRelationEqual
 47                                     toItem:redView
 48                                  attribute:NSLayoutAttributeLeft
 49                                 multiplier:1.0
 50                                   constant:-30];
 51     [self.view addConstraint:rightlc_b];
 52     
 53     // 寬度約束
 54     NSLayoutConstraint *wlc_b = \
 55     [NSLayoutConstraint constraintWithItem:blueView
 56                                  attribute:NSLayoutAttributeWidth
 57                                  relatedBy:NSLayoutRelationEqual
 58                                     toItem:redView
 59                                  attribute:NSLayoutAttributeWidth
 60                                 multiplier:1.0
 61                                   constant:0];
 62     [self.view addConstraint:wlc_b];
 63     
 64     // 高度約束
 65     NSLayoutConstraint *hlc_b = \
 66     [NSLayoutConstraint constraintWithItem:blueView
 67                                  attribute:NSLayoutAttributeHeight
 68                                  relatedBy:NSLayoutRelationEqual
 69                                     toItem:nil
 70                                  attribute:NSLayoutAttributeNotAnAttribute
 71                                 multiplier:0.0
 72                                   constant:50];
 73     [blueView addConstraint:hlc_b];
 74 
 75      /*****紅色view的約束****/
 76     // 右邊約束
 77     NSLayoutConstraint *rightlc_r = \
 78     [NSLayoutConstraint constraintWithItem:redView
 79                                  attribute:NSLayoutAttributeRight
 80                                  relatedBy:NSLayoutRelationEqual
 81                                     toItem:self.view
 82                                  attribute:NSLayoutAttributeRight
 83                                 multiplier:1.0
 84                                   constant:-30];
 85     [self.view addConstraint:rightlc_r];
 86     
 87     // 頂部對齊
 88     NSLayoutConstraint *toplc_r = \
 89     [NSLayoutConstraint constraintWithItem:redView
 90                                  attribute:NSLayoutAttributeTop
 91                                  relatedBy:NSLayoutRelationEqual
 92                                     toItem:blueView
 93                                  attribute:NSLayoutAttributeTop
 94                                 multiplier:1.0
 95                                   constant:0];
 96     [self.view addConstraint:toplc_r];
 97     
 98     // 底部對齊
 99     NSLayoutConstraint *bottomlc_r = \
100     [NSLayoutConstraint constraintWithItem:redView
101                                  attribute:NSLayoutAttributeBottom
102                                  relatedBy:NSLayoutRelationEqual
103                                     toItem:blueView
104                                  attribute:NSLayoutAttributeBottom
105                                 multiplier:1.0
106                                   constant:0];
107     [self.view addConstraint:bottomlc_r];
108 
109 }

補充：