作者:Mitchell 

一.關于iPhone屏幕的一些基本常識###

1.ios屏幕適配的尺寸####

• iPhone的尺寸
  3.5inch、4.0inch、4.7inch、5.5inch
• iPad的尺寸
  7.9inch、9.7inch

2.點和像素的關系####

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

二、Autoresizing###

1、簡介####

• 在Autolayout之前，可做屏幕適配，但是有很大局限性。

2、具體使用方法以及局限性####

（1）用法#####

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

  
  
  屏幕快照 2015-08-01 下午1.37.11.png
• 具體用法：上下左右四條紅色的線分別表示此視圖距離父視圖的上下左右邊的約束各式多少；
• 中間兩條上下交叉的線表示，此視圖的高度與寬度是否隨著父視圖的變化而按比例變化。

（2）局限性#####

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

三、Autolayout###

1、簡介####

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

2、核心概念####

• 參照
• 約束

3、常用版面####

(1) 約束處理（resolve auto layout issues）：#####

• 界面樣式：
  屏幕快照 2015-08-01 下午6.53.09.png
• 屬性說明：
  （1） Selected Views:已選中視圖的屬性
  • Update Frames：更新frame
  • Update Constraints：更新約束
  • Add Missing Constraints：添加丟失的約束
  • Reset to Suggested Constraints：將約束重置成建議的樣式

（2） All Views inView Controller：在控制器中的所有視圖的屬性
- Clear Constraints 刪除控制器中所有的約束（慎用）。

(2) 相對處理（Pin）：#####

• 界面樣式：

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

(3) 對齊處理（Align）：#####

• 界面樣式：

  
  
  屏幕快照 2015-08-01 下午6.52.55.png
• 屬性說明：
  • 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

  • 實現：

    
    
    實例1.png

實例1.2.png

• 實例二：

  • 需求：創建兩個view，左邊的view距離左、上各20，右邊的view距離右、上各20，兩個圖片一樣的大小，并且兩張圖片之間的距離是20。

    
    
    實例2初始圖.png

  • 思路：
    （1）設置視圖1：距離上面20，距離左邊20，Height設為100，這樣視圖1未確定的值就只有寬了，這個時候我們為視圖1添加右邊的約束屬性，如下圖所示，將參照的視圖改為view2，這樣我們就設置好了view1的所有屬性。
    

    實例2-1.png
    
    （2）設置視圖2：與視圖1的上方平齊，距離右邊20，與視圖1等高，距離視圖1的距離是20，最后再設置兩個視圖是等寬，這樣就實現了我們的需求：

  • 實現：
    （1）視圖一設置：

    
    
    實例2.1.png
    
    

    （2）視圖二設置：

    
    
    實例2.2.png
    
    （3）最終實現：
    
    實例2.png
• 實例三：
  • 需求：view1使得它與上方的距離20，左方、右方的距離各為20，高50，view2在view1下方距離20，右邊距離父視圖20（與view1右對齊），view2的寬度是view1的一半。
  • 實現：
    （1）先固定view1，設定左右上的約束并設定高為50.
    
    實例3.1.png
    
    （2）這個需求的重點是設置view2，首先與view1上方距離20，右邊與view1對齊，那么寬度的設置體現了Autolayout的精華所在。

  • 方案一：先設置view2與view1等寬，之后雙擊view2的等寬的線，將multiplier的值設為0.5。

    
    
    實例3.2.png

  • 方案二：
    （1）設置view2的居中對齊

    
    
    實例3.3.png
    
    

    （2）修改SecondItem中的屬性為Leading，這樣我們就實現了需求中所要的效果

    
    
    實例3.4.png

6、AutoLayout核心公式####

第一個Item的屬性 =(<=/>=)第二個Item的屬性*Multiplier+Constant

這就是Autolayout的精華所在.

7、總結####

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