【iOS 中文開放式課程】 第一支App - Hello World
我們需要您的贊助
影片教學
學習目標
- 學習如何從零開始，建立一個 iOS 的全新空白專案
- 瞭解 XCode 基本操作介面與建置流程。
- 學習如何讓 Button 點擊後，Label 顯示 Hello
APP UI 介面草圖
操作步驟與說明
- 點擊 Xcode 圖示，開啟 Xcode 應用程式
- 在歡迎畫面中，選擇 『 Create a new Xcode project 』
- 選擇最基本的單頁畫面範本來建立專案
- iOS -> Single View Application ->Create
- 設定專案名稱
- General 頁籤
設定APP 相關屬性，例如：版本號碼…等，之後會有另一篇章節來專門介紹相關設定參數，此時我們直接使用系統預設值
- 專案相關檔案的管理目錄
Main.storboard :
一開始完全是空白的 APP畫面，可以想像它是一個畫布，上面可以設計擺放各式各樣 UI元件，例如：Label, Button。
ViewController.swift：
寫程式來控制UI元件
- 點擊Main.storboard後，畫面中間會顯示畫板，此時我們從右下角UI元件庫，找到 Label 元件，然後將它拖曳到畫板中。
- 同理，從右下角UI元件庫中找到 Button元件，然後拖曳到畫板中。
- 我們可以在右上角找到兩個圈圈的圖示，點擊它則可以同時看到畫板和程式碼頁
- 若覺得畫面太擁擠，可以點擊隱藏右側或左側面板
- 滑鼠右鍵按住 Label 往右拖曳到 ViewController.swift
(若是使用觸控板的使用者，請先點選Label後，按著 control 鍵即可進行往右拖曳到 ViewController.swift)
- 接續上一步，鬆開滑鼠右鍵，將會出現此面板
- Connection 設為 Outlet。 (我們等回要用程式來設定 Label 顯示的文字，務必選擇Outlet)
- 將此元件取名為 lbHello 。
- type 為 UILabel 。
- 設定確認無誤後，點擊面板右下角的 Connect 按鈕。
- 我們將會看到，自動生成一行程式碼
- 同樣的我們將滑鼠右鍵按住 Button 往右拖曳到 ViewController.swift
- 接續上一步，鬆開滑鼠右鍵，將會出現此面板
- Connection 設為 Action。 (我們要監聽按鈕觸發事件，務必選擇為Action)
- 將此function取名為 onClick 。
- type 為 UIButton 。
- 設定確認無誤後，點擊面板右下角的 Connect 按鈕。
- 同樣我們將會看到，自動生成的程式碼
- 我們在{} 裡，寫入以下程式碼
此段的意思即是，當按鈕按下時，會將Hello 字串，顯示在Label 文字中。
lbHello.text = "Hello"
執行結果：
