iOS中Autolayout-Autoresizing與Autolayout

點和像素的關係

• 非retina屏幕之中
  
  • 1個點由1x1個像素組成
• 在retina屏幕之中：
  
  • 1個點由2x2個像素組成（iPhone6Plus 3x3個）

Autoresizing

Autoresizing的核心用法就是6條線。上線左右以及空間內的兩條紅色交叉線如圖：

具體用法：上下左右四條紅色的線分別表示此視圖距離父視圖的上下左右邊的約束各式多少；中間兩條上下交叉的線表示，此視圖的高度與寬度是否隨着父視圖的變化而按比例變化。

侷限性：可以清楚的看到上面的用法中所說明的，所有的約束都是相對於父視圖來設置的，也就是Autoresizing的侷限性’就是’只能表現父與子的關係，而無法表達兄弟視圖之間的關係，這就是Autoresizing的雞肋所在。

Autolayout

1、簡介

• Autolayout是一種佈局技術，專門用來佈局UI界面的
• Autolayout自iOS6開始引入，由於Xcode4的不給力，當時並沒有得到很大的推廣
• 在iOS7（Xcode5）開始，Autolayout的開發效率得到很大的提升
• 蘋果官方也推薦開發者儘量使用Autolayout來佈局UI界面
• Autolayout能輕鬆的解決屏幕適配的問題

2、核心概念

• 參照
• 約束

3、常用版面
(1) 約束處理（resolve auto layout issues）：

• 界面樣式：
  

• 屬性說明：
  1） Selected Views:已選中視圖的屬性

  • Update Frames：更新frame
  • Update Constraints：更新約束
  • Add Missing Constraints：添加丟失的約束
  • Reset to Suggested Constraints：將約束重置成建議的樣式

  2） All Views inView Controller：在控制器中的所有視圖的屬性

  • Clear Constraints 刪除控制器中所有的約束（慎用）。

(2) 相對處理（Pin）：

• 界面樣式：
  

• 屬性說明：

  • Add New Constraints:
    4個方向，4條紅線的意思分別表示：距離上下左右的參照線的距離是多少。將虛線設置爲實線之後，表示所設距離生效。
    注意：上下左右的參照物是可以改變的，改變的方法就是點擊數字框右邊的向下箭頭來修改約束的參照物。
  • Constrain to margins：如果你點了constrain to margins，左右會有8個點的空擋，而是從8個點後開始計算約束，而沒有點時，已屏幕的0點開始計算。

(3) 對齊處理（Align）：

• 界面樣式：
  

• 屬性說明：

  • Leading Edges：左對齊
  • Trailing Edges：右對齊
  • Top Edges：上對齊
  • Bottom Edges：下對齊
  • Horizontal Centers：水平中心對齊
  • Vertical Centers：豎向中心對齊
  • Baselines：基線對齊
  • Horizontal Center in Container：對齊容器中的水平中心
  • Vertical Center in Container：對齊容器中的豎向中心

4、警告與報錯

• 警告：一般是黃色的，一般是由於我們當前所設的約束與當前視圖的位置不符。
• 報錯：紅色的警告一般是由於約束錯誤造成的，這種警告工程中一定要消除。

5、簡單需求實例

• 實例一：
  
  • 需求：創建一個view使得它與上方的距離20，左方的距離20，高100，寬100
  • 實現：
    
    
    兩張圖片的區別就是在Update Frames 中選擇了Items of New Constraints 這個屬性的意思是當我選擇了這個屬性之後，系統會在添加約束的同時自動將視圖佈局到約束所定義的位置與大小。
• 實例二：
  
  • 需求：創建兩個view，左邊的view距離左、上各20，右邊的view距離右、上各20，兩個圖片一樣的大小，並且兩張圖片之間的距離是20。
    
  • 思路：
    （1）設置視圖1：距離上面20，距離左邊20，Height設爲100，這樣視圖1未確定的值就只有寬了，這個時候我們爲視圖1添加右邊的約束屬性，如下圖所示，將參照的視圖改爲view2，這樣我們就設置好了view1的所有屬性。
    
    （2）設置視圖2：與視圖1的上方平齊，距離右邊20，與視圖1等高，距離視圖1的距離是20，最後再設置兩個視圖是等寬，這樣就實現了我們的需求：
  • 實現：
    （1）視圖一設置：
    
    （2）視圖二設置：
    
    （3）最終實現：
    
• 實例三：
  
  • 需求：view1使得它與上方的距離20，左方、右方的距離各爲20，高50，view2在view1下方距離20，右邊距離父視圖20（與view1右對齊），view2的寬度是view1的一半。
  • 實現：
    （1）先固定view1，設定左右上的約束並設定高爲50.
    
    （2）這個需求的重點是設置view2，首先與view1上方距離20，右邊與view1對齊，那麼寬度的設置體現了Autolayout的精華所在。
  • 方案一：先設置view2與view1等寬，之後雙擊view2的等寬的線，將multiplier的值設爲0.5。
    
  • 方案二：
    （1）設置view2的居中對齊
    
    （2）修改SecondItem中的屬性爲Leading，這樣我們就實現了需求中所要的效果
    

6、AutoLayout核心公式
第一個Item的屬性 =(<=/>=)第二個Item的屬性*Multiplier+Constant

7、總結

• Autoresizing:
  已經是比較過時的設置適配方法了，而且有很大的缺陷，只能設置父子控件之間的約束，不能設置兄弟控件之間的約束。所以在這裏我們最好不要再開發中應用。
• AutoLayout:
  最流行的適配方式，蘋果積極推薦，非常強大好用的適配方法。對提升開發中的效率有很大的幫助。