一、屏幕適配
iOS的屏幕適配可以分爲3大塊,代表着不同時期的屏幕適配主流:
1. AutoResizing:
在iOS6之前,完全能夠勝任,因爲當時蘋果只有3.5寸屏,加上比較少的支持橫屏,它有非常大的侷限性:只能相對於父控件佈局
2. AutoLayout:
在iOS6之後,蘋果多了幾個尺寸屏幕,AutoResizing已經無能爲力了,這時候蘋果推出了AutoLayout,功能十分強大,可以再任意兩個控件之間建立佈局關係,也是現在的主流。
3. SizeClass:
隨着iOS8系統的發佈,一個全新的頁面UI佈局概念出現了,顛覆了之前版本的UI佈局方式,這個特性就是SizeClass,SizeClass配合AutoLayout可以解決所有iOS設備屏幕UI適配問題
下面我們來一個一個瞭解,因爲涉及到UI佈局,可能圖片或者GIF比較多,大家要有心理準備。
二、AutoResizing【iOS6之前使用】
這個已經被時代所淘汰的界面UI適配方式,現在就只是簡單的瞭解下,也好爲下面的AutoLayout出現說明時代背景。
AutoResizing
的功能只能相對於父控件佈局:
在用
autoResizing
的時候需要關閉autoLayout
和sizeclass
(如果是用xcode6)
他們之間是互相沖突的
上面有6根線,分別對應下方的6個枚舉:
typedef NS_OPTIONS(NSUInteger, UIViewAutoresizing) {
UIViewAutoresizingNone = 0,
UIViewAutoresizingFlexibleLeftMargin = 1 << 0,
UIViewAutoresizingFlexibleWidth = 1 << 1,
UIViewAutoresizingFlexibleRightMargin = 1 << 2,
UIViewAutoresizingFlexibleTopMargin = 1 << 3,
UIViewAutoresizingFlexibleHeight = 1 << 4,
UIViewAutoresizingFlexibleBottomMargin = 1 << 5
};
- 四周4根線是用來設置當前View距離父控件的上下左右的距離是否固定
- 中間2根線是用來設置當前View是否隨父控件自適應調整寬度和高度
可以看到,上面的設置只能設置當前控件和父控件之間的佈局,無法實現兄弟控件之間的佈局,例如:如果我想讓2個控件View之間的間隔固定,使用AutoResizing
是無法實現的。
二、AutoLayout【iOS6之後使用】
因爲AutoResizing的種種侷限已經無法滿足iOS6之後新出的不同尺寸屏幕的需求,做iOS開發的好處就是有一個很好的東家,蘋果不僅很重視用戶體驗,而且對開發者也很友好,例如ARC、AutoLayout。
AutoLayout是現在使用的主流屏幕適配方式,它可以在任意兩個控件之間建立佈局關係,可以是父子View,也可以是兄弟View,功能強大很多,學習成本也高了不少。
使用AutoLayout:
AutoLayout設置界面有3個:
- 對齊佈局界面
- 相對佈局界面
- 約束管理界面
1. 對齊佈局界面:
點擊右下角的類似樓梯的按鈕
可以分爲3個功能部分:
- 上面4個是控件邊界對齊佈局
- 中間3個是控件中心對齊佈局
- 下面2個是父子控件中心對齊佈局
上面7個對齊佈局,需要選擇多個View進行設置。
2. 相對佈局界面
點擊右下角的正方形按鈕
分爲4個功能部分:
- 最上面的是相對附近控件距離設置
- Width和Height是設置控件的寬高
- 緊接着下面3個是多個控件之間的等寬等高約束
- 最下面的是對齊設置,這個功能和上面的對齊佈局界面功能重複
3. 約束管理界面
點擊右下角的小三角按鈕:
分爲2個大功能區域:
- 分割線上面的是選中View的約束管理,最常用的是
Updata Frames
- 分割線下面的是容器中所有的View的約束管理,最常用的也是
Updata Frames
4. 通過control按鍵配合拖線也可以做AutoLayout
5. 修改約束
界面右邊會有約束列表:
雙擊其中一個約束,進入修改約束界面:
大概意思可以理解爲:
FirstItem = SecondItem * Multiplier + Constant
view1.width = view2.width * 1 + 0
-> view1.width = view2.width
三、AutoLayout實踐
AutoLayout實踐例子說明:
- 兩個View等寬等長
- 兩個View距離屏幕水平中心距離相等
- 兩個View距離父控件的左右邊界距離固定
最終效果圖:
1. 設置2個View等寬等高
2. 設置藍色View左右距離
3. 設置藍色View到父控件中心Y軸的距離
4. 設置紅色View到父控件中心Y軸的距離【記住是負的】
5. 設置紅色View左右距離
6. 設置藍色View的高度
7. 使用更新界面
8. 最終效果
四、SizeClass
SizeClass就是對屏幕尺寸進行了抽象,不再拘泥於具體的尺寸,因爲尺寸一直都在變化,如果我們按照尺寸去適配,一定會很累。
SizeClass對屏幕進行了抽象分類:
- compact:緊湊-小
- Any:任意
- Regular:寬鬆-大
總結幾點:
SizeClass
只是對屏幕進行了抽象分類,具體屏幕適配還是要使用AutoLayout
來進行。- 沒有了橫豎屏的概念,也沒有了具體尺寸的概念,就不必理會具體設備是什麼
- 寬度和高度都抽象爲上面的3種,3*3一共就是9種類型,但不是9種屏幕尺寸
所以使用了SizeClass的Xcode的storyboard變成了這個樣子:
下方還變成了這樣:
具體解析看下圖:
比如iPhone的豎屏,它是這麼抽象的:
五、SizeClass使用實例
以前看來有這樣一個變態的要求:
有個View是100*100的,在iPhone豎屏是居於左上角,橫屏時在右下角,是iPad時它在正中間
現在用SizeClass可以簡單實現:
處理iPhone豎屏:
先用SizeClass固定屏幕爲iPhone豎屏:compactWith | RegularHeight
添加約束,讓View寬度、高度都爲100,距離左上角都是20,再UpdataFrames:
後面的都類似這樣處理,只不過需要選對正確的SizeClass,這裏就不囉嗦了。
除了這個,iOS8加了SizeClass後,一些控件也多了一些屬性,例如:
在右邊的菜單區域可以看到:installed,這個是用來控制改控件什麼情況下顯示,當前什麼都沒約束,表示Any * Any,就是不管是iphone什麼尺寸還是ipad什麼尺寸都可以顯示,點擊左邊的小加號+可以用sizeclass控制什麼情況顯示;同樣的還有字體、圖片顯示: