Swift 新手系列之一: 打造你的第一個 iOS App

要開發你的第一個iOS App,Xcode是唯一需要下載的工具(假設你已有一台Mac電腦)。Xcode是一個整合開發環境(Integrated Development Environment,簡稱IDE),Xcode提供你開發App所有的工具。它包含了最新版本的iOS SDK(Software Development Kit的縮寫)、一個內建的程式碼編輯器、圖形化使用者介面(User Interface,簡稱UI)編輯器、除錯(Debug)工具,還有更多其他的工具。最重要的是,Xcode提供了iPhone(或iPad)的模擬器,讓你不需要用到實體裝置也能測試你的App。


我們將使用Xcode 7.0版本(或以上)來進行本範例練習,假如你還沒安裝Xcode 7,請先到 Mac App Store 下載

本文摘自《iOS 9 App程式設計實力超進化實戰攻略》一書,博碩授權轉載。

在讀任何程式書籍之前,想必你聽過「Hello World」程式,這是所有程式的初學者要去建立的第一個程式。這是一個非常簡單的程式,就是在裝置螢幕上顯示「Hello World」。

在程式世界中,這是一項傳統。因此,讓我們遵循傳統來建立一個「Hello World」App,儘管簡單,學習這個程式有以下幾個目的:

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

你的第一個App — Hello World

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

hello world demo

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

首先,開啟Xcode。假如你已經透過Mac App Store安裝過Xcode了,你應該能夠在Mac的Launchpad找到這個圖示,你只要點擊這個圖示就可以啟動它。

xcode icon

啟動後,Xcode會顯示一個歡迎的對話框,如下圖所示,在靠下方處選擇「Create a new Xcode project」,開始建立一個新的專案。

helloworld-2

Xcode提供各種不同類型的專案模板讓你選擇,針對這個App,選取Application(在iOS下)的「Single View Application」,之後按下「Next」按鈕,如下圖所示。

專案模版選擇

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

專案細項選填畫

你只要填入以下幾項功能:

  • Product Name: HelloWorld – 你的App的名稱。
  • Organization Name: AppCoda – 你的組織名稱。
  • Organization Identifier: com.appcoda – 這只是一個網域名稱倒過來的寫法,假如你有自己申請的網域,你可以填入自己的網域名,沒有的話,你也可以跟我一樣使用「com.appcoda」或者輸入「edu.self」即可。
  • Bundle Identifier: com.appcoda.HelloWorld – 這是你的App在送審時所使用的唯一識別碼。你不需要輸入這個選項,Xcode會自動產生。
  • Language: Swift – 支援Objective-C與Swift為App開發的程式語言,因為本書是跟Swift有關,我們會採用Swift來進行專案開發。
  • Devices: iPhone – 針對這專案只要選「iPhone」。
  • Use Core Data: [不用勾選] – 這個選項不要勾選,此專案比較單純不需要使用到Core Data,之後的章節會談到Core Data。
  • Include Unit Tests: [不用勾選] – 這個選項不要勾選,此專案不會用到Unit Tests。
  • Include UI Tests: [不用勾選] – 這個選項不要勾選,此專案不會用到UI Tests。

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

挑選檔案夾並儲存你的專案

當你確認之後,Xcode會依照你所提供的資訊自動建立「Hello World」專案,畫面如下圖所示。如果Xcode在Team 選項顯示「No matching signing identity found」的錯誤訊息,則先忽略它。

HelloWorld專案的主Xcode視窗畫面

提示: 在你閱讀本章時,若是你不了解原始碼的意義,這是正常的。先放輕鬆,並將重點放在你的第一個App的建構,以熟悉Xcode的開發環境以及介面建構器(Interface Builder)。之後我將會進一步做解釋,你也可以在下一章學習到Hello World App是如何運作的。

熟悉Xcode工作區

在開始要為你的App寫程式碼之前,讓我們花幾分鐘快速看一下Xcode的工作環境。左邊區塊的操作面板,是「專案導覽器(Project Navigator)」,你可以在這個區塊找到你所有的檔案。工作區中間區塊就是「編輯區(Edit Area)」,你可以在這個區塊進行一些編輯(像是編輯專案設定、原始碼檔案、使用者介面等等)。依照檔案型式的不同,Xcode會顯示不同的介面。舉例來說,在專案導覽器選取ViewController.swift,Xcode會在中間區塊顯示程式原始碼(如下圖一所示),假使選取了用來儲存使用者介面的Main.storyboard,Xcode則顯示了Storyboard視覺編輯器(如下圖二所示)。

