星期一, 7月 03, 2017

【 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"
  • 執行結果:

0 意見 :

張貼留言

回覆意見時,麻煩輸入一下暱稱
(隨便取個名字也好~ ^_^)
好讓我方便回覆您的問題,
選擇「名稱/網址」輸入您的暱稱,
麻煩一下,謝謝大家。

關閉廣告 [X]