為iPhone6設計調適型配置，iphone6調適型配置

為iPhone6設計調適型配置，iphone6調適型配置

Apple從iOS6加入了Auto Layout後開始就比較委婉的開始鼓勵、建議開發人員使用調適型配置，但是到目前為止，我感覺大多數開發人員一直在迴避這個問題，不管是不是由於曆史原因造成的，至少他們在心底還堅守著固定式配置的老傳統思想。

隨著iPhone6、iPhone6 Plus的到來，使用調適型配置更是迫在眉睫的事，固定式配置的老傳統思想脆弱的不堪一擊。現在的iPhone有4種尺寸，如果算上iPad，現在Apple的iOS裝置有5種尺寸。我們在準備使用調適型配置設計應用介面之前，可以把這5種尺寸劃分為3種解析度和螢幕方向，這樣在設計時分類會更加清晰一些。

我們先來看一張調適型配置的：

當你們學習完這篇文章後，你們應該會比較自如的使用 storyboard、constaints、size classes這三個Apple在Xcode裡提供的工具，去探索和構建巧妙的調適型配置。

Storyboards

在Xcode中，storyboard是一個可以讓我們對應用介面進行可視化布局的工具，你首先可以在storyboard檔案中看到一個或若干個iOS裝置螢幕大小的布局區，然後你可以從組件庫（Object Library）中拖拽組件到螢幕布局區中進行布局（比如按鈕、圖片、文字框、labels等），你還可以定義螢幕布局區之間的串連關係。

用Xcode的術語來說，人們可以看到、觸碰到或以其他方式（按鈕、圖片、文字框、labels等）進行互動的使用者介面被稱為views。螢幕中包含和管理這些views的容器稱為view controller。

當我們在storyboard中添加一個view controller後，我們所看到的並不是一個我們熟知的螢幕尺寸，而是一個600X600的正方形：

從我們可以很明顯的看出，storyboard中顯示的螢幕尺寸不是實際裝置的尺寸。Apple這樣做的目的是將螢幕尺寸進行了抽象化，也就是說你可以將這個正方形的螢幕看成iphone4的螢幕，也可以將它看成iphone6的螢幕。

模擬器的尺寸

當你習慣了600X600的螢幕後，你可能會用著很爽，但是有些時候，我們也需要將它改成實際的螢幕尺寸來設計一些東西。

我們可以很方便的在Xcode中改變view controller的類比螢幕尺寸和螢幕方向：

布局約束

介紹布局約束的最好、最直觀的方法就是向你們展示一個樣本。

首先我們將storyboard中的螢幕布局地區的尺寸調整為iphone5s的尺寸，也就是4寸螢幕，然後添加兩個正方形的view，並排放置在螢幕頂部，一個設定為藍色，一個設定為粉色。

我們選擇iPhone5s模擬器裝置並編譯運行應用，可以看到一藍一粉這兩個方塊按照我們設定的那樣杵在豎屏方向的螢幕上，沒有問題。當我們把裝置調整為橫屏時，這兩個方塊像擁護黨一樣擁護著他們的座標位置，所以在橫屏的時候看著就不是那麼完美：

我們再將模擬器改為iPhone6，然後編譯運行，此時在豎屏的時候就已經感覺無法再愛了。這兩個方塊並沒有按照我們設定或設想的那樣在螢幕頂部中間，而是偏向了左邊，在右邊有一塊留白地區。

這是就是沒有布局約束而導致的，藍色粉色方塊的大小、座標位置都是固定的，都是在4寸螢幕的參照下設定的，不論在哪種尺寸的螢幕下，它們都在固定的那個座標位置和固定的大小，所以就會出現上面的情況。

那麼接下來讓我們給這兩個方塊添加一些布局約束，再看看會有什麼神奇的事情發生。

頁邊間距約束（Leading and Trailing space）

頁邊間距約束分前部間距約束（Leading space constaint）和尾部間距約束（Trailing space constaint）。從螢幕上說就是左邊距和右邊距。我們給藍色方塊添加左邊距約束，其值設定為10，給粉色方塊設定右邊距約束，其值也設定為10。

