坦白地說,在蘋果公司 2017 年和 2018 年的全球開發者大會(WWDC)上,我并沒有看到任何驚喜,每次的 WWDC 似乎只是對前一個版本的 Swift 語言進行程式化的升級。但是在 2019年的 WWDC 上,蘋果公司發布了基于 Swift 語言建立的聲明式框架SwiftUI,它可以用于iOS、iPadOS、watchOS、tvOS 和 macOS 等蘋果公司旗下所有主流平臺的應用程序開發。毫無疑問,對于具有 iOS 開發經驗或學習 iOS 應用程序開發的人來說,SwiftUI 是近年來 iOS 應用程序開發中為重大的改變。我從事 iOS 程序開發和相關的教學工作已有十多年的時間,已經習慣使用 UIKit 框架搭建用戶界面。通過混合使用故事板(Storyboard)和 Swift 代碼來構建用戶界面,曾經是非常流行和普遍的布局方式。但是,無論你是喜歡使用 Interface Builder 在故事板中以可視化的方式創建用戶界面,還是喜歡完全使用 Swift 代碼創建用戶界面,它們終都會依賴 UIKit 框架實現?赡苣銜羞@樣一個疑慮:我為什么非要使用 SwiftUI 框架而拋棄之前的 UIKit 框架來搭建用戶界面呢?原因有以下三點。
1.新技術必須掌握
SwiftUI 是蘋果公司于 2019 年推出的界面布局框架,目的就是取代之前的 UIKit 框架,從而實現更高效的界面搭建,以適應現在及將來可能推出的更多規格和型號的蘋果產品。誠然,SwiftUI 目前依然有很多不足之處,如果你是使用 UIKit 框架的高手,那么利用SwiftUI 搭建界面的確需要花費更多的學習成本。但這就和從 Objective-C 過渡到 Swift 一樣,需要一個過程,一旦走過去,你就會發現前方的路異常平坦,且風景如畫。
SwiftUI 類似于 MVVM 架構,它比之前應用程序開發的 MVC 架構更先進,更便于代碼的SwiftUI 自學成長筆記 IV 維護,設計思路更清晰。
3.執行效率高,更新迭代快
其實,在 iOS 開發的過程中,耗費時間的并不是代碼邏輯,而是對用戶界面的處理。SwiftUI 框架可以給你更快速的迭代和測試體驗,幫你更快捷地實現你想要的功能。對于我來說,SwiftUI 不僅是一個全新的框架,而且從根本上改變了在 iOS 或其他蘋果系統平臺上創建用戶界面的方法。蘋果系統不再使用命令式的編程風格,而是提倡使用聲明式、函數式的編程風格;不是確切指定用戶界面控件的布局和功能,而是專注于描述在構建用戶界面時需要哪些控件,以及通過聲明式編程指明需要執行哪些操作。2020 年,蘋果公司將更多的功能和用戶界面控件添加到了 Xcode 12 的 SwiftUI 框架中,并將設計提升到了一個更高的水準。與之前的 UIKit 相比,我們可以使用更少的代碼來開發精美的動畫效果。利用 SwiftUI 設計用戶界面并不是要求你馬上放棄使用 Interface Builder 和 UIKit 框架,但是,SwiftUI 代表了蘋果系統各個平臺上應用程序開發的未來。為了能夠始終站在技術創新的前沿,推薦你從現在開始使用這種新的界面開發方式。
希望本書能夠幫助你使用 SwiftUI 框架開發并構建一些令人驚嘆的應用程序。
本書共 8 章。第 1 章帶領讀者制作一個簡單的卡片應用程序,了解利用 SwiftUI 實現界面布局的基礎知識。第 2 章利用結合北京的地域特色,使用 Tab View 和滾動視圖制作一個介紹北京美食和胡同的應用程序。第 3 章制作的蔬菜百科全書應用程序涉及導航視圖、自定義按鈕外觀和使用微動畫效果提升用戶體驗。第 4 章將帶領讀者制作一個介紹中國十大名勝古跡的應用程序,其中會使用到 MapKit 框架呈現地圖。第 5 章通過購物應用程序愛上寫字介紹如何在程序中利用網格視圖進行布局并創建自定義形狀。第 6 章帶領讀者制作奇妙水果機游戲程序,了解游戲設計的基本原理,并使用 User Defaults 將游戲數據存儲到本地。第 7 章會制作一款 Todo 類應用程序,介紹如何使用 Core Data 將數據存儲到數據庫之中,并由用戶自定義應用程序的主題顏色。第 8 章通過制作卡片選擇應用程序,讓讀者了解如何在 SwiftUI 中實現滑動手勢。
致謝
感謝偉大到可以改變這個世界的史蒂夫·喬布斯,他的精神對我產生了非常大的影響。感謝劉穎、劉懷羽、張燕,以及我身邊的同事們,感謝你們對我的支持與幫助,并時時刻刻給我信心和力量。
謹以此書獻給我親愛的家人,以及眾多熱愛 iOS 開發的朋友們!
劉銘
2021 年 7 月
目錄
第1章 我的個iOS應用程序 1
1.1 使用Xcode快速創建項目 1
1.1.1 為項目添加程序圖標和相關圖片素材 3
1.1.2 為項目添加預定義顏色 5
1.1.3 為項目添加圖片素材 7
1.2 創建啟動畫面 9
1.3 創建卡片視圖布局 10
1.3.1 創建CardView 10
1.3.2 創建線性漸變色背景 14
1.3.3 為CardView添加圖像和文本 15
1.3.4 為CardView添加按鈕 17
1.4 循環生成多張卡片視圖 21
1.5 為卡片創建數據模型 22
1.5.1 創建卡片數據模型 23
1.5.2 為靜態數據創建數組 24
1.5.3 在卡片中顯示數據信息 24
1.6 在應用程序中播放聲音 28
1.7 創建動畫效果 29
1.7.1 為卡片人物創建淡入動畫 29
1.7.2 為標題創建下滑入動畫效果 31
1.7.3 為按鈕創建上滑入動畫效果 31
1.8 為應用程序添加觸控反饋效果 33
1.9 呈現警告對話框 34
1.10 為應用程序創建iMessage貼圖 36
第2章 這里是北京 40
2.1 使用Xcode創建項目 40
2.1.1 為項目添加程序圖標和相關圖片素材 41
2.1.2 為項目添加適配顏色集和圖像集 42
2.2 創建支持淺色和深色模式的啟動畫面 46
2.2.1 創建Launch Screen故事板 46
2.2.2 設計Launch Screen用戶界面 48
2.2.3 在項目中設置啟動畫面 51
2.3 創建Tab View導航 52
2.3.1 創建4個場景視圖 53
2.3.2 創建Tab View 54
2.4 創建北京簡介視圖 55
2.4.1 創建簡介視圖 55
2.4.2 為簡介視圖添加動畫效果 58
2.5 創建小吃視圖頁面 59
2.5.1 設計橫幅視圖布局 59
2.5.2 創建橫幅滾動視圖 62
2.5.3 獲取HeaderView所需的靜態數據 63
2.5.4 創建靈活的表格式布局 65
2.5.5 創建橫幅滾動視圖 71
2.5.6 創建特色小吃店卡片視圖 75
2.5.7 創建小吃店詳細頁面視圖 82
2.5.8 使用Sheet修飾器呈現新的視圖 87
2.6 創建胡同視圖頁面 89
2.7 使用SwiftUI設計表單 95
第3章 蔬菜百科全書 100
3.1 使用Xcode快速創建項目 100
3.1.1 設置iOS設備的屏幕允許方向 101
3.1.2 為項目添加程序圖標和蔬菜圖片 102
3.1.3 為項目添加顏色集 104
3.1.4 在模擬器中查看效果 106
3.2 利用Page Tab View創建引導畫面 106
3.2.1 整理項目文件的結構 107
3.2.2 創建可復用的蔬菜卡片視圖 107
3.2.3 創建自定義外觀按鈕 111
3.2.4 為蔬菜卡片增加動畫效果 113
3.2.5 創建蔬菜卡片分頁視圖 114
3.3 創建數據模型和獲取數據 116
3.3.1 創建數據模型 116
3.3.2 創建蔬菜數據 117
3.3.3 在蔬菜卡片中顯示蔬菜數據 117
3.3.4 在引導頁面中顯示蔬菜數據 119
3.4 使用AppStorage封裝器存儲數據 120
3.4.1 SwiftUI中應用程序的生存期 121
3.4.2 完成按鈕的執行代碼 124
3.5 通過循環創建列表視圖 125
3.5.1 創建行視圖 125
3.5.2 創建列表視圖 128
3.5.3 設置導航視圖的屬性 130
3.6 創建蔬菜的詳情視圖 130
3.6.1 創建視圖文件 130
3.6.2 添加導航鏈接 131
3.6.3 設計詳情頁面視圖 132
3.6.4 創建獨立的蔬菜圖片視圖 135
3.6.5 在詳情頁面中調用蔬菜圖片視圖 137
3.6.6 創建鏈接視圖 139
3.6.7 創建蔬菜分類視圖 141
3.6.8 Disclosure Group的使用 141
3.7 創建App的設置頁面 144
3.7.1 創建SettingsView 145
3.7.2 為設置視圖添加關閉功能 146
3.7.3 為列表視圖添加開啟設置頁面功能 147
3.7.4 完善設置頁面的部分功能 148
3.7.5 實現設置頁面的第三部分功能 150
3.7.6 實現設置頁面的第二部分功能 154
第4章 名勝古跡App 158
4.1 使用Xcode創建名勝古跡項目 158
4.1.1 添加圖片和視頻素材 159
4.1.2 添加JSON格式的數據文件 161
4.1.3 設置程序的啟動畫面 162
4.1.4 創建TabView 163
4.2 解析JSON格式文件并獲取相應數據 165
4.2.1 橫幅封面視圖 165
4.2.2 JSON相關知識 166
4.2.3 解析JSON數據 168
4.2.4 使用JSON數據生成封面圖片 170
4.3 利用Swift范式創建SwiftUI列表 172
4.3.1 設計瀏覽頁面列表視圖的行布局 172
4.3.2 創建數據模型 174
4.3.3 Swift的范式 174
4.3.4 實現動態數據行信息的設置 175
4.4 創建名勝古跡的詳細視圖 177
4.4.1 初步創建詳細視圖 178
4.4.2 設計橫幅圖片、標題和提要 180
4.4.3 創建可復用的Heading視圖 181
4.4.4 創建畫冊視圖 183
4.4.5 使用NavigationLink創建鏈接 185
4.4.6 創建相關信息視圖 186
4.4.7 創建地圖視圖 188
4.4.8 創建鏈接組件 192
4.5 創建視頻播放視圖 194
4.5.1 創建數據模型和行視圖 194
4.5.2 生成列表視圖 197
4.5.3 觸控反饋 200
4.5.4 創建視頻播放頁面 201
4.5.5 視頻播放頁面的附加設置 204
4.5.6 為視頻瀏覽頁面添加鏈接 206
4.6 創建帶有標注的復雜地圖 207
4.6.1 創建數據模型 207
4.6.2 創建復雜地圖 207
4.6.3 自定義標注 210
4.6.4 為視圖添加細節素材 213
4.7 創建運動動畫 216
4.8 創建照片視圖 222
4.8.1 創建基本的網格視圖 222
4.8.2 實現照片視圖的基本功能 225
4.8.3 實現照片視圖的滑動條功能 226
4.8.4 對網格視圖的改進 228
4.9 創建復雜的網格視圖布局 229
4.9.1 工具欄的設置 230
4.9.2 利用Group實現模式切換 231
4.9.3 實現網格視圖的基本功能 233
4.9.4 實現網格視圖的列數動態變換效果 235
4.10 創建iMessage擴展功能 238
4.11 將應用程序適配到iPadOS和macOS平臺 241
4.11.1 創建App的關于面板 241
4.11.2 自定義修飾器 242
4.11.3 將項目遷移到macOS平臺 244
第5章 愛上寫字 247
5.1 使用Xcode創建項目 247
5.1.1 為項目添加程序圖標和相關圖片素材 248
5.1.2 為項目添加啟動畫面 249
5.1.3 整理項目文件架構 250
5.1.4 創建FooterView 251
5.1.5 快速輸入自定義代碼塊 253
5.2 創建自定義導航欄 254
5.2.1 創建導航欄視圖 255
5.2.2 設計導航欄中的Logo視圖 256
5.2.3 為主場景視圖添加導航欄 257
5.3 創建圖像滑動視圖 260
5.3.1 創建數據模型 260
5.3.2 創建JSON解析方法 261
5.3.3 創建用于滑動的圖像視圖 261
5.3.4 將圖像滑動視圖添加到主場景視圖 263
5.4 為文具分類創建網格布局視圖 264
5.4.1 創建文具分類數據模型 264
5.4.2 創建文具分類子視圖 265
5.4.3 創建文具分類網格視圖 267
5.4.4 為網格視圖創建Header和Footer視圖 268
5.5 為商品創建網格布局視圖 270
5.5.1 創建可復用的標題組件 270
5.5.2 創建商品的數據模型 272
5.5.3 創建商品子視圖 272
5.5.4 創建商品網格視圖 274
5.6 創建品牌網格布局視圖 275
5.6.1 創建品牌的數據模型 275
5.6.2 創建品牌子視圖 276
5.6.3 創建品牌網格視圖 277
5.7 創建商品詳細頁面視圖 278
5.7.1 創建產品詳細頁面視圖 278
5.7.2 創建詳細頁面導航欄 279
5.7.3 創建Header視圖 280
5.7.4 創建詳細頁面的上半部分視圖 281
5.7.5 創建詳細頁面的商品描述視圖 283
5.7.6 創建自定義形狀 284
5.7.7 創建評星和筆尖規格視圖 287
5.7.8 創建數量和設為愛視圖 290
5.7.9 創建添加到購物車視圖 291
5.8 完成后的設置 293
5.8.1 創建Shop類 293
5.8.2 在ContentView類中添加Shop實例 294
5.8.3 實現返回按鈕的功能 295
5.8.4 完善詳細頁面視圖功能 297
5.8.5 添加觸控反饋特性 299
第6章 奇妙水果機 302
6.1 使用Xcode創建項目 302
6.1.1 為項目添加程序圖標和相關圖片素材 303
6.1.2 為項目添加啟動畫面 304
6.2 創建Header視圖 305
6.2.1 創建場景頁面代碼架構 305
6.2.2 單獨創建Logo視圖 307
6.2.3 添加重置和相關信息按鈕 308
6.2.4 創建記分牌視圖 310
6.3 創建游戲主界面 314
6.3.1 設計水果機的槽位視圖 314
6.3.2 搭建游戲主界面視圖 316
6.4 添加Footer視圖 318
6.4.1 創建Footer界面 318
6.4.2 重構Footer視圖的代碼 320
6.5 創建游戲信息視圖頁面 323
6.5.1 創建信息視圖 323
6.5.2 實現關閉信息頁面功能 327
6.6 編寫游戲邏輯代碼 329
6.6.1 實現隨機生成槽位水果的邏輯 329
6.6.2 實現判斷輸贏的邏輯 331
6.6.3 實現玩家選擇游戲分值的功能 333
6.6.4 創建游戲結束時的自定義窗口 335
6.7 利用User Defaults存儲和獲取數據 341
6.8 為游戲添加動畫效果 342
6.9 為游戲添加聲效和背景音樂 346
第7章 TODO應用程序 350
7.1 使用Xcode創建項目 350
7.1.1 創建Todo項目 350
7.1.2 創建添加待辦事項視圖頁面 353
7.2 了解Core Data特性 357
7.2.1 Core Data簡介 357
7.2.2 為項目創建實例 358
7.2.3 Core Date的工作方式 359
7.2.4 為頁面添加managedObjectContext 361
7.2.5 改善AddTodoView的用戶體驗 364
7.2.6 顯示待辦事項數據信息 365
7.2.7 刪除和更新數據記錄 367
7.3 顯示隨機視圖 369
7.3.1 創建EmptyListView頁面 369
7.3.2 為視圖添加微動畫 373
7.3.3 顯示隨機內容 374
7.4 改進表單的外觀 375
7.4.1 改進AddTodoView的外觀 375