IOS開發之UI布局，iosui布局

IOS開發之UI布局，iosui布局

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

 

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的步驟

 　　然後下面代碼來使用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:redView101                                  attribute:NSLayoutAttributeBottom102                                  relatedBy:NSLayoutRelationEqual103                                     toItem:blueView104                                  attribute:NSLayoutAttributeBottom105                                 multiplier:1.0106                                   constant:0];107     [self.view addConstraint:bottomlc_r];108 109 }

 

 

補充：