爲iPhone6設計自適應佈局(一)

轉載於:http://www.devtalking.com/articles/adaptive-layout-for-iphone6-1/

譯者的話:
本文是自適應佈局的鞏固篇,所以對佈局約束的添加操作步驟等沒有詳細的說明。如果看着吃力的話請先移步Swift自適應佈局(Adaptive Layout)教程

Apple從iOS6加入了Auto Layout後開始就比較委婉的開始鼓勵、建議開發者使用自適應佈局,但是到目前爲止,我感覺大多數開發者一直在迴避這個問題,不管是不是由於歷史原因造成的,至少他們在心底還堅守着固定佈局的老傳統思想。

隨着iPhone6、iPhone6 Plus的到來,使用自適應佈局更是迫在眉睫的事,固定佈局的老傳統思想脆弱的不堪一擊。現在的iPhone有4種尺寸,如果算上iPad,現在Apple的iOS設備有5種尺寸。我們在準備使用自適應佈局設計應用界面之前,可以把這5種尺寸劃分爲3種分辨率和屏幕方向,這樣在設計時分類會更加清晰一些。

我們先來看一張自適應佈局的效果圖:

圖片

當你們學習完這篇文章後,你們應該會比較自如的使用 storyboardconstaintssize 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的錯誤提示。

圖片

未完待續……

原文地址:ADAPTIVE LAYOUTS FOR iPHONE 6

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章