iPhone 6的調適型配置，iphone調適型配置

iPhone 6的調適型配置，iphone調適型配置

從IOS6開始，蘋果公司就一直建議我們使用調適型配置，但是迄今為止，我發現大家都在迴避這個問題，考慮的最多的仍然是固定式配置。

iPhone 6的上市讓人們很難再去逃避調適型配置這個問題，四種螢幕尺寸（如果要支援iPad就要上升到5種）、三種解析度和轉向似乎讓著手於調適型配置變得更加簡單。

在文章的最後，你應該能流暢使用 storyboards、 約束(constraints)和 size class特性，這三個是Apple為開發和製作調適型配置提供的Xcode工具。

所以下載Xcode6，給自己來杯飲料，留上一個小時的時間，讓我們開始吧！

Storyboards

類比尺寸

約束

錯位視圖警告

約束缺失錯誤

添加約束

檢查和編輯現有約束

刪除約束

頭部和尾部空間

橫向空間約束

同等寬度約束

縱橫比約束

約束管理

布局問題和衝突

Size Classes

寬度和高度特性

我們的目標…

為通用的size class添加約束

為iPhone縱向布局添加約束

為iPhone橫向布局添加約束

編輯助手：裝置預覽

為iPad布局添加約束

使用布局和間隔視圖

布局視圖範例

間隔視圖範例

下一步

Storyboards

Xcode中，storyboards可以讓你在螢幕上拖動和放置原生對象（例如按鈕、圖片、文字框和標籤）並且定義每個螢幕之間如何串連。

在Xcode專業術語中，可以看到、摸到、互動的使用者介面元素，我們稱之為 視圖（按鈕、圖片、文字框、標籤等等）。

包含並管理所有那些視圖的螢幕被稱為 視圖控制器，我傾向於交替使用這些術語。

當我們在一個storyboard上添加視圖控制器的時候，它的縱橫比其實跟任何裝置都不匹配，事實上，它是一個完美的600pt*600pt的正方形：

這提醒了我們，storyboard螢幕並不代表特定硬體上的螢幕，而是 任何IOS裝置的抽象表現。

類比尺寸

也許你不介意在600pt*600pt的畫布上操作，但是在實際大小上操作可能會更有協助。

我們可以非常方便的在Xcode裡改變視圖控制器類比的尺寸和轉向：

約束

向你們展示約束的最好方法是執行個體。

我們先建立一個簡單的包含一個螢幕的storyboard（類比4英寸iPhone的尺寸），再添加兩個相鄰的正方形。

當我們在豎屏中運行app的時候，這兩個正方形完全按照我們的布局排列，當我們變成橫屏時，它們仍然忠於自己的座標：

當我們使用iPhone 6模擬器運行項目的時候，我們可以再一次看到，我們的布局並沒有自適應不同的螢幕尺寸，螢幕右邊多出了可見的空白地區。

這是由於沒有約束，這些對象仍然會按照我們在storyboard上建立的x,y座標和面積來定位。

所以讓我們開始添加約束，看看會對它們有些什麼影響。

頭部和尾部空間

我們在藍色方塊前添加10pt的頭部空間約束，在紅色方塊後添加10pt的尾部空間約束。

當我們運行項目的時候，約束把藍色方塊固定在螢幕左側，把紅色方塊固定在右側。

橫向空間約束

我們在兩個方塊之間再添加一個10pt的橫向空間約束，就像上一個約束一樣，這樣會讓兩個方塊之間有一個固定的空間。

當我們運行項目的時候，會發現一個意料之外的結果：我們所有的約束都滿足了，但是為了滿足所有約束，其中一個方塊被展開了。

這似乎告訴我們這樣一件事：除非被告知，否則IOS會盡量讓大多數對象都保持“自然”大小。

同等寬度約束

我們添加一個同等寬度約束。

當運行項目的時候，我們可以看到兩個方塊寬度的增量相同。

縱橫比約束

最後，對兩個方塊添加縱橫比約束。

這個約束保證了寬度和高度的比永遠是相同的。

當我們運行app的時候，我們可以看到每個方塊的寬度在增加，高度也同時在增加。

用iPhone 6模擬器運行項目，覆蓋我們之前添加過的約束，你可以看到這兩個正方形是如何利用可用空間來展開的。