我們再次在iPhone5s模擬器中運行應用，當橫屏時藍色方塊被左邊距約束拉到了螢幕左邊，粉色方塊被右邊距約束拉到了螢幕右邊。

水平間距約束（Horizontal space constaint）

給藍色方塊和粉色方塊添加水平間距約束，其值設定為10。這個約束會使這兩個方塊之間的距離永遠約束為10。

我們再來運行應用，現在橫屏時兩個方塊之間的間距、它們與螢幕邊緣的間距都和豎屏時顯示的一樣了。但是其中粉色方塊為了滿足水平間距約束自行增加了方塊的寬度，變成了長方形。簡直是一隻老鼠壞了一鍋湯有木有。

從上面這個效果我們可以得知，除非我們特別限制了view的尺寸，否則的話iOS會為滿足布局約束而改變view的尺寸，也就是保持一個自然的尺寸。

等寬約束（Equal widths constaint）

我們給這兩個方塊添加一個等寬約束來改善上面的情況。

再次運行應用，現在在橫屏時由於等寬約束的作用，兩個方塊的寬度保持了一致。我們已經非常接近完美了。

方向比例約束（Aspect ratio constaint）

從上面的運行情況來看各個約束都工作正常，但唯一不足的是本來在豎屏是兩個正方形方塊，在橫屏時缺變成了長方形方塊，由範爺變成了鳳姐這是人類無法接受的。

我們給這兩個方塊添加方向比例約束來解決這個問題。這個約束使方塊在滿足其他約束的前提下始終保持高和寬的比例相同。所以在橫屏時就會以方塊的寬度為比例標準，將高度的比例改為寬度的比例。

用iPhone5s模擬器編譯運行應用，現在在橫屏狀態下兩個正方形方塊完美的呈現在我們眼前。

我們在iPhone6模擬器上再編譯運行應用，從下面的圖中我們可以很清晰的看到添加約束之前和之後的變化。布局約束根據多出的空間大小將方塊放大到合適的尺寸以滿足約束。

實踐布局約束

到目前為止，你們已經看到布局約束神奇的作用和效果。是時候讓你們在你們自己的storyboard檔案中添加布局約束了。

熟練布局約束最好的方法就是多練習，從添加少量的布局約束開始，一步步達到自己想要的效果。

另外有一點，我始終不認為添加過多的布局約束會對應用的效能產生影響。但是我們也不能濫用約束布局，好鋼要用在刀刃上，我們儘可能用最節儉的約束布局達到我們想要的效果。

添加布局約束的方式

這裡向大家介紹三種在storyboard中添加約束的方式：

1.底部布局約束按鈕

這種方式可能是最簡單直觀的一種方式，在螢幕上選擇一個或多個對象，然後點擊底部的布局約束按鈕添加一個或多個需要的約束。它的好處是可以直觀的看到當前選擇的對象已經添加了該類中的那些約束。

如果你指選擇了一個對象想要添加某個約束，但發現該約束是不可選的，那麼就意味著這個約束是適用於兩個以上對象的約束。

2.按住Control鍵拖拽滑鼠

你也可以選擇一個對象，然後按住Control鍵和滑鼠左鍵，拖拽滑鼠到另一個對象（容器物件，也就是父物件或者選中對象自己），鬆開滑鼠後會彈出適用的約束菜單，你可以選擇約束進行添加。

這是我偏愛的一種方式，因為它比上面那種方式來的快多了。

3.菜單/綁定快速鍵

你也可以通過菜單選項editor —> pin給一個或多個對象添加布局約束。這是效率最低的一種方式。如果你發現有些約束你會一遍遍的反覆添加，那麼你就可以給該約束綁定一個快速鍵來提高效率。

檢查和編輯已添加的布局約束

檢查約束最簡單的方式就是選中一個對象，然後開啟右側工具列，選擇Size Inspector面板。或者在storyboard介面左側的結構樹中查看約束。

