第 3 章
Hello World! 使用 Swift 建立你的第一隻App

從做中學,理論很棒,但無法取代實際的經驗

– Tony Hsieh

現在你應該已經安裝好 Xcode,並且對 Swift 語言有些了解,如果你跳過前兩個章節,先往回閱讀一下,你必須要先安裝 Xcode 11 才能繼續本章所有的練習。

在閱讀任何程式書籍之前,想必你聽過「Hello World」程式,這是所有程式的初學者要去建立的第一個程式。這是一個非常簡單的程式,就是在裝置螢幕上顯示「Hello World」。在程式世界中,這是一項傳統。因此,讓我們遵循傳統,使用 Xcode 來建立一個「Hello World」App。

儘管這很簡單,但學習這個程式有以下幾個目的:

  • 首先你將大概地認識新的 iOS 程式語言— Swift 的語法與結構。
  • 學習這個程式的過程中,將針對 Xcode 開發環境做基本介紹。你將學會如何建立一個 Xcode 的專案,以及使用介面建構器來建構使用者介面。即使之前你已有過 Xcode 的開發經驗,你也可以順便了解 Xcode 的新版本有哪些新功能。
  • 你將學會如何去編譯一個程式,產生一個 App 以及使用模擬器來觀看測試結果。
  • 最後,你會覺得開發程式再也不是一件難事了,我可不想馬上嚇跑你,寫程式會是一件很有趣的事情。

你的第一個 App

你的第一個 App 非常簡單,如圖 3-1 所示,只單純顯示「Hello World」的按鈕,當使用者按下按鈕,這個 App 會顯示一則歡迎訊息。如此,雖然簡單,卻可幫助你踏上了 iOS 程式開發之路。

圖 3-1. HelloWorld App
圖 3-1. HelloWorld App

但這只是個開端,經過本章的一些挑戰之後,你將會持續改善你的第一個 App 讓它看起來更有趣,先讓你看一下,圖 3-2 是最後完成的結果。

圖 3-2. 你最後的成果
圖 3-2. 你最後的成果

當你在建構你的第一個 App 時,請記得:不要急著關注程式碼,先跟著做。即使目前你對 Swift 程式碼已經有些概念,我想你還是會發現有些程式碼不易理解,別擔心,將重點放在這個實作上,以讓自己熟悉 Xcode 開發環境。我們將會在下一章討論這些程式碼。

進入App開發的世界—開始建立專案

首先,開啟 Xcode。啟動後,Xcode 會顯示一個歡迎的對話視窗,如圖 3-3 所示,在這裡選擇「Create a new Xcode project」,開始建立一個新的專案。

圖 3-3. Xcode 啟動後的歡迎視窗
圖 3-3. Xcode 啟動後的歡迎視窗

Xcode 提供各種不同類型的專案模板讓你選擇,每一個模板都有不同的目的,可以讓你更容易開始開發特定型態的應用程式。譬如說,你想要為訊息 App 開發一個貼圖包,你可以使用 Sticker Pack App 模板,不過,大部分的情況下, Single View Application 這個模板已經足夠用來建立一個 iOS App,因此,點選「iOS → Single View Application」, 然後按下 Next 按鈕,如圖 3-4 所示。

圖 3-4. Xcode 專案模板選擇
圖 3-4. Xcode 專案模板選擇

接下來會出現另一個畫面,用來填寫專案必要的相關資訊,如圖 3-5 所示。

圖 3-5. 你的 Hello World 專案選項
圖 3-5. 你的 Hello World 專案選項

