SwiftUI 自學成長筆記

劉銘

資深iOS開發工程師，從事軟件開發工作近15年，精通Objective-C和Swift技術，
以及蘋果開發相關的各項技術，有豐富的實戰經驗。
早年從事PHP和Flash/Flex應用開發，有超過7年的Web應用開發經驗。
活躍於CocoaChina和CSDN等專業社區，發表了大量技術文章，有一定的影響力。
寫作經驗豐富，前後共出版iOS應用程序開發相關書籍5部。

目錄

第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