iOS 9 Auto Layout介面自動布局系列6-調適型配置

標籤：

設計MM小尹：“小李，郵件裡是我們設計的使用者登入介面初稿，請你看一下技術上有沒有什麼問題。”
程式猿小李：“好的，我看一下。”
小李開啟郵件，看到介面設計初稿為：

這是一個同時支援iPhone和iPad的統一App（Universal App）。儘管小李對Auto Layout很熟悉，但是看到設計稿之後，小李卻犯了難。因為設計稿中的iPhone橫屏的介面布局方式是特殊情況，如果按照圖1的方式添加一套自動布局約束，程式就需要判斷裝置類型（當前是iPhone還是iPad？）以及當前裝置的方位（是橫屏還是豎屏？）。如果是iPhone橫屏，那麼還得按照圖2的要求重新修改約束。《自動布局系列5》中提到了修改介面約束的3種方式：改約束的常量值，刪除舊約束添加新約束，修改約束的優先順序。不管哪種方式，對於我們的這個例子來說，都是很麻煩的，很容易出錯的。你得在iPhone豎屏轉橫屏時改一堆約束，然後橫屏轉豎屏時再改回來。且不說這個介面的層次不算複雜，要是真的遇到一個很複雜的、介面層次很深的介面，對開發人員來講那簡直就是一場噩夢。

小李遇到的困惑，我想大多數讀者也都曾遇到過。有讀者aa3214560也在我的部落格上提出了這樣的問題：

aa3214560 2015-10-27 20:27發表：
博主，有個自動布局的問題很疑惑。希望能協助解釋一下。在ios中的xib或者storyboard中使用自動布局，是如何適配各種螢幕的。 比如說iphone5的高度是568，6的高度是667，當有一個控制項是距上邊距600的時候，這在iphone5如何顯示（當然，可以都使用距離下邊距多少來解決）。或者是當一個textfield距離左邊100，右邊100的時候，在iphone6上這個大小可能很好，但是在iphone5上就變窄了點。 這裡想知道的是，autolayout距離上、下、左、右的距離都是寫死的，這在適配上的作用還是不大啊？ 難道是在寫一套約束，或者在一個約束的基礎上進行間距的調整，使在各個螢幕上都能較為完美的顯示（一套約束總感覺不完美）？ 總感覺自己卡在某個點上。 希望能協助解疑一下，非常感謝。

其實問題的核心，就在於一套自動布局約束很難靈活地適應視圖在不同大小情況下的所有布局。為瞭解決這個問題，蘋果在iOS 8 SDK中提出了Adaptive Layout（姑且翻譯為：調適型配置吧），這也是本篇文章要講解的內容。如果小李的App還需要支援iOS 6和7，那麼很遺憾本篇內容幫不了他，他只能使用一套約束並修改。如果僅需支援iOS 8及以上版本，那麼他就可以使用調適型配置來輕鬆解決這個問題。

一、尺寸類型

描述一個2維圖形的尺寸，最簡單的就是它的水平和垂直方向是大還是小。例如，高清電視的螢幕，水平方向大，垂直方向小。這裡的大和小隻是概念上相對而言的，拿電影院的熒幕和高清電視螢幕相比，其水平和垂直方向都是很大的。拿膝上型電腦的螢幕和高清電視螢幕比，其水平和垂直方向都是很小的。

在調適型配置中，蘋果提出了Size Class（尺寸類型）的概念，用於在概念上表示水平或垂直方向的大小。共有3種類型尺寸，大的稱之為Regular（標準尺寸類型，簡記為+），小的稱之為Compact（緊湊尺寸類型，簡記為-），最後一種後面會提到。

下面的表格列出了iOS裝置的尺寸類型：

在本文中我們約定用以下格式描述：

[水平尺寸類型，垂直尺寸類型]

這個表格展示了不同裝置的不同方位下，水平方向與垂直方向的預設尺寸類型：

• 所有的iPad不管什麼方位都是[+, +]
• 所有的iPhone在豎屏時都是[-, +]
• 在橫屏時只有iPhone 6 Plus和6s Plus是[+, -]，其餘的iPhone都是[-, -]

那麼尺寸類型有什麼卵用嗎？簡言之就是我們可以針對不同的尺寸類型，設計與之對應的一套自動布局。例如，我可以設計一套針對[+, +]的自動布局在iPad上使用，其餘的都使用另外一套自動布局在iPhone上使用，這樣不就能很好地解決之前的問題了麼。

這裡插一句，除了標準和緊湊外，還有一個尺寸類型是Any（任意尺寸類型，簡記為*）。我們都知道類的繼承，把共性的、抽象的東西放在基類中，把差異化的、具體的東西放在子類中。蘋果也希望我們能夠以類似的方式來處理調適型配置，這裡的*類似於萬用字元，既可以匹配+也可以匹配-。所以，當設計人員給出了不同裝置上的介面設計稿之後，作為開發人員的我們應該首先總結出最通用的自動布局方案，將其作為任意尺寸類型的自動布局（基類）；把差異化的布局放在某個特定尺寸類型的自動布局（子類）。以中的例子來說，圖1可以作為通用布局方式，而圖2可以作為特殊布局方式。

這麼說可能有些難以理解，我們不妨以一個實際的例子來說明如何在Interface Builder中使用尺寸類型實現調適型配置。

未完，待續。。。

如果你對我寫的東西有任何建議、意見或者疑問，請到我的CSDN部落格留言：

http://blog.csdn.net/pucker

iOS 9 Auto Layout介面自動布局系列6-調適型配置