Xcode工作區與原始碼編輯器

Xcode工作區與Storyboard編輯器

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

顯示/隱藏工作區的內容區塊

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

第一次執行你的App

至目前為止,我們還沒寫一行程式碼,即使這樣,你可利用內建的模擬器(Simulator)來執行你的App,這可以讓你了解如何在Xcode建立與測試App。在Xcode工具列,你可以見到「執行(Run)」按鈕,當你按下「Run」按鈕,Xcode會自動建立App並且在所選定的模擬器上運行。模擬器預設為iPhone 6。假如你點選了iPhone 6按鈕,此時你會看到可選用的模擬器清單,如iPhone 4s與iPhone 6 Plus,由於我們要建立的是iPhone App,因此選擇iPhone 6作為模擬器。

Xcode上的執行與停止按鈕

選取後,你就可以按下「Run」按鈕來載入你的App至模擬器上。下圖顯示了iPhone 6的模擬器畫面。

模擬器畫面

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

訣竅: 在非Retina螢幕的Mac,模擬器可能無法顯示全螢幕視窗。你可以選取模擬器,並按下CMD+2或者CMD+3來縮小,或者你也可以至選單,並選取「Window→Scale」來做改變。

試著選擇其他模擬器來執行App(例如:iPhone 5),只要操作一會兒,你將會逐漸熟悉Xcode開發環境。

使用Storyboard來設計使用者介面

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

介面建構編輯器

介面建構編輯器(Interface Builder editor)提供一個視覺化的方式讓開發者來建立與設計App的UI。你不只可以使用它來設計個別的視圖,介面建構器的Storyboard可以讓你佈局多個視圖,並使用不同的轉場(transition)方式來建立完整的使用者介面。

以上都不需要撰寫一行程式碼即可辦到。因為我們選取了「Single View Application」模板,Storyboard已經包括了視圖控制器場景(scene)。Storyboard內的場景代表了一個視圖控制器與其視圖。在開發iOS App時,視圖是建構你的使用者介面的基本區塊。每一種視圖的型態有它自己的功能。舉例來說,在Storyboard中你所看到的視圖是一個容器視圖(container view),用來存放其他視圖,如按鈕、標籤與圖像視圖等。

視圖控制器是設計作為管理其相關視圖與子視圖(Subview),例如:按鈕與標籤。如果你對視圖與視圖控制器間的關係仍然感到疑惑的話,不用擔心,我們將在之後的章節討論視圖與視圖控制器間的運作方式。此刻,我們先專注學習如何使用介面建構器來做UI的佈局。

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

關閉尺寸類別(Size Classes)

若是你有Xcode 5的開發經驗,你可能會想知道為何Xcode 6/Xcode 7視圖控制器的尺寸不同於舊版本,現在的視圖控制器較大,不像一支iPhone的尺寸,而像是一個通用的畫面(canvas),為什麼呢?這是因為尺寸類別(Size Classes)的導入。

尺寸類別是在iOS 8所導入的類別之一,藉由尺寸類別的使用,讓開發者使用統一的Storyboard來建立App UI,同時可以妥善支援iPhone與iPad。在此之前,當你想建立一個可以同時適用iPad與iPhone的通用App(universal App),你必須要建立兩套不同的Storyboard,每一種分別對應不同的裝置。

關閉尺寸類別

本章先不使用尺寸類別,為了簡單起見,我們會先關掉你第一個專案的尺寸類別。請到檔案檢閱器(File Inspector),在Interface Builder Document區塊下,將「Use Size Classes」選項取消勾選,若是檔案檢閱器隱藏起來,你可以選擇「View -> Utilities -> Show File Inspector」來打開它。

當你關掉了尺寸類別時,Xcode便會提示你要選取一個目標裝置。針對我們的專案,請選取iPhone並點選「Disable Size Classes」來確認(如上圖所示)。現在視圖控制器看起來更像一隻iPhone了(如下圖所示)。

關掉尺寸類別的視圖控制器

編者註:我們將在Swift新手系列之三探討Auto Layout,到時會再討論尺寸類別(Size Classes),並建立一個適合任何屏幕尺寸的App。

在視圖上加上Hello World按鈕

