想學習 iOS 開發?從 HelloWorld 頁面開始
1. 前言
今年團隊在拉平大前端能力,需要學習原生 App 開發,先來寫一個 HelloWorld iOS 頁面。
2. 建立專案
2.1 安裝 Xcode
xcode 如何下載安裝,可以到 AppStore 搜尋 Xcode 下載或者到 Xcode 官網
建議到官網,因為 AppStore 下載會經常遇到網路阻斷、一直 loading 的問題。
環境:Xcode 14.2 版本,系統:macOS Monterey
2.2 新建 Xcode 專案
1.選擇 iOS 目標與 App 應用模版
2.填寫資訊,介面 Interface 選擇 Storyboard,使用語言 Objective-C。
3.確定後,Xcode 預設會自動開啟這個專案
通過資料夾檢視,根目錄下預設就是一個專案名 .xcodeproj 和一個專案名資料夾, 可以雙擊 HelloWorld.xcodeproj 檔案,就是開啟的上述介面。
3. 專案目錄簡介
3.1 .xcodeproj 資料夾
.xcodeproj 檔案並不是一個檔案,而是一個資料夾。在終端檢視包含以下資料夾:
- project.pbxproj 檔案本質是一個 ASCII text 檔案,儲存著 Xcode 工程的各項配置引數。本質上是一箇舊風格的 Property List 檔案
- project.xcworkspace 工作空間
- xcuserdata 一般是跟使用者相關的一些設定
以上檔案可大概瞭解,現在不需要詳細學習。
3.2 專案名資料夾
雙擊 HelloWorld.xcodeproj
在 Xcode 中開啟檔案目錄如下
- Main.stroyboard 故事板檔案
- LaunchScreen 應用啟動故事版檔案
- Assets.xcassets 資源目錄,可以用來管理圖片
現在只需要瞭解 Main.stroyboard 就可以實現在介面上顯示 Helloworld 文字。
4. 新增 Label 控制元件
4.1 Main.stroyboard
故事板可以用來構建介面,它本質上是一個 XML 檔案,可以用來描述應用中有哪些介面、介面有哪些檢視元素,它們的佈局、事件處理,以及介面之間是如何導航的。
在這裡,我選中故事板下的 view 檢視,並點選右上角的加號,在這裡選中一個 Label UI,新增到頁面中,此時啟動應用即可看到 Jecyu 文字。
這裡的 View Controller Scene 是檢視控制場景,View Controller 是檢視控制器,最後才是檢視控制器管理的檢視。
一個場景中包含一個檢視控制器,檢視控制器通過管理檢視來顯示介面,檢視控制器有一個 view 屬性,該屬性可用於獲得它所管理的檢視。多個場景通過“過渡”連線,過渡定義了場景之間的導航方式。
4.2 Info.plist
這個檔案的作用就是提供應用在執行期的一些配置,可以看到程式實際執行的路徑,故事板使用 Main.stroyBoard ,故事板使用的場景執行檔案為 SceneDelegate 。
5. 啟動程式,在模擬器中執行
點選左上角構建圖示,點選執行
6. 總結
如何快速實現一個 Hello world iOS App。
- 新建一個 Xcode 專案,選擇 iOS 目標。
- 根目錄下預設就是一個專案名 .xcodeproj 和一個專案名資料夾。
- 專案名資料夾下選擇 Main.storyboard 故事板,選擇 View 屬性,搜尋新增 Label 控制元件,輸入 HelloWorld
- 啟動程式,即可在模擬器中執行
下一篇,我會先簡單瞭解 Objective-C 的類知識,再介紹剩下專案名資料夾下的 .h 和 .m等檔案的作用,然後通過程式碼繪製 Hello World。
參考資料
- 《iOS 開發指南從 HelloWorld 到 App Store 上架》作者關東昇