你只需要填入以下幾項資訊:

  • Product Name:HelloWorld — 你的 App 的名稱。
  • Team:這邊先不做設定。先跳過此步驟。
  • Organization Name:AppCoda — 你的組織名稱。如果你是為某個公司單位開發 App,則你也可以使用你公司單位的名字。
  • Organization Identifier:com.appcoda —其實這只是一個網域名稱倒過來的寫法,假如你有自己申請的網域,你可以填入自己的網域名稱,若是沒有的話,你也可以使用「com.」。舉例來說,你的名字叫做 Pikachi,你可以這在 Organization Identifier 這裡輸入「com.pikachi」。
  • Bundle Identifier:com.appcoda.HelloWorld —這是你的 App 在送審時所使用的唯一識別碼。你不需要輸入這個選項,Xcode 會自動產生。
  • Language:Swift— Xcode 支援 Objective-C 與 Swift 為 App 開發的程式語言,因為本書是和 Swift 有關,我們會採用 Swift 來進行專案開發。
  • User Interface(使用者介面):請選取 Storyboard
  • Use Core Data不用勾選—這個選項不要勾選,此專案比較單純,不需要使用到 Core Data。
  • Include Unit Tests:不用勾選 —這個選項不要勾選,此專案不會用到 Unit Tests。
  • Include UI Tests:不用勾選—這個選項不要勾選,此專案不會用到 UI Tests。

點選「Next」按鈕繼續,接著Xcode 詢問你儲存「Hello World」專案的位置,請選擇你Mac 電腦中的任何一個資料夾(例如:桌面)。你或許會注意到有一個版本控制(Source Control )的選項,這裡不選擇它,本書不會用到這個選項,按下「Create」按鈕繼續,如圖 3-6 所示。

圖 3-6.選擇資料夾並儲存你的專案
圖 3-6.選擇資料夾並儲存你的專案

當你確認之後,Xcode 會依照你所提供的資訊自動建立「HelloWord」專案,畫面如圖 3-7 所示。

Figure 3-7. HelloWorld 專案的Xcode 視窗畫面
Figure 3-7. HelloWorld 專案的Xcode 視窗畫面

熟悉 Xcode工作區

在開始實作 Hello World App 之前,讓我們花幾分鐘快速看一下 Xcode 的工作環境。左邊區塊的操作面板是「專案導覽器」(Project Navigator ),你在這個區塊可找到你所有的專案檔案。工作區中間區塊就是「編輯區」(Edit Area),你在這個區塊可進行所有的編輯(如編輯專案設定、原始碼檔案、使用者介面等等)。

依照檔案型式的不同,Xcode 會顯示不同的介面。舉例來說,在專案導覽器選取 ViewController.swift,Xcode 會在中間區塊顯示程式原始碼(如圖 3-8 所示)。

圖 3-8. Xcode 工作區與原始碼編輯器
圖 3-8. Xcode 工作區與原始碼編輯器

假使選取了用來儲存使用者介面的 Main.storyboard,Xcode 則顯示了 Storyboard 視覺編輯器,如圖 3-9 所示。

圖 3-9 . Xcode Workspace 與 Storyboard 編輯器
圖 3-9 . Xcode Workspace 與 Storyboard 編輯器

最右邊的面板是「工具區」(Utility Area ),這個地方顯示了檔案的屬性,並且讓你能夠使用「迅速協助」(Quick help )功能。如果你的 Xcode 沒有顯示這個區塊,你可以點選工具列(在右上角位置)的最右邊按鈕來開啟它,如圖 3-10 所示。

圖 3-10. 顯示/隱藏工作區的內容區塊
圖 3-10. 顯示/隱藏工作區的內容區塊

視窗選擇區中間的「檢視」(View)按鈕預設上是沒有被選取的,當你點選這個按鈕, Xcode 會在「編輯區」( Edit Area )下方顯示「除錯區」( Debug Area )。「除錯區」如名稱所示,是用來顯示除錯訊息,我們在之後的章節中將會談到。因此此刻你如果不太了解這個區塊的用途,也毋需擔心。

第一次執行你的App

至目前為止, 我們還沒有撰寫一行程式碼, 即使這樣, 你可利用內建的模擬器(Simulator )來執行你的App,這可以讓你了解如何在 Xcode 建立與測試 App。如圖 3-11 所示的工具列中,你可以看到「執行」(Run)按鈕。

