iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 11
0
Software Development

無中生有-從SWIFT語法學習到iOS APP的開發系列 第 11

Day11 - Auto Layout

前言

之前都沒提到的排版,今天就要來跟大家聊聊Xcode 裡面好用的Auto Layout。

隨著各種尺寸的裝置出現,開發者在設計介面的時候,就要非常小心不同裝置下的顯示狀況,也因此Apple 很貼心的在Xcode 裡內建了一個Auto Layout 的功能。

Auto Layout 主要有兩個部分
1.size classes tool
2.constraints

size classes tool 可以立即變更裝置,而隨著裝置尺寸不同,我們可以立即看到各元件在各裝置上的呈現方式。好的排版是可以因應各種裝置的

constraints是一種侷限、約束。大部分,我們都把元件放在View裡面,那View的大小就侷限了元件的大小與位置,說得有點抽象,下面在一一解說。

Auto Layout的基本觀念

1.建立一個空白View Controller(我們預設裝置是iPhone 8 Plus)並在View 裡面加入一個Image View ,圖片是一艘船

請記得,創立空白View Controller 時,裡面就附送了一個免費且滿版的View (滿版:它會自動符合各種裝置大小)

在拖曳過程中,我們刻意把圖片放在View 的正中心,要判斷有沒有在正中心,可以看輔助線(藍色虛線)
PS:這邊故意強調藍色虛線,因為那只是輔助線,並不是實際Auto Layout的結果!!

2.來看看在各裝置下的呈現結果

點選Main.storyboaurd主編輯器下方 View as: 就可以出現下方畫面,可以看到有很多裝置可以選擇,右上角也有Auto Layout按鈕可以點選

iPhone SE裝置下,已明顯偏右下方

iPhone 4S裝置下,船有些已經跑出可視範圍了

3.開始排版前先聊聊四個屬性

  • X軸(向右增加)
  • Y軸(向下增加)
  • width:元件寬度(間接與X軸有關)
  • height:元件高度(間接與Y軸有關)

Auto Layout不外乎要滿足上面這四個屬性,缺一不可!!
如果Auto Layout出現錯誤,一定是少了哪個屬性!

4.讓"船"永遠置中吧

點選船的圖片,按下Align的按鈕,選擇Horizontally in Container和Vertically in Container,接著Add 2 Constraints就可以了

來看看結果,右方屬性頁面多了兩個Constraints條件,點選"船"也可以看到兩條實心藍線

來看看iPhone SE下的呈現方式

iPhone 4S下的呈現方式

很棒,都置中了...
等等!Auto Layout成功了??那跟上面提的四屬性什麼關係??

決定X軸

Horizontally in Container,他的意思就是把元件放在Container的中間,而這裡的Container就是View(View Controller免費送的那個),我上面有提到過,這個免費的View會隨裝置自動調整大小,所以我們在其他裝置下也都會水平置中了

決定Y軸

Vertically in Container,這個約束跟水平置中一樣,間接決定Y軸

那width 和 height呢??

其實早在新增圖片的時候,我們就決定了元件(Image View)大小=圖片大小,如果要嚴謹一點,應該要加入width 和 height的約束條件,讓我們把元件大小加入constraints吧

進階一點的Auto Layout,錨點?

錨點這個詞是我自創的拉,因為等等的Auto Layout會用到相對位置,這個觀念有點像船和船錨位置的相對關係,所以用這個詞來做解釋

1.我們先把船錨置中在裝置正中心,並在上面一段距離放上一條船

船錨就比照上方的條件,建立
Horizontally in Container
Vertically in Container
Width: 100
Height: 100

PS:小小提醒一下,大家可以看到上方預留了一點空間,這個高度是20 point,這個高度是頂部的狀態列

2.建立相對距離

點選船,右鍵拉藍線拖曳到船錨,就會出現選單,選擇Vertical Spacing,他就會自動加入船與船錨的「垂直相對距離」

因為船錨已經決定好(X,Y,Width,Height),我們再建立船與船錨的垂直距離,也就間接決定了船的Y軸,再加上船本身圖片的大小,我們就只剩X軸還要設定了(可以看出Xcode已顯示紅線錯誤)

3.加入船的X軸設定

最快的方法就是加入Horizontally in Container,就可以完成Auto Layout

完成,都是實心藍線了

4.注意事項

  • Horizontally in Container也間接決定了左邊界和右邊界,所以不設定Horizontally in Container就要注意左右邊界是否都已經設定

  • 同理,Vertically in Container也間接決定了上邊界和下邊界,一樣要檢查是否缺少了

  • 要使用錨點時,錨點本身的Auto Layout一定要先完成!!否則你永遠約束不完!


上一篇
Day-10 莊家閒家 (Collection View 應用)
下一篇
Day12 - Git 基礎使用
系列文
無中生有-從SWIFT語法學習到iOS APP的開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言