Storyboard中使用者介面及程式的是如何建立連結?背後的程式是什麼意思?跑模擬器是怎麼運作的呢?
在前幾張有提到swift是使用者介面(介面)與實作(程式)是分離的,兩個需要連結再一起,才能觸發事件。
以上篇的練習來講解,ViewController 檔案中的 showMessage(sender:)
方法就是「實作」。當某人按下按鈕,它會經由 showMessage(sender:)
的觸發來傳送一個 showMessageWithSender
訊息到 ViewController
類別。
剛剛述及的部分是物件導向程式設計(Object Oriented Programming )中一個很重要的觀念,稱為封裝(Encapsulation )。
showMessage(sender:)
方法的實作是與介面分離的,「Hello World」按鈕並不清楚 showMessage(sender:)
方法是如何運作的。主要是需要知道按此案紐會傳送訊息給 showMessage(sender:)
方法接手處理剩下的工作,再將訊息呈現在畫面上。
剛剛述及的部分是物件導向程式設計(Object Oriented Programming )中一個很重要的觀念,稱為封裝(Encapsulation )。 showMessage(sender:)
方法的實作是隱藏於外面的世界(也就是介面)背後,「Hello World」按鈕並不清楚 showMessage(sender:)
方法是如何運作的。我們所要知道的是這個按鈕只負責傳遞訊息而已,而 showMessage(sender:)
方法接手處理剩下的工作,也就是呈現「Hello World」訊息在畫面上。
使用者介面與程式之觸控關係
打開 Main.storyboard
, 並且點選按鈕, 在工具區最右邊點選「連結檢閱器」(Connection Inspector )。在 Sent Events 區塊,你可以找到一串可以取得的事件與相對應要呼叫的方法。在下圖中可以看到「Touch Up Inside」事件連結到 showMessage(sender:)
方法。
以一個 UI 元件(例如:按鈕)來說,它可以監聽到特定的觸控事件。當這事件被觸發時,這個物件就會呼叫與這個事件關聯的預設方法。
如上圖Sent Events 區塊看得出來,當使用者按了此按鈕後,「Touch Up Inside」事件被觸發,而它呼叫了 showMessage(sender:)
方法來顯示跳窗訊息。
IBAction touch events 敘述:Touch Down:按下物件的當下Touch Down Repeat:點兩下(double click)Touch Drag Enter:點擊物件,觸碰點離開物件又進去時觸發Touch Drag Exit:點擊物件,觸碰點離開物件時觸發Touch Drag Inside:點擊物件,在物件內觸碰點變動就會觸發(亂動就會一直觸發)Touch Drag Outside:點擊物件,在物件外觸碰點變動就會觸發(亂動就會一直觸發)Touch Up Inside:拉線時的預設值,在觸碰點不離開物件的前提點了放開Touch Up Outside:觸碰點在物件之外放開
使用者介面與程式之關係
Xcode 是如何知道介面建構器(Interface Builder )中的視圖控制器(View Controller ) 與定義在ViewController.swift
中的 ViewController
類別連結在一起呢?
Single View Application
模板,它會自動在介面建構器中建立一個預設的視圖控制器,並且產生了 ViewController.swift
。這個視圖控制器會自動連結定義在swift 檔中的 ViewController
類別(class )。
切換到 Main.Storyboard
,並在文件大綱視圖選取「View Controller」。在工具區中,選擇「識別檢閱器」(Identity Inspector )圖示,如下圖,你會看到 ViewController 被設定為「Custom Class」(自訂類別),這說明了兩者之間的關聯。
第二天的Hello world的程式碼解析
// import UIKit 引入外部framework
// @IBAction 輸出的至使用者介面的方法,也就是公開給介面建構器
// func 宣布方法
// showMessage 方法名字
// (sender: UIButton) UIButton 型態的 sender 參數
// showMessage 方法一定要宣告於 class 之中(這個是在 ViewController 中)import UIKitclass ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// 在載入視圖後,做另外的設定,通常是來自一個nib 檔
}
@IBAction func showMessage(sender: UIButton) {
let alertController = UIAlertController(title: "Kaka", message: "歡迎來到Swift的世界", preferredStyle: UIAlertController.Style.alert)
alertController.addAction(UIAlertAction(title: "衝呀!", style: UIAlertAction.Style.default, handler: nil))
present(alertController, animated: true, completion: nil)
}
}
- 一個方法的參數都有其名稱與型態,以冒號(
:
)來分開。而參是可有可無,沒有的話就直接寫func showMessage()
就可以了。 UIKit
框架就是其中一種,UIKit
框架提供了許多建構與管理你的 App 使用者介面的類別與函數,如要使用須先匯入(import )它。- 介紹
showMessage(sender:)
方法:
第一行將 UIAlertController
物件儲存進 alertController
,接著將參數帶入。先指定類別名稱,接著設定一組屬性(Property ) 的初始值。這裡我們設定標題(Title )、顯示訊息(Message )與提示的樣式(Style ):
let alertController = UIAlertController(title: "kaka", message: "歡迎來到Swift的世界", preferredStyle: UIAlertController.Style.alert)
建立完 UIAlertController
物件之後(也就是 alertController ),我們呼叫它的 addAction
加入一個動作,以顯示「衝呀!」按鈕的提示。在 Swift 中呼叫方法的程式寫法,是使用點語法。
alertController.addAction(UIAlertAction(title: "衝呀!", style: UIAlertAction.Style.default, handler: nil))
UIAlertController
物件設定好後,最後一行程式碼是在畫面上顯示訊息。
present(alertController, animated: true, completion: nil)
因為要顯示提示訊息,我們要求目前的視圖控制器以動畫方式來呈現 alertController
物件,所以放入animated : true。
有些時候,你能見到一些開發者以這樣的方式撰寫程式碼:
self.present(alertController, animated: true, completion: nil)
在Swift 中,self
屬性是參照至目前的實體(或者是物件),大部分的情況下,self
關鍵字是可以自己決定是否要放的,所以可以省略它。
tips :
在 Xcode 中,如果要來找方法的文獻,可以按下 option 鍵不放,然後在程式碼中將游標指向類別名稱(例如: UIAlertController )然後點擊,此時會彈出這個類別的敘述與程式範例。
- UIViewController
UIViewController
是 iOS App 的基礎模組。存放有UI 元件(例如按鈕)與顯示在畫面上的控制元件。預設的 UIViewController
有一個空的視圖,也就是一剛開始的空白畫面。
建立一個新類別 ViewController
由 UIViewController
來擴展。
class ViewController: UIViewController
讓ViewController
繼承了UIViewController
的所有功能。
「執行」模擬器背後的原理
當點選「執行」按鈕時, Xcode 自動啟動模擬器(Simulator ),並且執行你的 App。這整個程序可以被拆成三個階段:編譯(Compile)、封裝(Package)、執行(Run)。
- 編譯(Compile)– iOS 只會讀取機器碼(Machine Code),因為iOS看不懂Swift的程式碼只看得懂機器碼,Swift 程式碼只是供開發者撰寫與閱讀使用的。為了讓 iOS 認識 App 的原始碼,必須經過一個轉譯的過程,將 Swift 程式碼轉成機器碼,而這個過程就稱作「編譯」, Xcode 有內建編譯器來轉譯程式碼。
- 封裝(Package)– 除了原始碼之外,一個 App 通常會包含資源檔,像是圖片、文字檔、聲音檔等等。所有的資源檔皆會被封裝製作成最終的 App,我們通常把這兩個程序稱作「Build」。
- 執行(Run) –這個動作實際上是啟動模擬器並載入你的 App。