接下來,我們將加上Hello World按鈕至視圖中。在右下方的工具區塊中,會列出元件庫(Object Library)。你可以選擇任何一個UI控制器,拖放到這個視圖上。如果你沒看到這個元件庫,只要點選「Show the Object Library」按鈕即可。

你可以使用「切換」按鈕在列表視圖(List View)及圖標視圖(Icon View)間做切換,當你想學習更多有關元件庫中特定物件的功能,只要點選它,Xcode就會列出這些控制元件的簡短介紹。

好的,是時候把按鈕加到視圖中了,你只要從元件庫拖拉一個Button元件至視圖中即可(如下圖所示)。

拖曳按鈕至視圖中

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

下一步,我們則重新命名這個按鈕,並且編輯按鈕上的標籤,如下圖所示,按滑鼠左鍵兩下,把它命名為「Hello World」。

重新命名按鈕

很棒!你現在可以準備測試你的App了,在模擬器上選取iPhone 5/5s作為模擬器,並按下「Run」按鈕來執行這個專案,你會見到模擬器上有一個Hello World按鈕,如下圖所示。很酷,對吧?不過,當你按下按鈕後,卻沒有任何反應。我們需要加上幾行程式碼來顯示「Hello World」訊息。

Hello World App加上一個按鈕

提示: 這是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類別內:

提示: 我鼓勵你自己輸入程式碼,而不是只是複製貼上而已。

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

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

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

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

針對這個範例,此問題可以更具體的敘述為:「我們該如何將Storyboard中的HelloWorld按鈕與ViewController 類別中showMessage()方法連結起來呢?」

你需要在「Hello World」按鈕與你剛建立的showMessage()方法間建立連結,這樣可以在某人按下「Hello World」按鈕時產生相對的反應。選擇Main.storyboard,切換回介面建構器。

按下鍵盤上的control鍵不放,點選「Hello World」按鈕,並拖曳至View Controller圖標。

將按鈕(滑鼠加鍵盤)放開,此時會彈出一個視窗,在Sent Events區塊下方會出現一個「show Message」的選項(如下圖所示)。選擇它,以將按鈕與showMessage動作做連結。

拖曳視圖控制器圖標(左),按鈕釋放後出現彈出式選單(右)

測試你的Hello World App

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

Hello World App

變更按鈕顏色

在本章結束之前,有件事想和你討論,如同前述,你不需要撰寫程式碼就可以自訂UI 控制(UI Control)。因此,想變更一個按鈕的屬性(例如:顏色)是一件多麼容易的事。選取「Hello World」按鈕,然後在工具區下點選屬性檢閱器(Attributes Inspector),你將可以存取按鈕的屬性。在這裡,你可以變更文字顏色(在Button區塊下)為白色,以及背景(往下滾動你會在View區塊找到它)為紅色,或者你也可以輸入你想呈現的顏色。

變更Hello World按鈕的顏色

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

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

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

下一篇,我們將討論更多有關Hello World App的細節,並解釋這一切是如何運作的。

本文摘自《iOS 9 App程式設計實力超進化實戰攻略》一書,博碩授權轉載。如果你想更深入學習Swift程式設計,可到這裡瞭解此書內容。
譯者簡介:王豪勳 -渥合數位服務創辦人,畢業於台灣大學應用力學研究所,曾在半導體產業服務多年,近年來專注於協助客戶進行App軟體以及網站開發,平常致力於研究各式最軟硬體技術,擁有多本譯作。

軟件工程師,AppCoda 創辦人。著有《iOS 10 App 程式設計實力超進化實戰攻略》、《iOS 9 App 程式設計實力超進化實戰攻略》、《養成iOS 8 App程式設計實力的25堂課》,以及《iOS 8 App程式設計進階實力的30項關鍵技巧》。曾任職於HSBC, FedEx等公司,專責軟體開發、系統設計。2012年創立AppCoda技術部落格,定期發表iOS程式教學文章。現時專注發展AppCoda,致力於iOS程式教學,產品設計及開發。

blog comments powered by Disqus
訂閲電子報

訂閲電子報

AppCoda致力於發佈優質iOS程式教學,你不必每天上站,輸入你的電子郵件地址訂閱網站的最新教學文章。每當有新文章發佈,我們會使用電子郵件通知你。

已收你的指示。請你檢查你的電郵,我們已寄出一封認證信,點擊信中鏈結才算完成訂閱。

Shares
Share This