約束管理

現在你已經看到了我們是如何使用約束的，下面我們來介紹一下具體操作。

提示：盡量少使用約束

添加約束的一個要點是試著挑戰自己，越少使用約束越好。

雖然我並不認為添加的約束數量能夠很大程度上影響IOS的效能，但是越少的使用約束，你的布局就會越好維護。

添加約束

在storyboard中添加約束有三個方法：

約束彈窗也許最好的方法就是選擇一個或多個對象，從其中一個彈窗中添加約束。我認為這是個很好的方法，因為可以看到現有約束的範圍。如果有一條約束不可用，可能就意味著你需要兩個或更多個物件來實施這條約束。

ctrl + 拖動你可以按住ctrl鍵，同時拖動到一個對象上（可以是相鄰對象、父級對象或者是自身），會出現一個浮層告訴你可以被添加的約束有哪些。這是我最喜歡的添加約束的方法，因為你不需要把你的滑鼠移動到大老遠的底部再回到對象。

菜單/綁定你也可以選擇一個或多個對象，在菜單中點擊 editor -> pin來選擇約束，這其實是最沒有效率的方法，但是如果你發現自己不停的重複添加一種約束，也許為一個或多個選項添加綁定更合理一點。

檢查和編輯現有約束

檢查視圖中應用的約束最簡單的辦法就是選擇視圖，切換到Size檢查面板。

或者在文檔大綱層次面板中切換constant數值。

無論是哪種方法，選擇約束可以讓你直接更新它。

刪除約束

同樣的，約束也可以通過高亮+點擊刪除按鈕來刪除。

要刪除一個視圖的所有約束，或者螢幕中的所有約束，在布局問題彈窗中有一條捷徑：

布局問題和衝突

當我們在storyboard中添加約束的時候，Xcode總會給出一些關於這些約束的警告或者錯誤。

有時候這些問題可以忽略不計，但是更多的時候，它們必須被解決。

查看約束警告和錯誤最好在文檔大綱面板中，每個視圖控制器會有一個紅色或者黃色的icon來表示是不是有布局問題：

錯位視圖警告

一個比較常見的警告是錯位視圖警告，如果約束規定這個視圖應該在的地方，和這個視圖實際在的地方不匹配，那麼這種警告隨時會出現。

當你轉換類比尺寸或者不小心用滑鼠移動了一個視圖，這些警告也會出現。

點擊一個錯位的視圖，螢幕上會出現一個虛線框，告訴你約束規定了這個視圖應該在的位置。

如果點擊警告，會出現一個帶有幾個選項的浮層，你可以選擇讓Xcode更新約束來匹配storyboard上的位置，也可以讓Xcode更新架構來移動或者展開視圖，使它們回到約束規定的位置。

缺失約束錯誤

讓我們回到一開始藍方塊和紅方塊的例子，我們沒有添加過一個關於縱向位置的約束，但當我們運行app的時候看起來完全沒問題，因為IOS會認為縱向位置就是我們在storyboard上放置的位置，不過為了避免一些意料之外的行為，我們最好還是規定一下。

在頂部布局嚮導添加頂部空間約束可以消除一些說不定道不明的約束和錯誤。

Size Classes

為了在大多數基礎布局或者更進階的布局上使用約束，你需要同時使用size classes。

Size classes是一種能夠告訴你物理裝置寬度和高度的特性。

當我們在storyboard的螢幕上添加對象或者約束時，只有裝置符合當前的寬高特性，對象才會顯現，約束才會被應用。

這是一個非常有用的方法，它讓我們確定了不同裝置和轉向下布局的變化。

高度和寬度特性

使用 緊湊(compact)、 任意(any)和 正常(regular)這三種的組合，可以讓我們確定一些範圍內的裝置布局。

雖然不能涉及每一個變化（比如不能確定iPhone 6 Plus的豎向模式，也不能讓iPad的轉向消失），但是大多數的變化都可以確定。

我們說過，介紹size classes最簡單的方法是執行個體，所以讓我們看一個例子。

我們的目標…

作為例子，我們做一個Instagram詳情頁的簡單版本，可以適應大屏和轉向。

