目前蘋果最新的機型是4.7吋的iPhone 6以及5.5吋的iPhone 6 Plus，如果再加上舊的機型如3.5吋的iPhone 4（含更舊的3, 3GS等）、4吋的iPhone 5，再加上原本9.4吋的iPad系列機型，隨著蘋果逐漸導入更大螢幕的手機，似乎長期以來一直困擾著Android開發者的螢幕尺寸問題也開始漫延到iOS，成為開發者的夢魘之一。
不過如果我們攤開iPhone歷屆的機型來比較，會發現從型號5開始是一個分水嶺，iPhone 4S（含）之前的舊機型螢幕尺寸都是3:2，而從iPhone 5開始則都是接近16:9的比例，因此對於iPhone來說，雖然螢幕愈來愈大，但其實只有兩種尺寸大小：舊型的3:2與新型的16:9。
至於iPad，則無論是從最舊的第一代iPad到最新的iPad Air 或iPad Mini Retina，它們的螢幕尺寸比例皆維持在4:3，因此，對於iOS開發者來說，要開發同時適用於iPhone與iPad的APP，要應付的螢幕只有三種：3:2、16:9、4:3，這比起Android開發者來說輕鬆了不少。
點（Points）與像素（Pixels）
App開發者在設計與溝通時應該要用的是「點」概念，而非「像素」，每個點單獨對映到一個像素（非Retina）或二個像素（Retina）視設備的解析度而定，例如，對於320點x480點這個2:3的螢幕尺寸而言，它適用於前述的4S（含）以下的機型，320點x568點（接近9:16）則適用於5（含）更新的機型，而我們在編排畫面物件時，只要考量「點」的比例即可，像素的轉換則由iOS替我們處理，若為Retina螢幕自動將點以及圖片顯示長寬乘上2。
所以，在設計iOS APP時，我們只要針對兩種規格比例，並且加上「點」的概念去設計畫面佈局，就可以讓程式同時適用於iPhone與iPad（這類的App稱為Universal），而不同尺寸圖片無法無中生有，所以在開發App時我們還是必須分別提供不同的解析度圖片（例如在檔名後方加上「@2X」代表for Retina使用），Android也是採用類似的方法，但是更為複雜，因為它有六種不同的解析度定義：dpi、mdpi、hdpi、xhdpi、xxhdpi以及xxxhdpi，開發者若想支援全部的解析度，就必須將不同大小的圖片放置於該六個資料夾下。
關於Auto Layout
為了因應未來尺寸的多樣化（可能是考慮到Apple Watch、TV、HomeKit…?），從Xcode 6開始有了Auto Layout這個功能，它是一種以約束條件（Constraints）為基礎的佈局系統，目的是讓開發者能夠方便快速的建立適用於不同尺寸、橫向或直向等螢幕的APP，就像目前網站所流行的Responsive Design一樣，能夠自動適應不同尺寸的裝置。
那什麼是「以約束條件為基礎的佈局」呢？就是我們給予佈局中的元件設下各種條件與限制而非固定的像素值，這樣可使得它們依照著這些限制呈現出理想的相對排列，而非絕對的固定顯示於某一處，因此，舉例來說，如果我們要將一個按鈕擺在螢幕正中央，那麼它的兩個約束條件就是：水平置中與垂直置中。
對於一個元件來說，它會有15種約束條件，即三種尺寸 x 五種位置：
三種元件的尺寸
以約束條件方式來思考一個元件在螢幕上的尺寸，它會有三種情況：
- 固定尺寸的長和寬
- 固定尺寸的長和彈性縮放的寬
- 彈性縮放的長和固定尺寸的寬
- 彈性縮放的長和彈性縮放的寬（不列入）
最後的「彈性縮放的長和彈性縮放的寬」不列入的原因是這樣的尺寸比較特殊，它代表了無論放置在任何母元件中，它都會自動會伸展到跟母元件一樣大，因此它只適用於Scrollview元件（一種滾動不定長度的view，可用來收納其它元件）。
五種元件的位置
- 在母元件的正中心
- 靠上方排列
- 靠下方排列
- 靠左側排列
- 靠右側排列
想像一下，當下方的藍色元件的限制是：「彈性縮放的長和固定尺寸的寬」加上「靠右側排列」，那麼它會排列如下，無論螢幕尺寸大小或直擺橫放，佈局結果皆相同：
在Swift中使用Auto Layout
當我們在Xcode中開啟了一個新專案，預設便已經把Auto Layout和Size Classes選項打開了，因此你會注意到StoryBoard 的編輯畫面尺寸接近正方形，與以往接近iPhone尺寸的長方形不同，代表開發出的APP將適用於所有的Apple裝置。
尺寸類別（Size Classes）是iOS8新導入的類別，它可以讓開發者使用統一的Storyboard來開發不同的APP UI，如果我們改為不選取而disable它，那麼，Xcode就會要求我們選擇一種裝置型號（iPhone或iPad），並將Storyboard變更為其大小。
在右下方如紅圈所示，就是Auto Layout選單，所有的layout設置都收納在這選單中。
- Align：建立對齊的約束條件，像是對齊兩個元件的左側
- Pin：建立間隔的約束條件，像是訂出UI控制的寬度
- Issues：解決佈局的問題。（Xcode發現有問題的佈局時，會自動提示）
- Resizing：指出尺寸如何影響約束條件。
不錯的Auto Layout教學
我推薦可以先看看http://www.raywenderlich.com/83276/beginning-adaptive-layout-tutorial這篇基礎的實作教學，再看這兩篇：http://www.raywenderlich.com/83129/beginning-auto-layout-tutorial-swift-part-1與http://www.raywenderlich.com/83130/beginning-auto-layout-tutorial-swift-part-2。
在第一篇作者首先演示了傳統不使用Auto Layout會造成的問題，造成必須額外加入指令來修正，之後再透過Auto Layout功能實作則能夠完美的排列。
作者提到這種以約束條件進行的佈局稱為「Designing by intent」（依意圖來設計），意指考慮的不是物件的實際位置，而是以物件相對於其它物件的位置的限制條件，例如以往我們會如此設計：在左側的(20, 230)的位置，若改以限制條件的設計，就應改為：在母元件中垂直置中，距離母元件左側邊緣20點的距離。
另一個Auto Layout的好處是，它對於App的國際化設計有幫助，舉例來說，不同的語言詮釋一樣的文字時會有不同的長度，以「加入」這個詞彙來說，用中文與英文（Join）可能只需要15點寬度的Label就夠了，但改為德文（beitreten）就需要兩倍30點的寬度，此時，Auto Layout就發揮作用了，它會在不影響佈局的情況下自動擴展排列。
沒有留言:
張貼留言