8

2-1

Xcode初體驗 先備知識：無

Xcode 是蘋果公司開發的專門用來設計 Apple 程式的整合開發環境

（Integrated Development Environment，簡稱 IDE）。由於 Xcode 只能在

Mac 作業系統上執行，因此想要使用 Xcode 來撰寫 iOS App，就必須先有一

台能執行 Mac作業系統的電腦，然後記得到開發者網站註冊成開發者。

步驟與說明

Xcode 畫面分為幾個部分，最左邊為檔案管理，中間部分為程式碼編輯器或是設計 App 畫面的地方，右側上半部為一些特定功能的面板，例如可以用來設定視覺化元件的屬性值。

9

開發環境與上架

02

03

10

04

05

06

07

01

08

09

11

右上角的「+」會出現元件庫，讓程式設計師用拖放的方式將所需要的

元件拖放到畫面上。

開發 App 時，使用大一點的螢幕來操作 Xcode 是比較適宜的，然而對於螢幕較小的筆記型電腦，Xcode 也提供了一些選項，讓開發人員可以關

閉某些暫時不用的部分。Xcode 最右上角的幾個按鈕可以開啟或隱藏某些

區域，讓筆記型電腦上的操作也能夠

適宜。

測 試 寫 好 的 App ， 可 以 使 用Xcode 內建的模擬器或是直接在實體裝置上執行。在 Xcode 左上角選擇App 的發佈對象是模擬器或是真正的實體裝置後按下 Run 按鈕，就可以執行了。

在 Xcode 中可以設定中斷點來進行程式碼除錯。中斷點的設定就是在程式碼左邊滑鼠點一下即可。程式中斷後，Xcode 下方會開啟與單步追蹤有關的按鈕，並且開啟除錯視窗，除了顯示目前變數的內容外，程式中也

可以透過 print()函數顯示除錯訊息。最後，在中斷點上按滑鼠右鍵可以刪除此中斷點。

10

2-2

實機執行 先備知識：無

現在要將寫好的 App 放到 iPhone 或是 iPad 上測試與執行非常容易（以前好

難），現在 Xcode已經幫我們處理好所有繁瑣程序。

步驟與說明

將 iPhone或 iPad透過有線方式與電腦連結。

在 Xcode選單「Preferences」中輸入開發者帳號。

11

開發環境與上架

02

03

10

04

05

06

07

01

08

09

11

在第一個專案的 Signing & Capabilities頁面的 Team選項選擇開發者，然後在下方的 Register Device按鈕按一下，讓連結到 Xcode的實機註冊到開發者帳號中。

現在已經可以將 App 發佈到實機上執行。之後若要透過無線的方式發佈到手機，點選 Xcode選單 Window再點選 Devices and Simulators，勾選Connect via Network即可透過無線網路發佈到實機上了。

52

chapter

Storyboard

Storyboard 是開發 iOS 程式很重要的一項工具，它的功能主要是用來

幫助程式設計師用視覺化的方式設計畫面以及畫面間該如何切換。Xcode

內建了很多視覺化元件，我們只要從元件庫中將想要使用的元件拖放到

storyboard 中預設的 View Controller 上，並且以視覺化的方式來決定它們

的位置與大小即可，這些過程完全不需要寫程式。因此，若我們能充分利

用 storyboard，不但可以節省大量的畫面安排時間，也節省了大量繁瑣的

程式碼。

Storyboard 翻譯成中文可以叫做「故事板」，電影製作中常聽到的

「分鏡腳本」也是這個字，這表示 storyboard另外一項重要的功能，就是決

定畫面與畫面間該如何切換。例如一個 App 有好幾個畫面，而第一個畫面

上又有很多按鈕分別用來切換到別的畫面去，在 storyboard 上，我們可以

53

Storyboard

02

03

10

04

05

06

07

01

08

09

11

不需要撰寫任何程式碼，就能做到按鈕按下去後切換到指定的畫面。

Storyboard 讓畫面切換這件事變的極其簡單。Xcode 在專案中會預設兩個

storyboard ， 一 個 為 Main.storyboard ， 另 一 個 稱 為 LaunchScreen.

