SwiftUI自學成長筆記

目錄

第1章 我的第一個iOS應用程序\t1
1．1 使用Xcode快速創(chuàng)建項目\t1
1．1．1 為項目添加程序圖標和相關圖片素材\t3
1．1．2 為項目添加預定義顏色\t5
1．1．3 為項目添加圖片素材\t7
1．2 創(chuàng)建啟動畫面\t9
1．3 創(chuàng)建卡片視圖布局\t10
1．3．1 創(chuàng)建CardView\t10
1．3．2 創(chuàng)建線性漸變色背景\t14
1．3．3 為CardView添加圖像和文本\t15
1．3．4 為CardView添加按鈕\t17
1．4 循環(huán)生成多張卡片視圖\t21
1．5 為卡片創(chuàng)建數(shù)據(jù)模型\t22
1．5．1 創(chuàng)建卡片數(shù)據(jù)模型\t23
1．5．2 為靜態(tài)數(shù)據(jù)創(chuàng)建數(shù)組\t24
1．5．3 在卡片中顯示數(shù)據(jù)信息\t24
1．6 在應用程序中播放聲音\t28
1．7 創(chuàng)建動畫效果\t29
1．7．1 為卡片人物創(chuàng)建淡入動畫\t29
1．7．2 為標題創(chuàng)建下滑入動畫效果\t31
1．7．3 為按鈕創(chuàng)建上滑入動畫效果\t31
1．8 為應用程序添加觸控反饋效果\t33
1．9 呈現(xiàn)警告對話框\t34
1．10 為應用程序創(chuàng)建iMessage貼圖\t36
第2章 這里是北京\t40
2．1 使用Xcode創(chuàng)建項目\t40
2．1．1 為項目添加程序圖標和相關圖片素材\t41
2．1．2 為項目添加適配顏色集和圖像集\t42
2．2 創(chuàng)建支持淺色和深色模式的啟動畫面\t46
2．2．1 創(chuàng)建Launch Screen故事板\t46
2．2．2 設計Launch Screen用戶界面\t48
2．2．3 在項目中設置啟動畫面\t51
2．3 創(chuàng)建Tab View導航\t52
2．3．1 創(chuàng)建4個場景視圖\t53
2．3．2 創(chuàng)建Tab View\t54
2．4 創(chuàng)建北京簡介視圖\t55
2．4．1 創(chuàng)建簡介視圖\t55
2．4．2 為簡介視圖添加動畫效果\t58
2．5 創(chuàng)建小吃視圖頁面\t59
2．5．1 設計橫幅視圖布局\t59
2．5．2 創(chuàng)建橫幅滾動視圖\t62
2．5．3 獲取HeaderView所需的靜態(tài)數(shù)據(jù)\t63
2．5．4 創(chuàng)建靈活的表格式布局\t65
2．5．5 創(chuàng)建橫幅滾動視圖\t71
2．5．6 創(chuàng)建特色小吃店卡片視圖\t75
2．5．7 創(chuàng)建小吃店詳細頁面視圖\t82
2．5．8 使用Sheet修飾器呈現(xiàn)新的視圖\t87
2．6 創(chuàng)建胡同視圖頁面\t89
2．7 使用SwiftUI設計表單\t95
第3章 蔬菜百科全書\t100
3．1 使用Xcode快速創(chuàng)建項目\t100
3．1．1 設置iOS設備的屏幕允許方向\t101
3．1．2 為項目添加程序圖標和蔬菜圖片\t102
3．1．3 為項目添加顏色集\t104
3．1．4 在模擬器中查看效果\t106
3．2 利用Page Tab View創(chuàng)建引導畫面\t106
3．2．1 整理項目文件的結構\t107
3．2．2 創(chuàng)建可復用的蔬菜卡片視圖\t107
3．2．3 創(chuàng)建自定義外觀按鈕\t111
3．2．4 為蔬菜卡片增加動畫效果\t113
3．2．5 創(chuàng)建蔬菜卡片分頁視圖\t114
3．3 創(chuàng)建數(shù)據(jù)模型和獲取數(shù)據(jù)\t116
3．3．1 創(chuàng)建數(shù)據(jù)模型\t116
3．3．2 創(chuàng)建蔬菜數(shù)據(jù)\t117
3．3．3 在蔬菜卡片中顯示蔬菜數(shù)據(jù)\t117
3．3．4 在引導頁面中顯示蔬菜數(shù)據(jù)\t119
3．4 使用AppStorage封裝器存儲數(shù)據(jù)\t120
3．4．1 SwiftUI中應用程序的生存期\t121
3．4．2 完成按鈕的執(zhí)行代碼\t124
3．5 通過循環(huán)創(chuàng)建列表視圖\t125
3．5．1 創(chuàng)建行視圖\t125
3．5．2 創(chuàng)建列表視圖\t128
3．5．3 設置導航視圖的屬性\t130
3．6 創(chuàng)建蔬菜的詳情視圖\t130
3．6．1 創(chuàng)建視圖文件\t130
3．6．2 添加導航鏈接\t131
3．6．3 設計詳情頁面視圖\t132
3．6．4 創(chuàng)建獨立的蔬菜圖片視圖\t135
3．6．5 在詳情頁面中調用蔬菜圖片視圖\t137
3．6．6 創(chuàng)建鏈接視圖\t139
3．6．7 創(chuàng)建蔬菜分類視圖\t141
3．6．8 Disclosure Group的使用\t141
3．7 創(chuàng)建App的設置頁面\t144
3．7．1 創(chuàng)建SettingsView\t145
3．7．2 為設置視圖添加關閉功能\t146
3．7．3 為列表視圖添加開啟設置頁面功能\t147
3．7．4 完善設置頁面的第一部分功能\t148
3．7．5 實現(xiàn)設置頁面的第三部分功能\t150
3．7．6 實現(xiàn)設置頁面的第二部分功能\t154
第4章 名勝古跡App\t158
4．1 使用Xcode創(chuàng)建名勝古跡項目\t158
4．1．1 添加圖片和視頻素材\t159
4．1．2 添加JSON格式的數(shù)據(jù)文件\t161
4．1．3 設置程序的啟動畫面\t162
4．1．4 創(chuàng)建TabView\t163
4．2 解析JSON格式文件并獲取相應數(shù)據(jù)\t165
4．2．1 橫幅封面視圖\t165
4．2．2 JSON相關知識\t166
4．2．3 解析JSON數(shù)據(jù)\t168
4．2．4 使用JSON數(shù)據(jù)生成封面圖片\t170
4．3 利用Swift范式創(chuàng)建SwiftUI列表\t172
4．3．1 設計瀏覽頁面列表視圖的行布局\t172
4．3．2 創(chuàng)建數(shù)據(jù)模型\t174
4．3．3 Swift的范式\t174
4．3．4 實現(xiàn)動態(tài)數(shù)據(jù)行信息的設置\t175
4．4 創(chuàng)建名勝古跡的詳細視圖\t177
4．4．1 初步創(chuàng)建詳細視圖\t178
4．4．2 設計橫幅圖片、標題和提要\t180
4．4．3 創(chuàng)建可復用的Heading視圖\t181
4．4．4 創(chuàng)建畫冊視圖\t183
4．4．5 使用NavigationLink創(chuàng)建鏈接\t185
4．4．6 創(chuàng)建相關信息視圖\t186
4．4．7 創(chuàng)建地圖視圖\t188
4．4．8 創(chuàng)建鏈接組件\t192
4．5 創(chuàng)建視頻播放視圖\t194
4．5．1 創(chuàng)建數(shù)據(jù)模型和行視圖\t194
4．5．2 生成列表視圖\t197
4．5．3 觸控反饋\t200
4．5．4 創(chuàng)建視頻播放頁面\t201
4．5．5 視頻播放頁面的附加設置\t204
4．5．6 為視頻瀏覽頁面添加鏈接\t206
4．6 創(chuàng)建帶有標注的復雜地圖\t207
4．6．1 創(chuàng)建數(shù)據(jù)模型\t207
4．6．2 創(chuàng)建復雜地圖\t207
4．6．3 自定義標注\t210
4．6．4 為視圖添加細節(jié)素材\t213
4．7 創(chuàng)建運動動畫\t216
4．8 創(chuàng)建照片視圖\t222
4．8．1 創(chuàng)建基本的網(wǎng)格視圖\t222
4．8．2 實現(xiàn)照片視圖的基本功能\t225
4．8．3 實現(xiàn)照片視圖的滑動條功能\t226
4．8．4 對網(wǎng)格視圖的改進\t228
4．9 創(chuàng)建復雜的網(wǎng)格視圖布局\t229
4．9．1 工具欄的設置\t230
4．9．2 利用Group實現(xiàn)模式切換\t231
4．9．3 實現(xiàn)網(wǎng)格視圖的基本功能\t233
4．9．4 實現(xiàn)網(wǎng)格視圖的列數(shù)動態(tài)變換效果\t235
4．10 創(chuàng)建iMessage擴展功能\t238
4．11 將應用程序適配到iPadOS和macOS平臺\t241
4．11．1 創(chuàng)建App的關于面板\t241
4．11．2 自定義修飾器\t242
4．11．3 將項目遷移到macOS平臺\t244
第5章 愛上寫字\t247
5．1 使用Xcode創(chuàng)建項目\t247
5．1．1 為項目添加程序圖標和相關圖片素材\t248
5．1．2 為項目添加啟動畫面\t249
5．1．3 整理項目文件架構\t250
5．1．4 創(chuàng)建FooterView\t251
5．1．5 快速輸入自定義代碼塊\t253
5．2 創(chuàng)建自定義導航欄\t254
5．2．1 創(chuàng)建導航欄視圖\t255
5．2．2 設計導航欄中的Logo視圖\t256
5．2．3 為主場景視圖添加導航欄\t257
5．3 創(chuàng)建圖像滑動視圖\t260
5．3．1 創(chuàng)建數(shù)據(jù)模型\t260
5．3．2 創(chuàng)建JSON解析方法\t261
5．3．3 創(chuàng)建用于滑動的圖像視圖\t261
5．3．4 將圖像滑動視圖添加到主場景視圖\t263
5．4 為文具分類創(chuàng)建網(wǎng)格布局視圖\t264
5．4．1 創(chuàng)建文具分類數(shù)據(jù)模型\t264
5．4．2 創(chuàng)建文具分類子視圖\t265
5．4．3 創(chuàng)建文具分類網(wǎng)格視圖\t267
5．4．4 為網(wǎng)格視圖創(chuàng)建Header和Footer視圖\t268
5．5 為商品創(chuàng)建網(wǎng)格布局視圖\t270
5．5．1 創(chuàng)建可復用的標題組件\t270
5．5．2 創(chuàng)建商品的數(shù)據(jù)模型\t272
5．5．3 創(chuàng)建商品子視圖\t272
5．5．4 創(chuàng)建商品網(wǎng)格視圖\t274
5．6 創(chuàng)建品牌網(wǎng)格布局視圖\t275
5．6．1 創(chuàng)建品牌的數(shù)據(jù)模型\t275
5．6．2 創(chuàng)建品牌子視圖\t276
5．6．3 創(chuàng)建品牌網(wǎng)格視圖\t277
5．7 創(chuàng)建商品詳細頁面視圖\t278
5．7．1 創(chuàng)建產品詳細頁面視圖\t278
5．7．2 創(chuàng)建詳細頁面導航欄\t279
5．7．3 創(chuàng)建Header視圖\t280
5．7．4 創(chuàng)建詳細頁面的上半部分視圖\t281
5．7．5 創(chuàng)建詳細頁面的商品描述視圖\t283
5．7．6 創(chuàng)建自定義形狀\t284
5．7．7 創(chuàng)建評星和筆尖規(guī)格視圖\t287
5．7．8 創(chuàng)建數(shù)量和“設為最愛”視圖\t290
5．7．9 創(chuàng)建添加到購物車視圖\t291
5．8 完成最后的設置\t293
5．8．1 創(chuàng)建Shop類\t293
5．8．2 在ContentView類中添加Shop實例\t294
5．8．3 實現(xiàn)返回按鈕的功能\t295
5．8．4 完善詳細頁面視圖功能\t297
5．8．5 添加觸控反饋特性\t299
第6章 奇妙水果機\t302
6．1 使用Xcode創(chuàng)建項目\t302
6．1．1 為項目添加程序圖標和相關圖片素材\t303
6．1．2 為項目添加啟動畫面\t304
6．2 創(chuàng)建Header視圖\t305
6．2．1 創(chuàng)建場景頁面代碼架構\t305
6．2．2 單獨創(chuàng)建Logo視圖\t307
6．2．3 添加重置和相關信息按鈕\t308
6．2．4 創(chuàng)建記分牌視圖\t310
6．3 創(chuàng)建游戲主界面\t314
6．3．1 設計水果機的槽位視圖\t314
6．3．2 搭建游戲主界面視圖\t316
6．4 添加Footer視圖\t318
6．4．1 創(chuàng)建Footer界面\t318
6．4．2 重構Footer視圖的代碼\t320
6．5 創(chuàng)建游戲信息視圖頁面\t323
6．5．1 創(chuàng)建信息視圖\t323
6．5．2 實現(xiàn)關閉信息頁面功能\t327
6．6 編寫游戲邏輯代碼\t329
6．6．1 實現(xiàn)隨機生成槽位水果的邏輯\t329
6．6．2 實現(xiàn)判斷輸贏的邏輯\t331
6．6．3 實現(xiàn)玩家選擇游戲分值的功能\t333
6．6．4 創(chuàng)建游戲結束時的自定義窗口\t335
6．7 利用User Defaults存儲和獲取數(shù)據(jù)\t341
6．8 為游戲添加動畫效果\t342
6．9 為游戲添加聲效和背景音樂\t346
第7章 TODO應用程序\t350
7．1 使用Xcode創(chuàng)建項目\t350
7．1．1 創(chuàng)建Todo項目\t350
7．1．2 創(chuàng)建添加待辦事項視圖頁面\t353
7．2 了解Core Data特性\t357
7．2．1 Core Data簡介\t357
7．2．2 為項目創(chuàng)建實例\t358
7．2．3 Core Date的工作方式\t359
7．2．4 為頁面添加managedObjectContext\t361
7．2．5 改善AddTodoView的用戶體驗\t364
7．2．6 顯示待辦事項數(shù)據(jù)信息\t365
7．2．7 刪除和更新數(shù)據(jù)記錄\t367
7．3 顯示隨機視圖\t369
7．3．1 創(chuàng)建EmptyListView頁面\t369
7．3．2 為視圖添加微動畫\t373
7．3．3 顯示隨機內容\t374
7．4 改進表單的外觀\t375
7．4．1 改進AddTodoView的外觀\t375
7．4．2 改進ContentView的外觀\t377
7．5 創(chuàng)建設置視圖頁面\t381
7．5．1 創(chuàng)建設置視圖頁面\t381
7．5．2 創(chuàng)建表單靜態(tài)行視圖\t382
7．5．3 創(chuàng)建可鏈接的靜態(tài)行視圖\t384
7．6 創(chuàng)建可切換應用程序圖標功能\t388
7．6．1 添加并設置可替換圖標\t388
7．6．2 從配置文件中獲取可替換圖標信息\t391
7．6．3 生成應用程序圖標選擇器\t393
7．7 為應用程序創(chuàng)建顏色主題\t398
7．7．1 創(chuàng)建顏色主題相關文件和文件夾\t398
7．7．2 在SettingsView頁面中添加切換顏色主題功能\t399
7．7．3 更新用戶界面\t402
7．7．4 完成設計上的最后改進\t404
第8章 InYourHeart應用程序\t406
8．1 使用Xcode創(chuàng)建項目\t406
8．2 創(chuàng)建卡片視圖\t409
8．2．1 創(chuàng)建卡片視圖的數(shù)據(jù)模型\t409
8．2．2 創(chuàng)建卡片視圖\t410
8．3 創(chuàng)建Header和Footer視圖\t413
8．3．1 創(chuàng)建HeaderView頁面\t413
8．3．2 創(chuàng)建Footer視圖頁面\t415
8．4 創(chuàng)建可復用組件\t416
8．5 創(chuàng)建指南視圖頁面\t419
8．6 利用Binding實現(xiàn)視圖之間的數(shù)據(jù)交換\t421
8．6．1 Binding封裝屬性\t422
8．6．2 使用環(huán)境對象關閉視圖\t424
8．6．3 生成信息導覽頁面視圖\t426
8．6．4 實現(xiàn)InfoView的呈現(xiàn)和關閉\t432
8．7 創(chuàng)建照片卡牌\t434
8．7．1 創(chuàng)建照片卡牌\t434
8．7．2 對照片卡牌的改進\t436
8．7．3 實現(xiàn)左右滑動手勢\t437
8．7．4 顯示喜愛或不喜愛的圖標\t442
8．8 移除和添加照片卡牌\t444