圖 3-11.Xcode 上的執行(Run)與停止(Stop)按鈕
圖 3-11.Xcode 上的執行(Run)與停止(Stop)按鈕

Xcode 的「執行」(Run)按鈕是用於建立 App,並依所選定的模擬器來執行。模擬器預設為 iPhone 8 Plus。假如你點選了iPhone 8 Plus 按鈕,此時你會看到可選用的模擬器清單,如 iPhone 8 與 iPhone X,我們先選擇 iPhone 8 作為模擬器來測試。

當選取後,你就可以按下 Run 按鈕來載入你的 App 至模擬器上。圖 3-12 顯示了 iPhone 8 的模擬器畫面。

圖 3-12. 模擬器畫面
圖 3-12. 模擬器畫面
Quick tip: 在非 Retina 螢幕的 Mac,模擬器可能無法顯示全螢幕視窗。你可以選取模擬器,並按下command+l 來縮小,或者你也可以將滑鼠指標移到裝置邊框的其中一個角落處來將縮放大小。

模擬器中只有一個空白畫面?這很正常,到目前為止,你還沒有設計使用者介面,也沒有撰寫任何一行程式碼,所以模擬器中只有顯示空白畫面,要結束這個 App 時,你只要按下工具列的 Stop 按鈕即可。

試著選擇其他模擬器來執行 App(例如:iPhone 11 Pro ),你會見到另一個模擬器顯示在畫面上,自 Xcode 9 以後的版本,你便可以同時執行多個模擬器。

圖 3-13. 執行多個模擬器
圖 3-13. 執行多個模擬器

這個模擬器跟 iPhone實機很相似,你可以點擊 home 按鈕來帶出主畫面,而且它內建了一些 App,只要操作一會兒,你將會逐漸熟悉Xcode 開發環境。

Quick tip:同時執行多個模擬器會耗掉你的 Mac 電腦的記憶體。如果你不需要使用模擬器,你可以選擇模擬器,然後按下 command+w 來關掉它。

迅速掌握介面建構器

現在你對 Xcode 的開發環境應該有了基本的觀念,我們繼續設計你的第一個 App 的使用者介面。在專案導覽器中選取 Main.storyboard 檔,Xcode 便會帶出一個 Storyboard 的視覺編輯器,此即所謂的「介面建構器」(Interface Builder )。

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

圖 3-14.介面建構編輯器
圖 3-14.介面建構編輯器