storyboard。Main.storyboard 提供 App 畫面以及畫面切換，LaunchScreen.

storyboard 則是在 App 一開始載入時會出現的「歡迎」畫面。我們無法透

過程式碼來操作 LaunchScreen.storyboard 中的 view controller。除非特別

聲明，否則在本書中所稱的 storyboard，都指 Main.storyboard。

54

Storyboard 雖然可以幫我們少寫很多程式碼，但有些狀況非得要寫程

式碼不能運作，例如某個按鈕按下去後要在 Label 元件上顯示「Hello

World」字串，此時我們要做三件事情：（一）攔截按鈕的「按下去」事

件；（二）替 Label 取個唯一的名字；（三）按鈕按下去後將特定字串顯

示在指定名字的 Label上。以上三點都需要寫程式，因此，storyboard另外

一項重要的工作，就是協助程式設計師將視覺化元件與程式碼做連結。連

結的目的有二：（一）攔截元件所發出的各種事件，例如手指點一下、手

指移過去或是使用者打字；（二）替元件命名。命名這一點很重要，一開

始拖放到 view controller 上的元件是沒有名字的，如果我們想要透過程式

碼來改變這個元件的屬性時，例如顏色、位置或大小…等，都必須先為這

個元件取個名字。當然還有別的不用命名就可以操作元件的方式，但命名

是最簡單的方式。

命名的方式有好幾種，最簡單的方式就是用滑鼠拉藍線，然後輸入適

當的名字就完成了，Xcode會自動幫我們在該元件所對應的 view controller

中加上程式碼。我們所輸入的名字，會轉成一個特殊類型的屬性，稱為

IBOutlet 屬性，其中 IB 代表 Interface Builder 的縮寫。並不是每一個視覺

化元件都需要給個名字，只有需要透過程式碼來操作的元件才需要，換句

話說，如果該視覺化元件只是用來點綴畫面，就不需要命名了。除了

IBOutlet 之外，如果我們要攔截視覺化元件所發出的事件（event），那麼

就需要實作一個函數，然後將這個函數與元件發出的事件連結即可，之後

只要這個元件發出了特定的事件，對應的函數就會被呼叫。這種與某個事

件連結的函數，我們稱為 IBAction函數（或稱 IBAction方法）。

視圖控制器與視窗不一樣。同一個 App 其畫面間的切換其實是換視圖

控制器並不是換視窗，因此，一個 App 通常只會有一個視窗（類別為

UIWindow）。這個視窗上會有一個視圖控制器，例如 View Controller

（放在 UIWindow 的 rootViewController 屬性中）。視圖控制器上可以放置

不同的視圖，也就是視覺化元件，這些視覺化元件可以再放置其他的視覺

化元件，例如標籤元件裡面可以放圖片元件，如此形成一個階層結構。

App 就透過這些視覺化元件跟使用者互動，包括切換視圖控制器或是播放

55

Storyboard

02

03

10

04

05

06

07

01

08

09

11

影片等。只有在特別情況下，一個 App 才會擁有兩個以上的視窗，例如

keynote簡報 App，投影片在行動裝置上跟投影機上會呈現出不同的畫面，

這時這個 App就具備了兩個不同的視窗。

在 storyboard 上看到的視圖控制器，其實也是一個視覺化元件，想要

在執行時操作放在視圖控制器上的各種元件，例如改變標籤的背景顏色、

按鈕上顯示的文字、或是改變大小移動位置…等，還是要靠程式碼。因

此，在 storyboard 上的每一個視圖控制器都必須與某個對應的類別互相連

結，這個對應的類別稱為 UIViewController，看名字就知道是專門用來控

制視圖的。當我們在 Xcode 中建立一個 Single View App 專案時，Xcode

會自動產生 ViewController.swift，該檔案中所定義的 ViewController 類別

已經跟 storyboard上預設的 View Controller元件做連結，因此在 Xcode中

開啟 Assistant editor 模式（輔助編輯模式）後（畫面會分割成左右兩半，

左邊為 storyboard，右邊為 storyboard中選到的 view controller元件所對應

的程式碼），右邊所看到的程式碼應該是 ViewController.swift。當我們在

