想學習 iOS 開發?從 HelloWorld 頁面開始

語言: CN / TW / HK

1. 前言

今年團隊在拉平大前端能力,需要學習原生 App 開發,先來寫一個 HelloWorld iOS 頁面。

2. 建立專案

2.1 安裝 Xcode

xcode 如何下載安裝,可以到 AppStore 搜尋 Xcode 下載或者到 Xcode 官網

建議到官網,因為 AppStore 下載會經常遇到網路阻斷、一直 loading 的問題。

環境:Xcode 14.2 版本,系統:macOS Monterey

65066030-257C-425D-B2BA-923A5954D21E.png

2.2 新建 Xcode 專案

1.選擇 iOS 目標與 App 應用模版

98D1CD94-47E2-4562-B623-8F7F3A442FF7.png

2.填寫資訊,介面 Interface 選擇 Storyboard,使用語言 Objective-C。

45386964-8896-4CF9-8962-8C8D813F9262.png

3.確定後,Xcode 預設會自動開啟這個專案

9725997B-0AB9-476F-9F4F-7E724B667ADC.png 通過資料夾檢視,根目錄下預設就是一個專案名 .xcodeproj 和一個專案名資料夾, 可以雙擊 HelloWorld.xcodeproj 檔案,就是開啟的上述介面。

DAD1EDAF-B824-4626-A837-8EE835AADC4F.png

3. 專案目錄簡介

3.1 .xcodeproj 資料夾

.xcodeproj 檔案並不是一個檔案,而是一個資料夾。在終端檢視包含以下資料夾:

  • project.pbxproj 檔案本質是一個 ASCII text 檔案,儲存著 Xcode 工程的各項配置引數。本質上是一箇舊風格的 Property List 檔案
  • project.xcworkspace 工作空間
  • xcuserdata 一般是跟使用者相關的一些設定

以上檔案可大概瞭解,現在不需要詳細學習。

3.2 專案名資料夾

雙擊 HelloWorld.xcodeproj 在 Xcode 中開啟檔案目錄如下

063D0689-1777-479F-A4B2-C510669C1067.png - Main.stroyboard 故事板檔案 - LaunchScreen 應用啟動故事版檔案 - Assets.xcassets 資源目錄,可以用來管理圖片

現在只需要瞭解 Main.stroyboard 就可以實現在介面上顯示 Helloworld 文字。

4. 新增 Label 控制元件

4.1 Main.stroyboard

故事板可以用來構建介面,它本質上是一個 XML 檔案,可以用來描述應用中有哪些介面、介面有哪些檢視元素,它們的佈局、事件處理,以及介面之間是如何導航的。

在這裡,我選中故事板下的 view 檢視,並點選右上角的加號,在這裡選中一個 Label UI,新增到頁面中,此時啟動應用即可看到 Jecyu 文字。

711A8E5E-1051-4879-A098-5E66FB520EBE.png

這裡的 View Controller Scene 是檢視控制場景,View Controller 是檢視控制器,最後才是檢視控制器管理的檢視。

一個場景中包含一個檢視控制器,檢視控制器通過管理檢視來顯示介面,檢視控制器有一個 view 屬性,該屬性可用於獲得它所管理的檢視。多個場景通過“過渡”連線,過渡定義了場景之間的導航方式。

4.2 Info.plist

這個檔案的作用就是提供應用在執行期的一些配置,可以看到程式實際執行的路徑,故事板使用 Main.stroyBoard ,故事板使用的場景執行檔案為 SceneDelegate 。

711A8E5E-1051-4879-A098-5E66FB520EBE.png

9BE2C2FC-C232-474F-AB06-7E1897EC5C88.png

5. 啟動程式,在模擬器中執行

點選左上角構建圖示,點選執行

D3F7FE89-B6AE-41C0-BA09-1EA3CD37BEFC.png

6. 總結

如何快速實現一個 Hello world iOS App。

  • 新建一個 Xcode 專案,選擇 iOS 目標。
  • 根目錄下預設就是一個專案名 .xcodeproj 和一個專案名資料夾。
  • 專案名資料夾下選擇 Main.storyboard 故事板,選擇 View 屬性,搜尋新增 Label 控制元件,輸入 HelloWorld
  • 啟動程式,即可在模擬器中執行

下一篇,我會先簡單瞭解 Objective-C 的類知識,再介紹剩下專案名資料夾下的 .h.m等檔案的作用,然後通過程式碼繪製 Hello World。

參考資料

  • 《iOS 開發指南從 HelloWorld 到 App Store 上架》作者關東昇