Swift基礎原理篇 — DAY4

工程師卡卡
9 min readMay 24, 2021

--

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」(自訂類別),這說明了兩者之間的關聯。

右方Custom Class為viewController

第二天的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 有一個空的視圖,也就是一剛開始的空白畫面。

建立一個新類別 ViewControllerUIViewController來擴展。

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。

--

--

工程師卡卡
工程師卡卡

Written by 工程師卡卡

Frontend developer Swift baby level

No responses yet