storyboard 上新增加一個 View Controller 時，接下來就必須在專案中也新

增一個繼承於 UIViewController 類別的自訂類別，然後將這個類別與

storyboard 上新增加的 View Controller 對應，這樣之後我們才能透過程式

碼來控制上面的各種視覺化元件。所以如果沒有建立 ViewController 類別

或是建立後卻忘記對應，那這個視圖控制器相當於是個視覺裝飾品，要操

作放在上面的視覺化元件變得非常麻煩。

56

4-1

我的第一個 App - Hello World 先備知識：無

撰寫 Hello World 幾乎已經是程式設計師的一個不成文默契，學一種新的語言

往往都先從印出 Hello World開始，因此，第一個 App就先示範如何設計出一

個簡單的 Hello World。

步驟與說明

開啟 Xcode後選擇建立一個 Single View App專案。

57

Storyboard

02

03

10

04

05

06

07

01

08

09

11

輸入專案資訊。

專案建立好後，在專案的 General 面板上可以設定這個 App 的使用環境，例如 iPhone 或是 iPad，以及設定裝置拿橫的時 App 畫面是否跟著轉向。

補充說明 Product Name 代 表 專 案 的 名 稱 ， 在 這 個 位 置 請 輸 入HelloWorld；Organization Name 輸入組織或是個人名稱，也可以不輸入；Organization Identifier 輸入可以代表公司的識別字串，習慣上會將公司的網域名稱反過來，例如 books.ckk。

58

在左邊的 Navigator面板中點選 Main.storyboard，然後從右下角的元件庫中拖放一個 Label元件與一個 Button元件到 View Controller上。Label元件的寬度調寬一點，並且請先盡量靠左上角放置或設定這兩個元件的

constraint（下一章會詳細介紹）。

將 Xcode畫面切換成輔助編輯模式（Assistant Editor），在 storyboard右上角點選「 」圖示後選 Assistant 選項，或者熱鍵為 control+option +command+enter。

59

Storyboard

02

03

10

04

05

06

07

01

08

09

11

為 Label 元件設定一個 IBOutlet 屬性，詳細操作方式請參考本章第 2節。 @IBOutlet weak var label: UILabel!

為 Button 元件實作一個 IBAction 函數，詳細操作方式請參考本章第 3節。 @IBAction func onClick(_ sender: Any) {

}

在 onClick(_:)函數中改變 Label 元件所顯示的字串。其中 label.text 的label就是第 6步中我們為 Label元件取的 IBOutlet屬性名稱。 @IBAction func onClick(_ sender: Any) {

label.text = "hello world"

}

執行看看。

補充說明 在 Button 元件上使用滑鼠右鍵拖出藍線到右方程式碼區的 class之後任何地方，但不可在另外一個函數內，放開滑鼠右鍵會跳出一個小

視窗，其中最上方的 Connection 選項要改為 Action，然後 Name 的位置輸入 onClick，最後按下 Connect按鈕。

補充說明 在 Label 元件上使用滑鼠右鍵拖出藍線到右方程式碼區的 class 與viewDidLoad()之間，放開滑鼠右鍵後輸入 label，然後按下 Connect按鈕。

588

chapter

SwiftUI

Apple 在 iOS 13 提出了一個全新的框架 – SwiftUI。Apple 打算透過這

個新框架讓開發者可以統一 iOS、iPadOS、macOS、watchOS 與 tvOS 這五

個平台的界面設計方式，讓開發過程可以專注在各平台獨有的功能上。雖

然目前開發程序似乎尚未成熟，大家也都還在摸索這個新的框架能夠帶來

什麼不同於以往的開發體驗，但相信未來這個新框架應該會取代原有的

UIKit 框架，讓整個 App 架構更簡潔漂亮。

SwiftUI 使用了「聲明式」語法以及 Swift 5 的新特性，然後，伴隨我

們很久的 Storyboard 不見啦，但我們有一個更好的介面預覽工具。不多

說，欲使用 SwiftUI 開發專案，必須先將作業系統升級到 Catalina，然後就

可以開始動手試試看了。

589

Sw

iftUI

24

25

C

26

27

28

29

23

A

B

D

28-1

建立列表 先備知識：7-1使用表格元件