我們的目標是建立一個布局，它可以機智的適應更大的iPhone 6裝置（我說的機智，是指只有照片會放大，其他的元素如頭像照片仍然不變），並且當裝置橫屏的時候，圖片和中繼資料會並肩排列，而不是像豎屏時的上下排列。

為通用的size class添加約束

跟之前的例子不同，這次我們不使用類比尺寸度量，我們使用通用size class的抽象方形布局，這樣會使我們記住，為這個size class添加的任何視圖和約束，只能是那些添加在任意螢幕尺寸和轉向上的視圖和約束。

我們需要用到這些約束：

除了必要的空間、間隙和縱橫比約束，我們還需要讓某些對象排列在頂部或者底部。

現在，在你的storyboard上添加視圖和約束吧。做這步的時候，我的storyboard長這樣：

注意，現在我們有了所有轉向上所需要的元素，但是我沒有費心完成每個轉向上的布局，下一步我們才會做！

為iPhone縱向布局添加約束

現在，我們把size class切換到緊湊寬度和正常高度，這個尺寸特性的組合適用於任何豎屏下的iPhone裝置。

如果要切換size classes，點擊storyboard中下方的size class標籤，選擇你想要看到的寬高組合。

注意，當你切換size class時，視圖控制器的尺寸會更新來顯示新的抽象布局。

最後，你可以重新置放、展開視圖和添加豎屏上的約束了。這裡有一些我添加到豎向布局上的約束：

這是我做到這步時，我的storyboard的樣子：

在這個階段，你可以用任何的iPhone模擬器（3.5、4、4.7或者5.5英寸螢幕）來運行你的項目，看看豎屏情況下的布局是否合理，雖然如果轉向成橫屏時，布局看上去會一團糟。

注意，我們沒有固定圖片的寬度，我們只是簡單地把圖片的左右邊緣固定在螢幕兩側。當變為更大的iPhone 6螢幕尺寸時，圖片會被展開，又因為我們添加了一個固定圖片縱橫比的約束，所以高度也會同時增加。

為iPhone橫向布局添加約束

現在切換size class到 任意寬度和 緊湊高度，這種尺寸特性的組合適用於任何橫屏下的iPhone裝置，並且會為了滿足橫屏視圖下的目標更新布局。

這次，圖片的頂部、左邊和底部邊緣都被固定在父級視圖的邊緣。

這個局部另一個有意思的地方是，在評論標籤上添加的尾部空間約束。

當圖片的約束使得圖片變大的時候，這個標籤上的約束會使得自身變窄。為了適應這種視圖下的文本，文本高度需要增加到兩行——的確如此！

是我做到這步時storyboard的樣子。注意，在文檔大綱中，一些約束會稍稍漸隱，這些約束是在豎向視圖中我們添加的，它們仍然存在，但是當我們選中當前的寬高特性時，它們不會被應用。

也要注意，當你轉換寬高特性時，storyboard會更新以便顯示你為那些特性增加的約束。太棒了！

現在運行項目，我們會發現當轉向改變時，我們有了一個既適用於橫屏又適用於豎屏的布局，更棒的是在轉向時，會有一個完美的過渡動畫。

我把整個過渡動畫放慢，這樣你們能看的更加清楚。注意動畫中也有層級關係，正由於此，即使在正常布局下視圖並沒有重疊，我們也需要考慮如何安排視圖的層級關係……

編輯助手：裝置預覽

Xcode另外一個很有用的東西：裝置預覽助手。你不再需要無數次運行項目來檢查你的布局是否正確，你只需要使用編輯助手storyboard預覽，選擇你想要的所有裝置和轉向就可以了。

這並不是完美的（比如導航條的顏色在這個例子中缺失了），但是它卻是一個很好地選擇，它可以讓你把你自己的語言切換到雙倍長度偽語言，可以在你的storyboard中重複任何文本。

這是我storyboard上的預覽助手，它展示了一個3.5英寸橫屏和4英寸豎屏的iPhone，你可以看到我還需要再加工加工來適應更長的標籤……-_-

為iPad布局添加約束

現在，切換size classes到 正常寬度和 正常高度，這是iPad橫屏和豎屏的特性。

就像之前一樣，我們重新置放、展開我們的視圖。對於iPad布局，我決定使用固定尺寸的圖片（所以它不會像在iPhone上那樣切換橫豎屏時會改變大小），中繼資料都顯示在圖片底部。

