IPhone 6的自适應布局

本文轉載自iOS大神部落格網  IPhone 6的自适應布局

從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中添加限制有三個方法：

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

   

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

   

3. 菜單/綁定你也可以選擇一個或多個對象，在菜單中點選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檔案。

除特别注明外，本站所有文章均為iOS大神部落格原創，轉載請注明出處來自http://www.51ios.net/archives/552