列表（List 元件）會在畫面上呈現表格的排版效果，請讀者參考本書「表格」

一章。List的內容排版方式若是簡單的話直接由 Text元件來顯示文字，複雜的

排版需求則交由 VStack或是 HStack進行。

步驟與說明

建立 Single View App 專案，並在 User Interface 的位置選擇「SwiftUI」。

確定目前的畫面狀態是在「Editor and Canvas」狀態。

590

補充說明 產生 List 的除了用這種操作方式外，也可以點選 Xcode 右上角的「+」，然後選擇 List元件或是直接輸入程式碼。

在 ContentView.swift 中可以看到 Xcode 已經幫我們產生了一段Text("Hello World")程式碼。在其中的 Text 上使用 command + Click開啟popover視窗，然後選擇 Embed in List。

程式碼變成如下。 var body: some View {

List(0 ..< 5) { item in

Text("Hello World")

}

}

為了方便起見，在 ContentView.swift 中建立兩個 struct，名稱為 City與 Metropolis。City 必須符合 Identifiable 這個協定的規範，然後實作常數id 初始化值由 UUID()函數傳回，以確保每一個 City 的 id 值唯一。這個目的是為了讓之後的 List結構可以直接使用。 struct City: Identifiable {

let id = UUID()

var name: String

}

struct Metropolis {

let municipality = [

City(name: "台北"),

City(name: "新北"),

591

Sw

iftUI

24

25

C

26

27

28

29

23

A

B

D

City(name: "桃園"),

City(name: "台中"),

City(name: "台南"),

City(name: "高雄"),

]

}

修改 ContentView的內容。 struct ContentView : View {

let met = Metropolis()

var body: some View {

List(met.municipality) { city in

Text(city.name)

}

}

}

按下由上方的「Resume」或是 option + command + P或是直接執行看看結果。

592

28-2

加上小圖示 先備知識：ch28-1建立列表

在 SwiftUI 中要顯示圖片需使用 Image 元件。在這個單元中，我們將瞭解如何

讓圖片縮小、裁切成圓形並且放在 List中每一列的最左邊。

步驟與說明

根據先備知識，將六個城市的圖示拖放至 Assets.xcassets 資源檔中，為方便起見，建議名稱命名與城市名稱一樣，例如台北.jpg、新北.jpg。

開啟 ContentView.swift，修改 body 中的程式碼如下。其中 HStack 相當於建立水平方向的 Stack View，裡面包含三樣元素。從左邊算來依序是大小為 50 x 50 大小的 Image，並且裁切成圓形；中間為寬度 20的空白區域；最右邊則是原本的城市名稱，但字體大小調為 title 樣式，這個樣式會比預設的字體大一點。 var body: some View {

List(met.municipality) { city in

HStack {

Image(city.name)

.frame(width: 50, height: 50)

.clipShape(Circle())

Spacer()

.frame(width: 20.0)

Text(city.name)

.font(.title)

}

}

}

執行看看。

593

Sw

iftUI

24

25

C

26

27

28

29

23

A

B

D

28-3

導覽列與頁面切換 先備知識：ch28-1建立列表

NavigationView 元件提供了畫面最上方的導覽列，讓使用者切換畫面後可以很

容易的回到上一頁。本單元除了瞭解如何切換頁面外，切換時如何將資料從上

一頁傳遞過來也是一項重要的技術。如果讀者對 UIKit中使用 Segue傳遞資料

的方式熟悉的話，在 SwiftUI 要傳遞資料則是在建立下一個畫面實體變數時，

將要傳過去的資料當參數傳進去即可，這絕對是一個嶄新的體驗。

步驟與說明

根據先備知識開啟專案。

在專案中新增一個類型為 SwiftUI View的檔案，命名為 CityDetail.swift。

開啟 CityDetail.swift，增加一個型態為 City 的屬性（此屬性定義在ContentView.swift，請參考先備知識），並修改 body中預設的 Text內容。 struct CityDetail : View {

var city: City

var body: some View {

Text(city.name)

.font(.largeTitle)

}

}

因上一步中在 CityDetail 中新增了一個屬性，因此需修改 previews 內容。 #if DEBUG