通過這兩種方式，你都可以選擇某個約束，然後編輯它。

移除布局約束

布局約束可以添加自然也就可以刪除。選中某個約束使其高亮顯示，然後按下Delete鍵移除該約束。

如果想移除某個對象上所有的約束，有一個快捷的方式。選擇該對象，然後在底部點擊Resolve Auto Layout Issues按鈕，選擇Clear Constaints。

布局出現的問題和衝突

我們在添加約束時，經常伴隨有警告或者錯誤出現。雖然有些警告是因為我們還沒有添加完約束出現的，當我們添加完我們設想的約束後警告就會自然消失。但大多數的警告還是指明我們的約束確實存在問題，需要我們修複。

查看警告或錯誤最方便的方式就是在storyboard左側的結構樹中，在view controller的右邊會出現一個紅色或黃色的小表徵圖，向我們指明這裡存在問題：

錯誤擺放view的警告

view位置的錯誤擺放是一個很常見的警告。當一個view沒有擺放在約束規定的位置的時候，會出現該警告。

這些問題會在你切換不同裝置的模擬器或滑鼠不小心移動了某個對象時出現。

選中一個錯誤擺放的對象，在螢幕上會出現布局約束給你提示的正確的擺放位置。

點擊左側出現的黃色警告圖片，會彈出一個菜單，你可以選擇讓Xcode改變約束，以適應當前該對象的位置，但通常情況下我們都選擇讓Xcode將該對象移動到約束規定的位置。

缺少布局約束的錯誤

我們回到早些時候的樣本中。這時候我們沒有給方塊添加Y座標位置的約束。在運行時沒有問題，因為iOS會假設方塊的位置就是我們在storyboard中擺放的那個位置。但是Xcode會提示我們一個缺失約束的錯誤，為了避免意外發生（更換裝置尺寸），我還是要根據Xcode的提示添加缺失的約束。

我們給這兩個方塊添加一個top space to to layout guide約束使方塊的位置更加清晰，並消除Xcode的錯誤提示。

 

 

Size Classes

調適型配置的布局約束自然是好東西，但也不是萬能的，有時候我們也需要使用最基本的布局，所以使用size classes將它們兩者結合起來才能碰撞出更有激情的火花。

引用我上篇譯文中的一段話： Size Classes並不代表真正的尺寸，而是我們從感官上感覺尺寸的種類，通過這種種類的組合，表示出不同螢幕尺寸裝置的橫屏及豎屏。

我們在給storyboard中的對象添加約束時可以選擇給某一個size class添加約束，所以在你選擇特定的size class時，只能看到你添加的只適用於該size class的約束。

這些特效能使我們有效在不同的裝置和螢幕方向中定義、設計不同的使用者介面。

Size Classes中的高和寬

Size Classes為高和寬分別提供了三種類型：緊湊型（compact）、普通型（regular）、任意型（any）。用這三種高和寬的類型就可以組合出9種size class，來表示不同的裝置螢幕。

在實際運用中，我們發現並不是所有的尺寸都能在Size Classes中找到明確的組合（比如沒有組合可以明確表示iPhone6 Plus的豎屏，iPad的橫豎屏也不好區分），但是我們可以使用表示這個尺寸範圍的組合。比如我們可以用Compact Width | Regular Height來表示iPhone6 Plus的豎屏。

接下來還是用一個活生生的樣本來向大家介紹Size Classes。

我們的目標

這個樣本是實現Instagram的一個詳細資料頁面，並讓它自適應更大的螢幕尺寸，在豎屏和橫屏中都展現出最合適的布局。

我們的目標是讓布局自適應iPhone6的螢幕（這裡需要注意一下，我所說的自適應是指圖片、文字資訊的布局排版，對於個人資訊的頭像不會根據布局的變化而變化），在豎屏中各個資訊按照堆棧方式從上到下布局，在橫屏時各元素按照大小進行有序排列，而不再是堆棧的方式：

給通用的size class添加約束