是我在重新排列檢視並添加了約束之後的storyboard：

到現在為止，我們為某些特別的size class特性添加了約束，但是現在我們要嘗試些不同的東西。

由於iPad上會有多餘的空間，我們不要僅僅只是重排視圖，讓我們來加一點額外的內容。對於這個例子來說，我們再加兩張圖片（也許是在這張主照片之前和之後拍攝的照片）。

這是我的storyboard更新之後的樣子：

我原本可以手動輸入這些次級圖片的寬高，但我沒有，取而代之的是我讓它們的尺寸變成主圖片的某個比例。

這樣做的好處是如果我們決定改變主圖片的尺寸，布局的其他部分會自動的計算並且更新次級圖片的寬高，而不用我們手動輸入。

這是一張我截的圖，我改變了主圖片的寬度約束，可以看到其他的部分也隨之更新了。

我沒有在iPad模擬器上運行項目並截屏，不過這裡有一些橫屏和豎屏的：

使用布局和間隔視圖

Xcode中有些約束我們可以隨時運用，但是對於一些些常見的布局，我們需要一點協助。

布局視圖範例

要把一個視圖的邊緣固定在父級視圖的邊緣，或者把它固定在父級視圖的正中心是件很簡單的事情，~~但是我沒有發現簡便的方法，讓視圖固定在離正中心有一段固定距離的地方。~~感謝Jeff Nouwen指出，在把視圖固定在中間後，你可以改變constant值來達到你的期望。

理論上來說，我們需要的是一個‘ 中心排列導向’，即任何視圖都能水平和垂直置中與父級視圖中：

為了實現這個目標，通過現在我們可以使用的約束，我們把我們的視圖嵌入一個外層視圖（這個外層視圖沒有背景色，只是為了協助我們布局而存在），可以把它定位在父級視圖的中間。

通過這個方法，你的約束看起來可能像這樣：

現在我比較喜歡讓我的布局層級盡量平。另外一個不使用外層視圖的方法，我叫它 布局視圖。

使用這種方法，我傾向於在storyboard中添加一個顏色明亮的視圖，然後把它的hidden屬性設定為true，你仍然可以在storyboard布局中看到它（雖然稍稍漸隱），但是運行模擬器的時候它不會出現。

現在你在你的視圖和布局視圖中可以添加 置中排列（align center to center）。

間隔視圖範例

之前我們看到了我們是如何固定視圖邊緣到父級視圖邊緣的間隙，使得當父級視圖變大時，間隙約束也會讓視圖變大。

但是如果我們想要視圖仍然保持原來的大小，在父級視圖變大時，視圖之間的間隙也變大呢？

理論上來說，我們想要某種類似 同等寬度約束的約束，只不過同等寬度約束是作用在視圖上，我們想讓它作用在約束上。

此時我們需要添加 間隔視圖來協助我們布局，但由於我們不想在運行app時看到它們，我們會把它們的hidden屬性設定為true。

使用這項技術的方法，是為每一個你想要等比增長的間隙添加一個間隔視圖，把其他視圖的邊緣固定在間隔視圖的邊緣上，然後為所有的間隔視圖添加 同等寬度約束。

下一步

現在希望你們已經完全有信心開始探索應用約束的布局了。

不要指望能即刻成功，Xcode是一個非常複雜的工具，除了storyboard和約束之外它還有很多其他功能，有些功能剛開始使用會覺得很神秘和困惑。就像其他複雜的工具一樣，在你熟悉它的怪癖之前你還需要一段適應時間，但是我建議你儘早的去熟悉它，因為我預計（至少我希望）下一代設計師會更多地使用Xcode這樣的工具而非Photoshop。

如果你是一位建立設計規範的設計師，並想讓IOS開發人員遵循你的規範，你應該開始考慮和你的設計團隊溝通的最好方法。也許你會建立一個視覺語言來描述你想要應用的約束。

我個人認為，設計師應該更多地承擔一些他們建立工作上的責任，而不是讓一個前端開發人員重新建立設計意圖，而設計師只是管理storyboard檔案。

如果你發現這個教程上有任何難以理解的地方，或者有錯誤的敵方，請讓我知道，我會儘快更新這篇文章。