struct CityDetail_Previews : PreviewProvider {

static var previews: some View {

CityDetail(city: City(name: "測試"))

}

}

#endif

開啟 ContentView.swift，使用 NavigationView 元件套用在 List 元件上，並且在 List 與 HStack 之間插入 NavigationButton 元件。然後使用navigationBarTitle為導覽列加上標題。

594

var body: some View {

NavigationView {

List(met.municipality) { city in

NavigationButton(destination: CityDetail(city: city)) {

HStack {

Image(city.name)

.frame(width: 50, height: 50)

.clipShape(Circle())

Spacer()

.frame(width: 20.0)

Text(city.name)

.font(.title)

}

}

}

.navigationBarTitle(Text("漫漫城市"))

}

}

執行看看。

補充說明 上述程式碼中的 NavigationButton(destination:)是當使用者點選List 中的某一列時，呈現的畫面會轉換到所指定的 View，並且把需要的資料傳送過去。

597

Sw

iftUI

24

25

C

26

27

28

29

23

A

B

D

28-5

導覽列按鈕 先備知識：ch28-3導覽列與頁面切換

我們在前面的單元介紹過導覽列，在這個單元中將介紹如何在導覽列上放置按

鈕，該按鈕會動態的改變 List元件顯示的內容。這個單元會以語系切換例子來

說明如何透過導覽列上的按鈕來改變畫面內容。

步驟與說明

建立 Single View App專案並選擇 SwiftUI。

新增一個 SwiftUI View檔案，命名為 LocaleToggleView.swift。

開啟 LocaleToggleView.swift，宣告一個 showTW的布林變數，並且加上@Binding 修飾子。加上@Binding 修飾子的變數不需要初始化，並且可以連結具有@State修飾子的變數。 struct LocaleToggleView : View {

@Binding var showTW: Bool

修改 body 內容，加上一個 Button 按鈕，並且根據 showTW 變數值來決定按鈕上顯示的字串。 var body: some View {

Button(action: {

self.showTW.toggle()

}) {

Text(self.showTW ? "Eng": "中文")

}

}

修改 DEBUG區段中的 previews。 static var previews: some View {

LocaleToggleView(showTW: .constant(true))

}

開啟 ContentView.swift，宣告兩個陣列，一個為中文語系另一個為英文語系，並且使用 List元件先將中文陣列內容顯示出來。

598

struct ContentView : View {

let tw = ["台北", "台中", "高雄"]

let en = ["Taipei", "Taichung", "Kaohsiung"]

var body: some View {

List(0..<tw.count) {index in

Text(self.tw[index])

}

}

}

宣告一個 showTW 變數，並且加上@State 修飾子，該變數用來記錄目前語系是否為中文語系。 @State var showTW = true

將 List 元件加上導覽列 NavigationView，並且在導覽列右方加上一個按鈕，該按鈕內容由 LocaleToggleView.swift負責。 var body: some View {

NavigationView {

List(0..<tw.count) {index in

if self.showTW {

Text(self.tw[index])

} else {

Text(self.en[index])

}

}

.navigationBarTitle(Text(showTW ? "城市": "Cities"))

.navigationBarItems(trailing: LocaleToggleView(showTW: $showTW))

}

}

執行看看。

599

Sw

iftUI

24

25

C

26

27

28

29

23

A

B

D

28-6

按鈕、輸入與顯示 先備知識：無

這個單元談 Button、Label 與 TextField 的基本使用方式。我們很簡單的讓使

用者在 TextField 中隨意輸入字串，按下按鈕後將這個字串反置後顯示到

Label上。

步驟與說明

建立 Single View App專案並選擇 SwiftUI。

開啟 ContentView.swift，宣告兩個變數：input 用來儲存 TextField 元件的內容，text則是用來儲存輸出所需要的內容。 struct ContentView : View {

@State var input = ""

@State var text = ""

在 body中加入 TextField、Button與 Text元件。 var body: some View {

VStack {

TextField($input, placeholder: Text("隨意打些字"))

Button(action: {

self.text = String(self.input.reversed())

}, label: {

Text("按我吧")

})

Text(text)

Spacer()

}

}

執行看看。