在這個樣本中，我們不會像上個樣本那樣使用模擬器的實際尺寸來設計布局，我們使用Size Classes提供的抽象的螢幕尺寸，這裡我們先使用通用的尺寸來設計布局，也就是w Any | h Any尺寸。我們要注意的是，在這個尺寸下添加的view或者約束必須是一些公用的，也就是說在任何尺寸，任何螢幕方向的情況下都適用的。

這些約束包括：

除了之前介紹過的頁邊間距約束、水平間距約束、等高等寬約束、方向比例約束外還有頂部、底部間距約束。

添加完上述的view和約束後，storyboard裡應該是這番景象：

這裡要注意一下，目前這個介面的布局還有很多關鍵點需要考慮橫屏和豎屏的布局，但是這些工作不會在w Any | h Any尺寸下進行。大夥接著往下看。

為iPhone的豎屏添加布局約束

現在在Size Classes選取器中選擇w Compact | h Regular尺寸，這個size class適用於所有iPhone裝置的豎屏介面，不論尺寸是多少。

當你在Size Classes選取器中選擇某一個size class後，storyboard 中的view controller會即時的反映出你改變後的尺寸大小。

現在你就可以為iPhone的豎屏狀態重新設計view的位置和添加新的布局約束了。中說明了我在豎屏狀態下添加的約束：

我的storyboard中看起來是這樣的：

在這個階段，你可以在3.5、4、4.7、5.5這幾個尺寸的模擬器中編譯運行應用，在豎屏狀態下看看它們的運行情況，儘管在橫屏狀態表現的還很糟糕。

這裡要注意的是我們並沒有定義圖片的寬度，我們只是給圖片添加了相對父容器的左右邊間距，並將其值設為了0。所以當螢幕尺寸增大的時候圖片的寬度在布局約束的作用下也會增加，這時又因為我們給圖片添加了高寬比例約束，所以圖片的高度也會隨之增加。

為iPhone的橫屏添加布局約束

開啟Size Classes選取器，選擇w Any | h Compact，這個size class適用於任何一個尺寸的橫屏狀態。我們將在這個size class下設計我們希望在iPhone橫屏時顯示的使用者介面。

此時圖片的頂部、左側、底部都添加了相對於父容器的邊界約束。在顯示評論的label上添加了右側邊界約束。

當裝置橫屏時，圖片在布局約束的作用下移到了左側，個人資訊label和評論label在約束的作用下被擠到了右側，並且評論label的高度增加，寬度減少。

現在來看看我的storyboard中顯示的內容。大家注意左側的對象結構樹中有很多個約束，但是有些是灰色的。那是因為這些灰色的約束在當前的size class下是禁用的，或者說不適用、不起作用。那些是豎屏時用到的約束。

現在在storyboard中切換size class時布局也會隨之變化，更新非常及時和平滑。

我們在模擬器中編譯運行應用，切換橫豎屏，可以看到布局切換的效果，過度非常自然平滑。

為了能讓大家看清楚布局變化過度的細節，我放慢了這個git動畫。大家注意，在布局變化時螢幕上的組件有一個層級關係，從該樣本中我們可以看到圖片view的層級高於個人資訊label和評論label。所以我們在設計布局的時候就要考慮如何給view分層，包括在普通布局中不會被覆蓋的view。這是一個細節問題。

螢幕預覽助手編輯器

Xcode6中另一個值得關注的功能是螢幕預覽助手。它可以避免你一遍遍的在不同螢幕尺寸的模擬器中編譯運行應用來檢查布局的正確與否。你可以在螢幕預覽編輯器中添加一個或多個你想查看的螢幕尺寸，並可以讓他們呈現橫屏或豎屏的狀態。

當然它也不是非常完美（因為在預覽時導覽列的顏色會丟失），但是切換Double Length Pseudolanguage選項很方便，便於你檢查問題。

從中大家可以看到我在螢幕預覽編輯器中顯示了3.5寸螢幕的橫屏和4寸螢幕的豎屏，整體布局沒有問題，但是當選擇Double Length Pseudolanguage使label中的文字都增加一倍時，問題就出現了，個人資訊和評論的label長度沒有自適應。

