作者:Mitchell 

一.關(guān)于iPhone屏幕的一些基本常識(shí)###

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

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

2.點(diǎn)和像素的關(guān)系####

• 非retina屏幕之中：
  • 1個(gè)點(diǎn)由1x1個(gè)像素組成
• 在retina屏幕之中：
  • 1個(gè)點(diǎn)由2x2個(gè)像素組成（iPhone6Plus 3x3個(gè)）

二、Autoresizing###

1像鸡、簡(jiǎn)介####

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

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

（1）用法#####

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

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

（2）局限性#####

可以清楚的看到上面的用法中所說明的吁脱，所有的約束都是相對(duì)于父視圖來設(shè)置的桑涎，也就是Autoresizing的局限性'就是'只能表現(xiàn)父與子的關(guān)系，而無法表達(dá)兄弟視圖之間的關(guān)系兼贡，這就是Autoresizing的雞肋所在攻冷。

三、Autolayout###

1遍希、簡(jiǎn)介####

• Autolayout是一種布局技術(shù)等曼，專門用來布局UI界面的
• Autolayout自iOS6開始引入，由于Xcode4的不給力孵班，當(dāng)時(shí)并沒有得到很大的推廣
• 在iOS7（Xcode5）開始涉兽，Autolayout的開發(fā)效率得到很大的提升
• 蘋果官方也推薦開發(fā)者盡量使用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) 相對(duì)處理（Pin）：#####

• 界面樣式：

  
  
  屏幕快照 2015-08-01 下午6.53.01.png
• 屬性說明：
  • Add New Constraints:
    4個(gè)方向，4條紅線的意思分別表示：距離上下左右的參照線的距離是多少虱饿。將虛線設(shè)置為實(shí)線之后拥诡，表示所設(shè)距離生效触趴。
    注意：上下左右的參照物是可以改變的，改變的方法就是點(diǎn)擊數(shù)字框右邊的向下箭頭來修改約束的參照物渴肉。
  • Constrain to margins：如果你點(diǎn)了constrain to margins冗懦，左右會(huì)有8個(gè)點(diǎn)的空擋，而是從8個(gè)點(diǎn)后開始計(jì)算約束仇祭，而沒有點(diǎn)時(shí)披蕉，已屏幕的0點(diǎn)開始計(jì)算。

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

• 界面樣式：

  
  
  屏幕快照 2015-08-01 下午6.52.55.png
• 屬性說明：
  • Leading Edges：左對(duì)齊
  • Trailing Edges：右對(duì)齊
  • Top Edges：上對(duì)齊
  • Bottom Edges：下對(duì)齊
  • Horizontal Centers：水平中心對(duì)齊
  • Vertical Centers：豎向中心對(duì)齊
  • Baselines：基線對(duì)齊
  • Horizontal Center in Container：對(duì)齊容器中的水平中心
  • Vertical Center in Container：對(duì)齊容器中的豎向中心

4乌奇、警告與報(bào)錯(cuò)####

• 警告：一般是黃色的没讲，一般是由于我們當(dāng)前所設(shè)的約束與當(dāng)前視圖的位置不符。
• 報(bào)錯(cuò)：紅色的警告一般是由于約束錯(cuò)誤造成的礁苗，這種警告工程中一定要消除爬凑。

5、簡(jiǎn)單需求實(shí)例####

• 實(shí)例一：
  • 需求：創(chuàng)建一個(gè)view使得它與上方的距離20试伙，左方的距離20嘁信，高100，寬100

  • 實(shí)現(xiàn)：

    
    
    實(shí)例1.png

實(shí)例1.2.png

• 實(shí)例二：

  • 需求：創(chuàng)建兩個(gè)view，左邊的view距離左考廉、上各20秘豹，右邊的view距離右、上各20昌粤，兩個(gè)圖片一樣的大小既绕，并且兩張圖片之間的距離是20。

    
    
    實(shí)例2初始圖.png

  • 思路：
    （1）設(shè)置視圖1：距離上面20涮坐，距離左邊20凄贩，Height設(shè)為100，這樣視圖1未確定的值就只有寬了袱讹，這個(gè)時(shí)候我們?yōu)橐晥D1添加右邊的約束屬性疲扎，如下圖所示，將參照的視圖改為view2捷雕，這樣我們就設(shè)置好了view1的所有屬性椒丧。
    

    實(shí)例2-1.png
    
    （2）設(shè)置視圖2：與視圖1的上方平齊，距離右邊20救巷，與視圖1等高，距離視圖1的距離是20浦译，最后再設(shè)置兩個(gè)視圖是等寬棒假，這樣就實(shí)現(xiàn)了我們的需求：

  • 實(shí)現(xiàn)：
    （1）視圖一設(shè)置：

    
    
    實(shí)例2.1.png
    
    

    （2）視圖二設(shè)置：

    
    
    實(shí)例2.2.png
    
    （3）最終實(shí)現(xiàn)：
    
    實(shí)例2.png
• 實(shí)例三：
  • 需求：view1使得它與上方的距離20溯职，左方、右方的距離各為20帽哑，高50谜酒，view2在view1下方距離20，右邊距離父視圖20（與view1右對(duì)齊）妻枕，view2的寬度是view1的一半僻族。
  • 實(shí)現(xiàn)：
    （1）先固定view1，設(shè)定左右上的約束并設(shè)定高為50.
    
    實(shí)例3.1.png
    
    （2）這個(gè)需求的重點(diǎn)是設(shè)置view2屡谐，首先與view1上方距離20鹰贵，右邊與view1對(duì)齊，那么寬度的設(shè)置體現(xiàn)了Autolayout的精華所在康嘉。

  • 方案一：先設(shè)置view2與view1等寬，之后雙擊view2的等寬的線籽前，將multiplier的值設(shè)為0.5亭珍。

    
    
    實(shí)例3.2.png

  • 方案二：
    （1）設(shè)置view2的居中對(duì)齊

    
    
    實(shí)例3.3.png
    
    

    （2）修改SecondItem中的屬性為Leading，這樣我們就實(shí)現(xiàn)了需求中所要的效果

    
    
    實(shí)例3.4.png

6枝哄、AutoLayout核心公式####

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

這就是Autolayout的精華所在.

7肄梨、總結(jié)####

• Autoresizing:
  已經(jīng)是比較過時(shí)的設(shè)置適配方法了，而且有很大的缺陷挠锥，只能設(shè)置父子控件之間的約束众羡，不能設(shè)置兄弟控件之間的約束。所以在這里我們最好不要再開發(fā)中應(yīng)用蓖租。
• AutoLayout:
  最流行的適配方式粱侣，蘋果積極推薦，非常強(qiáng)大好用的適配方法蓖宦。對(duì)提升開發(fā)中的效率有很大的幫助齐婴。