在 Xcode 10,Apple 針對元件庫(Object library)有做了一些改變,如果你有使用 Xcode 9(或者之前的版本),元件庫是位於右下方面板。現在元件庫預設是被隱藏起來。你必須點選上方選單的元件庫按鈕,來顯示它的浮動視窗,如圖 3-14 所示。元件庫(包含了所有的 UI 元件,如按鈕(button)、標籤(label)、圖像視圖(image view),讓你可以運用它們來設計使用者介面,你會看到元件庫有兩種顯示模式:列表模式(list view )圖示模式(icon view )。在本書中,我比較喜歡採用圖示模式,若是你想要將它變更為列表模式,則只要按下「切換」(toggle )按鈕來切換即可。

因為我們在專案建立時選取了 Single View Application 模板,Xcode 會在 Storyboard 產生一個預設的視圖控制器(View Controller )場景,在你的介面建構器中,你會在編輯區中見到一個視圖控制器,這即是你建構使用者介面的地方。App 中的每一個畫面通常是以視圖控制器來呈現。介面建構器可以讓你建構多個視圖控制器至Storyboard 中,然後再彼此串連起來。本書接著會進一步討論到這個部分。此時,先將重點放在學習如何使用介面建構器來佈局預設視圖控制器的 UI。

何謂場景(Scene)?

Storyboard 內的場景代表了一個視圖控制器與其視圖(View)。在開發iOS App 時,視圖是建構你的使用者介面的基本區塊。每一種視圖的型態有它自己的功能。舉例來說,在Storyboard 中你所看到的視圖是一個容器視圖(Container View ),用來存放其他視圖,如按鈕、標籤與圖片視圖(Image view )等。 視圖控制器是設計作為管理其相關視圖與子視圖(Subview,例如:按鈕與標籤)。如果你對視圖與視圖控制器之間的關係仍然感到疑惑的話,不用擔心,我們將在之後的章節討論視圖與視圖控制器之間的運作方式。

介面建構器的文件大綱視圖(Document Outline View )呈現了所有場景的概觀與特定場景下的物件,當你想要選取一個Storyboard 上的特定物件時,大綱視圖是非常實用的, 如果大綱視圖沒有出現在畫面上,可按下「切換」(toggle )按鈕(如圖 3-14 所示)來顯示/隱藏大綱視圖。

最後,在介面建構器中有一個設定欄(Configuration Bar ),要打開這個設定欄,你只要將滑鼠游標放在 View as: iPhone 8,然後在上面點選一下即可。這個設定欄是自 Xcode 8 引入的功能,可以讓你即時在不同的裝置上檢視你的App UI。你還可以使用 按鈕來縮放 Storyboard,如圖 3-15 所示。我們稍後會來討論這個新功能。

圖 3-15. Xcode 中的設定欄
圖 3-15. Xcode 中的設定欄

設計使用者介面

現在我們準備要設計 App 的使用者介面,首先,我們我們將加上「Hello World」按鈕至視圖中。點選元件庫按鈕來顯示元件庫,你可以選擇任何一個 UI 元件,並拖放到這個視圖上。如果你目前的元件庫是以圖示模式來呈現,你可以點選任一個元件來揭示元件的細節描述。

好的,是時候把按鈕加入視圖中了。你只需要從元件庫拖曳一個 Button 元件至視圖中即可(如圖 3-16 所示)。

圖 3-16. 拖曳按鈕至視圖中
圖 3-16. 拖曳按鈕至視圖中

當你拖曳Button 元件至視圖中,你會看見一組水平線與垂直線導引按鈕置中對齊,接著停止拖曳,然後釋放按鈕並置入Button 元件。

下一步,我們重新命名這個按鈕,按滑鼠左鍵兩下並且編輯按鈕上的標籤,將它命名為「Hello World」,如圖 3-17 所示。修改之後,你可能需要微調一下,讓按鈕重新置中對齊。

圖 3-17. 重新命名按鈕
圖 3-17. 重新命名按鈕

如果字被截掉了,你可以重新調整按鈕來讓它相容,或者按一下 command+= 來讓 Xcode 幫你調整大小。

圖 3-18.調整 Hello World 按鈕
圖 3-18.調整 Hello World 按鈕

很棒!你現在可以準備測試你的 App 了,在模擬器上選取 iPhone 8 作為模擬器,並按下「Run」按鈕來執行這個專案,你會見到模擬器上有一個「Hello World」按鈕,如圖 3-19 所示。很酷,對吧?

圖 3-19. Hello World App 加上了按鈕
圖 3-19. Hello World App 加上了按鈕

不過,當你按下按鈕後,卻沒有任何反應。我們需要加上幾行程式碼來顯示「Hello World」訊息。

Quick note:  這是 iOS 開發的美妙之處。程式碼與使用者介面是分開的。你可不需要撰寫任何一行程式碼,便能使用介面建構器設計你的使用者介面並規劃App 原型。 

為Hello World按鈕加上程式碼

你已經完成 Hello World App 的UI,是時候寫些程式碼了。在專案導覽器(Project Navigator), 可以找到`ViewController.swift 檔。因為我們一開始使用Single View Application專案模板,Xcode 已經在ViewController.swift 檔中產生了一個 ViewController 類別,這個檔案實際上是和 Storyboard 上的視圖控制器關聯在一起,為了在按下按鈕後顯示訊息,我們將會在這檔案中撰寫些程式碼。

Swift 與Objective-C 的比較

如果你有寫過 Objective-C 的程式碼,而 Swift 的一項最大改變就是標頭檔(.h )與實作檔(.m)的合併,現在一個特定類別(class )的所有資訊都存在單一個 .swift 檔。

選取 ViewController.swift 檔,此時編輯區塊立即顯示了原始碼,加上下列的程式碼至 ViewController 類別內:

@IBAction func showMessage(sender: UIButton) {
    let alertController = UIAlertController(title: "Welcome to My First App", message: "Hello World", preferredStyle: UIAlertController.Style.alert)
    alertController.addAction(UIAlertAction(title: "OK", style: UIAlertAction.Style.default, handler: nil))
    present(alertController, animated: true, completion: nil)
}
Note: 我鼓勵你自己輸入程式碼,而不是只是複製貼上而已。

程式原始碼編輯後如下所示:


import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // 在載入視圖後,做另外的設定,通常是來自一個nib 檔
    }

    @IBAction func showMessage(sender: UIButton) {
        let alertController = UIAlertController(title: "Welcome to My First App", message: "Hello World", preferredStyle: UIAlertController.Style.alert)
        alertController.addAction(UIAlertAction(title: "OK", style: UIAlertAction.Style.default, handler: nil))
        present(alertController, animated: true, completion: nil)
    }
}

剛剛只是加入showMessage(sender: UIButton)方法至 ViewController 類別中。在方法中的 Swift 程式碼對你來說是全新的東西,而在下一章中我會仔細解釋,此時,只要將 showMessage(sender: UIButton) 當作是一個動作(Ation ),當這個動作被呼叫時,iOS 會命令這個程式碼區塊在畫面上顯示一個「Hello World」訊息。

Note: 你有注意到某些程式前面一開始有加上 "//" 嗎? 在 Swift,如果某行程式前面加上 "//",該行程式就變成註解(comment),表示這行程式並不會執行。 

你可以試著在模擬器中執行這個專案,App 的運行結果還是相同,當你按下按鈕,它不會有任何回應,這是因為我們還沒有將按鈕與程式做連結。

使用者介面與程式碼間的連結

前面提到 iOS 開發之美妙的地方在於,程式碼(.swift 檔)與使用者介面(Storyboards) 是分開的,但是該如何將原始碼與使用者介面之間的關係建立起來呢?

針對這個範例,此問題可以更具體的敘述為:

  • 我們應該如何將 Storyboard 中的「Hello World 」按鈕與 ViewController 類別中showMessage(sender: UIButton) 方法連結起來呢?

你需要在「Hello World」按鈕與你剛加入的 showMessage(sender: UIButton) 方法間建立連結,這樣可以在某人按下「Hello World」按鈕時產生相對應的反應。

現在選擇 Main.storyboard,切換回介面建構器。按下鍵盤上的鍵不放,點選「Hello World」按鈕,並拖曳至介面建構器圖示。將按鈕(滑鼠加鍵盤)放開,此時會彈出一個視窗,在 Sent Events 區塊下方會出現一個showMessageWithSender:的選項,如圖 3-20 所示。選擇它,以將按鈕與 showMessageWithSender: 動作做連結。

圖 3-20. 拖曳至View Controller 圖示(左圖),按鈕釋放後出現彈出式選單(右圖)
圖 3-20. 拖曳至View Controller 圖示(左圖),按鈕釋放後出現彈出式選單(右圖)

測試你的 Hello World App

完成了,現在你可以準備測試你的第一個 App。假使每個步驟都是正確的,只要按下「Run」按鈕,你的 App 就能順利在模擬器上運作。這次,當你按下「Hello World」按鈕後,App 會顯示一個歡迎訊息,如圖 3-21 所示。

圖 3-21. Hello World App
圖 3-21. Hello World App

變更按鈕顏色

如前所述,你不需要撰寫程式碼就可以自訂 UI 控制(UI Control )。因此,當想要變更一個按鈕的屬性(例如:顏色)是一件很容易的事。

選取「Hello world」按鈕,然後在工具區(Utility Area )下點選屬性檢閱器(Attributes Inspector ),你將可以存取按鈕的屬性。在這裡,你可以變更字型、文字顏色、背景顏色等。試著改變文字顏色(在 Button 區塊下)為 白色,以及背景顏色(往下滾動,你會在 View 區塊找到它)為紅色,或者你也可以輸入你想呈現的顏色,如圖3-22 所示。

圖 3-22. 變更「Hello World」按鈕的顏色
圖 3-22. 變更「Hello World」按鈕的顏色

執行這個專案,來看看結果如何。

你的作業#1

你不只可以變更按鈕的顏色,你也可以在屬性檢閱器(Attributes Inspector )設定 Font 選項來修改字型與大小。你的任務就是繼續修改這個專案,如圖 3-22 所示。當使用者按下任一個按鈕,這個 App 都會顯示相同的「Hello World」訊息。

圖 3-23. 設計這個 App
圖 3-23. 設計這個 App

這邊做一些提示,以下是你所需要做的工作:

  1. 調整「Hello World」按鈕的大小,並變更字型的大小為 70 點(point)。另外將標題從 Hello World 改為👾。要輸入表情符號,你可以按下 control 鍵 + command 鍵,然後按下空白鍵。

  2. 加入其他的按鈕。每一個都有一個表情(emoji)圖示作為其標題。

  3. 建立每一個按鈕與 showMessage(sender: UIButton)方法間的連結。

你的作業#2

如果按下按鈕顯示的是如圖 3-2 所示,是顯示表情符號的意義而不是「Hello World」訊息是不是更好呢?

你已經學會如何使用字典來儲存表情符號的意義,現在試著修改 showMessage(sender: UIButton) 方法,如此才能顯示表情符號的意義,我這邊做個提示,以下是程式的架構,將目前的 showMessage(sender: UIButton) 方法以這段程式取代,並補齊缺少的程式碼:

@IBAction func showMessage(sender: UIButton) {

    // 初始化一個存放表情符號的字典
    // 如果你忘記怎麼做,請參考一下前面的章節
    // 程式碼填入至下方




    // sender 是使用者所按下的按鈕
    // 這裡我們將 sender 儲存至 selectedButton constant
    let selectedButton = sender

    // 從所選按鈕的標題標籤取得表情符號
    if let wordToLookup = selectedButton.titleLabel?.text {

        // 從字典取得表情符號的意義
        // 程式碼填入至下方



        // 變更以下這行程式將 Hello World 的顯示以來表情符號的意義來取代
        let alertController = UIAlertController(title: "Meaning", message: meaning, preferredStyle: UIAlertControllerStyle.alert)

        lertController.addAction(UIAlertAction(title: "OK", style: UIAlertAction.Style.default, handler: nil))
        present(alertController, animated: true, completion: nil)
    }

}

這題作業比起第一題來的更難些,盡力來完成它,你會發現將 Hello World App 變更成表情符號翻譯器會非常有趣。

接下來的課程—Hello World App的原理

恭喜你已經建立了第一個 iPhone App。這雖然是一個簡單的 App,不過我相信你已經對 Xcode 以及對 App 的建立方式更有概念了,比你想像得還容易是吧!

即使你不能完成作業 #2,沒有關係,不要沮喪,我有提供解答讓你參考,只要持續閱讀,程式寫得越多時,你便會越來越進步。

下一章,我將會討論 Hello World App的細節,並解釋這一切是如何運作的。

本文摘自《iOS 13 App程式設計實戰心法》一書,博碩授權轉載。如果你想更深入學習Swift程式設計和下載完整程式碼,你可以從AppCoda網站購買完整電子版。

results matching ""

    No results matching ""