iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Software Development

iOS 學習筆記系列 第 5

Day05 UIKit 04 - 在 Storyboard 上設計畫面

在 Storyboard 上設計畫面

接下來我們來在一開始建立的專案上設計畫面,首先我們在專案導覽器選取Main.storyboard,這時Xcode 便會顯示出一個 Storyboard 的視覺編輯器,即所謂的「介面建構器」(Interface Builder ),而此時Main.storyboard上的畫面即是預設的ViewController.swift的視圖

介面建構器提供一個視覺化的方式讓開發者來建立與設計 App 的 UI,可以使用它來設計個別的視圖(或畫面),介面建構器的 Storyboard 可以讓你佈局多個視圖(ViewController),並使用不同的轉場(transition )方式來建立完整的使用者介面。這些都不需要撰寫一行程式碼即可辦到

透過點選Xcode 右上角的元件庫(+)按鈕來顯示元件庫
https://ithelp.ithome.com.tw/upload/images/20210920/20118479joEW6N6F1s.png

在這裡可以選擇任何一個 UI 視圖元件,並拖放到這個視圖上
https://ithelp.ithome.com.tw/upload/images/20210920/20118479eQErfH459E.png

此時可以在工具區( Utility Area )下點選屬性檢閱器( Attributes Inspector ),它可以讓您對選取的視圖編輯屬性
https://ithelp.ithome.com.tw/upload/images/20210920/20118479rgnk2PMMbH.png

拉完所設計的UI 後,這邊介紹一個 Xcode 好用的功能,Assistant Editor 輔助編輯/關聯編輯功能,它可以用來幫助你快速檢閱目前最為相關的關聯文件,並提供必要的互動。

只要在 Xcode 上,點選 Adjust Editor Options 按鈕
https://ithelp.ithome.com.tw/upload/images/20210920/20118479NLhDdYYQOs.png

然後選擇 Assistant (快速鍵 cmd + option + control + enter),即可顯示 Assistant Editor 輔助編輯畫面
https://ithelp.ithome.com.tw/upload/images/20210920/20118479ohBdMd0qM1.png

之後 Assistant Editor 就會自動預測你目前可能還需要檢閱哪些文件,像是您正在使用 Interface Builder 設計介面,Assistant Editor 即會自動顯示其對應的 ViewController,如下圖

https://ithelp.ithome.com.tw/upload/images/20210920/20118479t5tuJrgcP8.png

在編輯介面時也可以透過 Assistant Editor 直接產生介面元件所需的程式碼,只要直接將元件拖曳至程式碼中即可,我們在介面上再新增一個按鈕來一起介紹

首先用control + 滑鼠左鍵或是滑鼠右鍵對要編輯的視圖進行拖拉,並拖曳至ViewController 中第一個 function 位置的上面

注意:Xcode 將透過我們所拖曳至的位置來判斷產生的程式碼,連到第一個 function 之前將產生property 的 outlet,連到第一個 function 之後將產生 function 的 action,因為定義 class 時,我們習慣在前面宣告 property,後面定義 function

當然,若拉錯位置時,可在 Outlet 設定視窗,透過Connection 的選單切換更改

https://ithelp.ithome.com.tw/upload/images/20210920/20118479jy8DbopDtW.png

接著在 Outlet 設定視窗的 Name 欄位輸入名字,然後按右下角的 Connect

https://ithelp.ithome.com.tw/upload/images/20210920/20118479muu7gLdkw7.png

將產生以下程式碼:

    @IBOutlet weak var button: UIButton!

接著換對按鈕視圖再用control + 滑鼠左鍵或是滑鼠右鍵拖拉到ViewController 中第一個 function 位置的下面

https://ithelp.ithome.com.tw/upload/images/20210920/20118479tlQgYWd8KU.png

然後在 Action 設定視窗的 Name 欄位輸入名字,然後按右下角的 Connect

https://ithelp.ithome.com.tw/upload/images/20210920/20118479IBr5Zse8M0.png

將產生以下程式碼:

    @IBAction func buttonPressed(_ sender: Any) {
    }

這樣就簡單透過 Assistant Editor 完成了 UI 物件與程式碼的連結,此時可以在工具區下點選 Connections Inspector ,它可以顯示屬於此物件的相關Connections 資料,可以看到我們的按鈕已經與ViewController 連結

https://ithelp.ithome.com.tw/upload/images/20210920/20118479srMpXeLbiz.png

接下來我們就能透過在 ViewContorller 來對畫面來進行程式設計了


上一篇
Day04 UIKit 03 - SceneDelegate
下一篇
Day06 UIKit 05 - 純代碼編寫 Code
系列文
iOS 學習筆記30

尚未有邦友留言

立即登入留言