【 iOS 中文開放式課程 】第一支App - Hello World





(XCode 9, iOS 11 , Swift4 )

我們需要您的贊助

學習目標

  1. 學習如何從零開始,建立一個 iOS 的全新空白專案
  2. 瞭解 XCode 基本操作介面與建置流程。
  3. 學習如何讓 Button 點擊後,Label 顯示 Hello

APP UI 介面草圖

操作步驟與說明

  • 點擊 Xcode 圖示,開啟 Xcode 應用程式
  • 在歡迎畫面中,選擇 『 Create a new Xcode project 』
  • 選擇最基本的單頁畫面範本來建立專案
  • iOS -> Single View App ->Next
  • 設定專案名稱
  • Product Name: APP 專案產品名稱
  • Team: 開發者帳號。上架 APP 到App Store 或實機安裝測試需要,模擬器開發,可以略過。
  • Organzation Name: 組織名稱 (填寫您個人或公司名稱)
  • Organzation identifer:組織識別碼
  • Bundle identifer: 識別碼 (上架 APP 到 App Store 會用來辨識,是唯一值,重覆的話,會提示與他人同名),此範例,KT使用自己的部落格:「tw-hkt.blogspot.tw」+「APP 名稱」反向組合而成,當作識別碼:「tw.blogspot.twhkt.DemoHello」
  • Language: Swift。選擇使用 Swift 程式語言來開發APP。
  • Use Core Data
    若勾選,將使用 Core Data 框架來操作,存放處理資料庫
  • include Unit Tests、include UITests
    若勾選,將實作邏輯功能和介面單元測試
    • General 頁籤
      設定APP 相關屬性,例如:版本號碼…等,之後會有另一篇章節來專門介紹相關設定參數,此時我們直接使用系統預設值
  • 左側專案相關檔案的管理目錄

Main.storboard :

一開始完全是空白的 APP畫面,可以想像它是一個畫布,上面可以設計擺放各式各樣 UI元件,例如:Label, Button。

ViewController.swift:

寫程式來控制UI元件
  • 點擊Main.storboard後,畫面中間會顯示Scene(場景),此時我們從右下角UI元件庫,找到 Label 元件,然後將它拖曳到畫板中。
  • 同理,從右下角UI元件庫中找到 Button元件,然後拖曳到畫板中。
  • 我們可以在右上角找到兩個圈圈的圖示,點擊它則可以同時看到畫板和程式碼頁
  • 若覺得畫面太擁擠,可以點擊隱藏右側或左側面板
  • 滑鼠右鍵按住 Label 往右拖曳到 ViewController.swift
    (若是使用觸控板的使用者,請先點選Label後,按著 control 鍵即可進行往右拖曳到 ViewController.swift)
  • 接續上一步,鬆開滑鼠右鍵,將會出現此面板
  1. Connection 設為 Outlet。 (我們等回要用程式來設定 Label 顯示的文字,務必選擇Outlet)
  2. 將此元件取名為 lbHello 。
  3. type 為 UILabel 。
  4. 設定確認無誤後,點擊面板右下角的 Connect 按鈕。
  • 我們將會看到,自動生成一行程式碼
  • 同樣的我們將滑鼠右鍵按住 Button 往右拖曳到 ViewController.swift
  • 接續上一步,鬆開滑鼠右鍵,將會出現此面板
  1. Connection 設為 Action。 (我們要監聽按鈕觸發事件,務必選擇為Action)
  2. 將此function取名為 onClick 。
  3. type 為 UIButton 。
  4. 設定確認無誤後,點擊面板右下角的 Connect 按鈕。
  • 同樣我們將會看到,自動生成的程式碼
  • 我們在{} 裡,寫入以下程式碼
    此段的意思即是,當按鈕按下時,會將Hello 字串,顯示在Label 文字中。
lbHello.text = "Hello"
  • 執行結果:

這個網誌中的熱門文章

2023 最新入門零基礎 Kotlin教學【從零開始學 Kotlin 程式設計】Kotlin 教學課程目錄 (Android Kotlin, IntelliJ IDEA, Android Studio, Android APP 開發教學)

最新入門零基礎 Java 教學【從零開始學 Java 程式設計】Java教學課程目錄 (IntelliJ IDEA 開發教學)

nano 文字編輯器

2022 最新入門零基礎 Flutter教學 【Flutter 程式設計入門實戰 30 天】Flutter 教學課程目錄 (IntelliJ IDEA 開發教學)

Android Studio 歷代版本下載點