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