iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
1
Software Development

Swift 菜鳥的30天系列 第 3

Day-03 自動排好好的 Auto Layout

不要問我為什麼要先做這個功能的文章

原因是我覺得,一方面我對於介面排版有強烈的執著的私心,另一個原因是覺得至少畫面的呈現整齊、不會整個跑版,該有的功能都讓使用者能夠操作才是一個正常的 APP ,要是我換了一支手機或是裝置就不能用的話,應該說不過去吧。我應該會刪掉吧

畫面整齊美美的,不是讓人神清氣爽的嗎?


Auto Layout 簡單介紹

常常我們在設計開發的時候,在某一種機型上設計好介面之後,一切都是正常的。但是在測試的時候可能將畫面轉橫,或是嘗試在其他機種上測試,有時候整個 APP 介面會跑版的很誇張,或是有些元件跑出了手機的螢幕外,讓使用者無法去操作。或者當你終於在某種機型上都排得整整齊齊了,但老闆或主管臨時要求你更改機型,導致你可能需要重新排版,更慘的可能整個專案都要修改,欲哭無淚。

這時 Xcode 裡面的「 Auto Layout 」就是你強大的救星了

他是一個以「 約束條件 」為基礎的佈局功能,經由 Auto Layout 你可以藉由設定元件的約束條件 (舉例像是:對齊中央、對齊水平、距離左右多少像素),讓開發人員可以建置一個適應不同尺寸或是不同機種上的畫面,Auto Layout 會根據你設定的約束條件來自動適應各個畫面。

因為剛服完兵役,想到可以用一個有趣的例子來說明 Auto Layout:

就像當兵時期,值星班長叫你排隊去排哪裡,你就一輩子都排在那邊,都不會變。 有變就差不多被幹飛了
不管換什麼樣的隊形,每個人都有固定的位置,排頭永遠都是各個班的班頭。所以:

  • 班長叫你去排哪裡 & 班頭位置 = 約束條件
  • 變化隊形位置不會改變 = 自動適應位置
  • 位置有變化 = 被班長幹飛 Auto Layout 裡也有錯誤修正,會告訴你少設定了什麼條件

所以說 Auto Layout 看起來雖然不是什麼特別重要的過程,但是他對於畫面排版及設計上面有很大幫助。加上他的設定方式也不是特別的具有難度,設定完畢不管你要橫著看、站著看、換一隻手機看都可以。當初發現這個功能是因為 Xcode 的 Storyboard 上的預設裝置畫面是 iPhone 8 ,但是模擬器預設的卻是 iPhone 8 plus ,害當初設計畫面時的我一直覺得好像有點誤差,幸好有前輩指點,他一眼就看出了我沒有使用 Auto Layout 也順帶了告訴我一些使用的好處。

(溫馨小提示:當你拉元件出來的藍色虛線是對齊線,只是告訴你他跟 View 或是與其他元件對齊,並不是什麼約束,最上面還有一條線,上方的空間就是手機畫面最上方會有你的電信資訊、Wi-Fi、藍牙等等資訊的地方。)


我們先來看一些沒設定 Auto Layout 的範例

這是在 iPhone 8 的版面下設置的畫面,是正常的畫面:

(各種機型畫面可以透過 Storyboard 下方的機型轉換,不用特別去開模擬器)
https://ithelp.ithome.com.tw/upload/images/20171222/20107701AfvgnOmwkq.png

但是把 iPhone 8 轉換成橫的畫面時:

https://ithelp.ithome.com.tw/upload/images/20171222/20107701mQETo8axYW.png
(很明顯的圖片少了一部分,下面的 Label 則是整個都不見了)

試著換成 iPhone 4s 的畫面:

https://ithelp.ithome.com.tw/upload/images/20171222/20107701aB21fKCgaf.png
(很明顯的畫面縮小了,但是圖片跟標籤卻沒有自動適應所需的畫面位置)

簡單的 Auto Layout 設定方式

我們先以一張圖片 (imageView) 為範例來設定,如果我們想讓他保持大小並維持在畫面中間。

1. 為了保持它的圖片尺寸,我們要固定他的長寬,我們點選下方按鈕,並對圖片的 width 以及 height 打勾進行限制,並按下 Add 2 constraints 增加長寬的限制。

https://ithelp.ithome.com.tw/upload/images/20171222/20107701pacia7X7zK.png

2. 這時會發現圖片長寬有成功的被限制了,但是是紅色的線條,這說明我們可能缺少約束條件,並查看左邊的元件列表區的錯誤,錯誤訊息告訴我們,需要限制 X 與 Y 的位置,因此我們點按下端另一個按鈕,增加水平畫面限制及垂直畫面限制,一樣按下 Add 2 constraints 增加限制,使圖片呈現在我們的畫面中央。

https://ithelp.ithome.com.tw/upload/images/20171222/20107701Zna5wMWkMo.png

3. 限制設定完成之後,圖片周圍會產稱藍色的線條,這些就是成功增加上去的對他的限制,這時不管變換機種或是平放的畫面,圖片都會維持原有的大小並顯示在螢幕中央。

https://ithelp.ithome.com.tw/upload/images/20171222/20107701a5CmXKuJsf.png
https://ithelp.ithome.com.tw/upload/images/20171222/20107701T5q9USOKFY.png
https://ithelp.ithome.com.tw/upload/images/20171222/2010770129z3kR7BuK.png

4.這時如拖動圖片的話,會變成橘色的線條,這時就必須修正或更新他的限制,Xcode 會詢問要更新他的限制、回覆或是回到之前的位置。

https://ithelp.ithome.com.tw/upload/images/20171222/201077012jC3iYqRh6.png

5. 關於錯誤及修正,其實大部分限制的錯誤 Xcode 幾乎都能提示你錯誤並幫你搞定限制的問題,當你設定到自己都眼花撩亂時,你也可以對一個元件或是所有的元件清除他們的限制條件重新開始,當然你發生錯誤時裡面的 Add Missing Constraint,也能幫你修正錯誤。

當你發現缺少限制條件時,可以查看錯誤訊息並且修正
https://ithelp.ithome.com.tw/upload/images/20171222/201077016RGL5DpPaf.png

設定好限制之後,移動元件後須更新或重新限制條件
https://ithelp.ithome.com.tw/upload/images/20171222/20107701t3On7yJWQ8.png

*可以使用 Clear Constraints 來清除限制,記得有分成 Selected Views 跟 All Views in View Controller ,一個是清除你選擇元件的限制條件,一個則是清除全部的限制條件 *
https://ithelp.ithome.com.tw/upload/images/20171222/201077011SG7zUXwYi.png

當然這個功能當然不只只有放在中央,你也可以設定他的上下左右與 View 的間隔,設定完之後選擇紅色線條就能夠增加限制條件,使他在其他的畫面顯示上也是遵守相同的限制條件
https://ithelp.ithome.com.tw/upload/images/20171222/20107701UDsGxYYOLp.png

之後假設有多個元件在同個畫面上,他也能夠設定與該元件的間隔,更多的 Auto Layout 的使用方法及設定方式,我們會在下次的文章內提及。


上一篇
Day-02 菜鳥救星 - 萬能的Xcode大神
下一篇
Day-04 不同的 Auto Layout 方式
系列文
Swift 菜鳥的30天30

尚未有邦友留言

立即登入留言