iOS學習筆記24-不斷進化的屏幕適配

一、屏幕適配

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

在用autoResizing的時候需要關閉autoLayoutsizeclass(如果是用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
};
  1. 四周4根線是用來設置當前View距離父控件的上下左右的距離是否固定
  2. 中間2根線是用來設置當前View是否隨父控件自適應調整寬度和高度

可以看到,上面的設置只能設置當前控件和父控件之間的佈局,無法實現兄弟控件之間的佈局,例如:如果我想讓2個控件View之間的間隔固定,使用AutoResizing是無法實現的。

二、AutoLayout【iOS6之後使用】

因爲AutoResizing的種種侷限已經無法滿足iOS6之後新出的不同尺寸屏幕的需求,做iOS開發的好處就是有一個很好的東家,蘋果不僅很重視用戶體驗,而且對開發者也很友好,例如ARC、AutoLayout。
AutoLayout是現在使用的主流屏幕適配方式,它可以在任意兩個控件之間建立佈局關係,可以是父子View,也可以是兄弟View,功能強大很多,學習成本也高了不少。

使用AutoLayout:

使用AutoLayout
AutoLayout設置

AutoLayout設置界面有3個:
  1. 對齊佈局界面
  2. 相對佈局界面
  3. 約束管理界面

1. 對齊佈局界面:

點擊右下角的類似樓梯的按鈕
對齊佈局界面

可以分爲3個功能部分:
  1. 上面4個是控件邊界對齊佈局
  2. 中間3個是控件中心對齊佈局
  3. 下面2個是父子控件中心對齊佈局

上面7個對齊佈局,需要選擇多個View進行設置。

2. 相對佈局界面

點擊右下角的正方形按鈕
autolayout3.png

分爲4個功能部分:
  1. 最上面的是相對附近控件距離設置
  2. Width和Height是設置控件的寬高
  3. 緊接着下面3個是多個控件之間的等寬等高約束
  4. 最下面的是對齊設置,這個功能和上面的對齊佈局界面功能重複

3. 約束管理界面

點擊右下角的小三角按鈕:
約束管理界面

分爲2個大功能區域:
  1. 分割線上面的是選中View的約束管理,最常用的是Updata Frames
  2. 分割線下面的是容器中所有的View的約束管理,最常用的也是Updata Frames

4. 通過control按鍵配合拖線也可以做AutoLayout

Control按鍵配合拖線實現AutoLayout

5. 修改約束

界面右邊會有約束列表:

雙擊其中一個約束,進入修改約束界面:

大概意思可以理解爲:
FirstItem = SecondItem * Multiplier + Constant 
view1.width = view2.width * 1 + 0 
-> view1.width = view2.width

三、AutoLayout實踐

AutoLayout實踐例子說明:
  1. 兩個View等寬等長
  2. 兩個View距離屏幕水平中心距離相等
  3. 兩個View距離父控件的左右邊界距離固定
最終效果圖:

豎屏效果

橫屏效果

1. 設置2個View等寬等高

2. 設置藍色View左右距離

3. 設置藍色View到父控件中心Y軸的距離

4. 設置紅色View到父控件中心Y軸的距離【記住是負的】

5. 設置紅色View左右距離

6. 設置藍色View的高度

6.png

7. 使用更新界面

8. 最終效果

四、SizeClass

SizeClass就是對屏幕尺寸進行了抽象,不再拘泥於具體的尺寸,因爲尺寸一直都在變化,如果我們按照尺寸去適配,一定會很累。

SizeClass對屏幕進行了抽象分類:
  1. compact:緊湊-小
  2. Any:任意
  3. 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控制什麼情況顯示;同樣的還有字體、圖片顯示:

看完是不是覺得原來storyboard可以這麼玩!(^o^)/~
該筆記大部分內容來自:博客園 隨遇不安的博客,感謝他的分享。
有什麼問題可以在下方的評論區提出,O(∩_∩)O哈!
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章