[toc]

1 屏幕適配簡(jiǎn)介

1.1 屏幕發(fā)展歷史

手機(jī)型號(hào) |屏幕大小 | 分辨率
------------ | -------------
4, 4S |3.5 | 320480
5,5C,5S | 4 | 320568
6,6S , 7 | 4.7 | 375667
6Plus, 6S Plus, 7 Plus | 5.5 | 414736
iPAD | 9.7 | 7681024
iPAD Pro | 12.9 | 10241366

1.2 適配技術(shù)發(fā)展史

iOS版本 | 適配技術(shù) | Xcode版本 | 正式版發(fā)布時(shí)間 | 手機(jī)機(jī)型
----------|----------- |-----------|-----------
iOS 5 | Autoresizing | Xcode4.2 | 2011年10月13日 | iPhone 4S
iOS 6 | Auto Layout | Xcode4.5 | 2012年09月20日 | iPhone 5
iOS 8 | Size Classes + Auto Layout | Xcode6.0.1 | 2014年09月17日 | iPhone 6
iOS 9 | Size Classes + Auto Layout + StackView |Xcode7.0 | 2015年09月28日 | iPhone 6S

1.3 適配技術(shù)介紹

直接使用 frame 計(jì)算控件的位置

特點(diǎn)：程序中存在大量的 MagicNumber

iPhone\ iPhone3G \ iPhone3GS \ iPhone4 \ iPhone4S 屏幕的物理尺寸是一樣的(無(wú)需屏幕適配)
而且一個(gè)應(yīng)用要么是橫屏要么是豎屏, 幾乎不存在能同時(shí)進(jìn)行橫豎屏切換的應(yīng)用
應(yīng)用程序都是豎屏
游戲幾乎都是橫屏
官方應(yīng)用大多支持橫豎屏

使用 Autoresizing 進(jìn)行屏幕適配

隨著 iPad 的發(fā)布, 屏幕的物理尺寸發(fā)生了變化
并且蘋果建議，在 iPad 上運(yùn)行的程序如果沒(méi)有特殊原因，應(yīng)該支持橫豎屏切換
因此：不能把控件的 frame 都寫死了，需要進(jìn)行屏幕適配
為了解決屏幕適配需求，蘋果同時(shí)推出了第一個(gè)屏幕適配解決方案：Autoresizing

Autoresizing 的核心思想就是：參照父容器來(lái)設(shè)置子控件的 frame
不再寫死 frame, 而是參照父容器
舉例：在豎屏下有一個(gè)按鈕要占據(jù)整個(gè)屏幕寬度, 當(dāng)切換到橫屏以后同樣要占據(jù)整個(gè)屏幕的寬度

Autoresizing 只能設(shè)置當(dāng)前控件與父控件之間的相對(duì)關(guān)系

iOS 6 —— Auto Layout（自動(dòng)布局）

隨著 iPhone5 \ iPhone5s 等的發(fā)布蘋果設(shè)備不同尺寸的屏幕變得越來(lái)越多, 不僅要求能根據(jù)控件父子
關(guān)系來(lái)設(shè)置相對(duì)位置，也要求能根據(jù)任意控件之間的關(guān)系來(lái)設(shè)置位置因?yàn)?Autoresizing 只能設(shè)置當(dāng)前控件
與父控件之間的相對(duì)關(guān)系，當(dāng)遇到要設(shè)置兄弟控件之間的關(guān)系的時(shí)候 Autoresizing 就無(wú)能為力了
舉例: 在豎屏下, 屏幕底部有兩個(gè)按鈕，這兩個(gè)按鈕的間距為一個(gè)固定的值（寬度不指定）
當(dāng)切換為橫屏的時(shí)候要求這兩個(gè)按鈕還顯示在屏幕底部
并且按鈕間的間距不變, 按鈕可以隨之變寬

Auto Layout 技術(shù)主要解決的問(wèn)題：控件位置的參照關(guān)系不再局限于父控件

iOS 8 —— Size Classes + Auto Layout

使用 Size Classes + Auto Layout 進(jìn)行屏幕適配
當(dāng) iPhone6 發(fā)布以后，蘋果設(shè)備的屏幕越來(lái)越多(以后也可能出現(xiàn)更多不同大小的屏幕)，為了能更容易的適配不同
的屏幕，蘋果推出了 Size Classes 技術(shù)
通過(guò) Auto Layout 設(shè)置的約束，約束一旦添加就會(huì)應(yīng)用于各種屏幕（也就是說(shuō)在
各種不同的屏幕下都使用相同的約束）
通過(guò) Size Classes + Auto Layout 的方式, 可以為不同尺寸的屏幕設(shè)置不同的約束 
舉例: iPhone 下的計(jì)算器，在橫屏、豎屏下的不同表現(xiàn)

Size Classes 技術(shù)主要解決的問(wèn)題: "主要解決了iPhone橫豎屏適配及iPhone和iPad開發(fā)時(shí)共用一個(gè)SB的問(wèn)題"

iOS 9 —— Size Classes + Auto Layout + StackView

StackView 的核心便是方便垂直或水平排布多個(gè) subview
類似于 android 的 LinearLayout
StackView 最有用的就是它會(huì)自動(dòng)為每個(gè) subview 創(chuàng)建和添加 Auto Layout 約束，程序員可以
通過(guò)選項(xiàng)配置subview的大小、排布以及彼此間的間距
使用 stackview 主要簡(jiǎn)化在線性方向上，重復(fù)設(shè)置控件布局約束的問(wèn)題

2 Autoresizing

• 只是為了介紹, 以后不要用 Autoresizing，都用 Auto Layout
• 一定記?。涸谝粋€(gè)視圖中 Autoresizing 和 Auto Layout 只能用其一,通過(guò) Autoresizing 解決布局問(wèn)題，首先取消掉 Auto Layout

2.1 StoryBoard中使用Autoresizing

注意 ??：子控件和父控件貼邊的時(shí)候，有特殊情況。

2.1.1 外面四根線

• 表示子控件距離父控件的四周邊距是否固定

2.1.2 里面兩根線

• 子控件的寬高是否隨著父控件的寬高變化

2.2 代碼中使用Autoresizing

• AutoresizingMask 屬性。代碼就只用這個(gè)。

redView.AutoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

3 Auto Layout

3.1 在StoryBoard 中使用

核心公式

firstItem.firstAttribute {==,<=,>=} secondItem.secondAttribute * multiplier + constant 

注意:如果firstItem.firstAttribute和secondItem.secondAttribute調(diào)換位置后注意multiplier和constant值的變化

3.2 通過(guò)代碼修改constraints in AutoLayout

• 將constraints連線屬性
• 調(diào)用屬性，重新賦值就可以了。
• 更改約束后,在block動(dòng)畫中調(diào)用layoutIfNeeded

//修改constraints不代表直接改了frame，誰(shuí)調(diào)用此方法，就會(huì)讓自己及內(nèi)部所有子控件立即根據(jù)constraints 更新 frame
[self. view layoutIfNeeded];

3.3 代碼中使用AutoLayout的注意點(diǎn):

3.3.1 規(guī)則一

1.要先禁止Autoresizing功能，設(shè)置view的下面屬性為NO
約束要作用的view.translatesAutoresizingMaskIntoConstraints = NO;
2.添加約束之前，一定要保證相關(guān)控件都已經(jīng)在各自的父控件上
3.不用再給控件設(shè)置frame

3.3.2 規(guī)則二

1.如果添加的約束和其它控件沒(méi)有關(guān)系, 要添加到自己身上"也可以添加在父控件上"
2.如果是父子關(guān)系, 設(shè)置子控件的約束, 約束要添加到父控件上
3.如果是兄弟關(guān)系, 設(shè)置兩兄弟的約束, 約束要添加到它們最近的共同父控件上

示例圖如下：