為iPad布局添加約束

現在我們將Sizae Classes調整為w Regular | h Regular，這個size class表示了iPad的橫屏和豎屏大小。

和往常一樣，我們先調整圖片和各個label的位置及大小，調整滿意後，再添加相關的約束。在iPad布局中我打算將圖片的尺寸設定為固定尺寸（不像iPhone中那樣隨著橫屏和豎屏改變圖片的尺寸），並將個人資訊和評論label緊跟在圖片下面。

我的storyboard現在看起來是這樣的：

以往，我們都是在特定的size class中添加相關的約束，但在iPad布局中，我們不僅僅只添加一些約束。

因為在iPad布局中有很大的空餘空間，所以我們不只是重新排列一下組件的位置和大小，我們還要添加一些其他的組件。在這個樣本中，我們再添加兩個圖片view（分別表示當前顯示圖片的上一張圖片和下一張圖片）。

再來看看我的storyboard：

我們不需要對這兩個圖片手動的設定高寬，而是給它們設定對於主顯示圖片的相對高寬即可。

這樣做的好處是當主顯示圖片的尺寸更改時，我們不需要自己手動計算和更改這兩個圖片的尺寸，相對高寬會自動針對主顯示圖片的尺寸調整這兩個圖片的尺寸。

我沒有製作在iPad上啟動並執行gif動畫，但這裡有iPad橫屏豎屏的運行圖片，大家可以看看：

使用布局視圖和間距視圖

目前Xcode提供的布局約束可以滿足大部分的布局需求，但是有些情境下需要變通的使用約束才能達到我們想要的效果。

布局視圖樣本

通過Xcode提供的約束，我們可以很容易設定組件與view controller view的邊緣的間距，也可以很容易的讓組件在view controller view中水平置中顯示和垂直置中顯示。但是卻不太容易設定組件與view controller view的水平中線或垂直中線的間距。像這樣：

下面向大家介紹兩種實現該需求的方法。首先我們先添加一個view，背景色設定為透明，讓它在螢幕中垂直置中顯示，它作為該需求中組件的父容器，因為父容器在螢幕中是垂直置中的，所以可以給組件添加相對於父容器的Center X約束，就可以達到我們的需求了：

但是通過上述的方式未免會使我們的布局的層級關係太過複雜，我更希望布局比較扁平一些，不需要太多的層級關係。因為上述方法中的容器view主要是用於布局使用，所以這種view我稱之為布局視圖。

我們來改進一下方法，首先也是在view controller view中添加一個布局視圖，我習慣將高度設定為20（這個值隨個人喜好或實際情況而定），然後將它和螢幕的頂部、左側、右側的間距設為0，這樣的話這個布局視圖就和狀態列重合了，我們將這個布局視圖設定一個深一點的顏色，然後將它的hidden屬性設定為true，這樣布局視圖的顏色就會變淺，也不太會影響我們的布局，而且在應用運行時是不會顯示該視圖的。現在我們的組件就可以設定相對於布局視圖的Center X約束來實現我們的需求了。

間隔視圖樣本

之前我們學習了如何使用約束設定視圖和視圖邊緣的間距，並且當螢幕尺寸增加時視圖也會相應的改變大小，但它們的間距不會改變。

但是如果我們希望當螢幕增加尺寸時，視圖的大小保持不變，只是增加間距呢？

從理論上講，實現該需求可能可以使用類似等寬這樣的約束，但是現實往往的是骨幹感的。

這時我們就需要間距視圖出場了，和布局視圖一樣，間距視圖可以設定一個深一點的顏色，hidden屬性要設定為true。

我們在每個視圖與視圖間距之間添加一個間距視圖，設定每個視圖與相鄰間距視圖的邊緣間距約束，然後給所有的間距視圖添加相對於view controller view的等寬約束，設定合適的比例即可。

原文地址：ADAPTIVE LAYOUTS FOR iPHONE 6

via：http://www.devtalking.com/articles/adaptive-layout-for-iphone6-1/