七天學會 swift - 基礎篇 Day2


大綱

  • 開發工具
  • Storyboard
    1.元件命名
    2.攔截事件

開發工具

Xcode 是頻果公司所開發的專門用來設計 Apple 程式的整合開發環境,由於 Xcode 只能在 Mac 作業系統上運行,所以使用者就必須要有一台能運行 Mac 作業系統的電腦,然後再到 Apple Store 下載即可


StoryBoard

StoryBoard 是開發 ios 程式很重要的一項工具,他主要是用來幫助程式設計師用視覺化的方式設計畫面。Xcode 內建了很多視覺化元件,我們只要從元件庫將將元件拖放到 StoryBoard 中預設的 ViewController 上,並以視覺化的方式調整位置及大小即可,過程中完全不需要寫程式。

步驟說明

  1. 開啟 Xcode 後選擇第二個選項開新專案

  2. 建立一個 Single View App 專案

  3. 輸入專案名稱,並且在 UserInterface 的地方選擇 StoryBoard


元件命名

步驟說明

  1. 開啟 Main.storyboard,拖放一個 Label 元件到 View Controller 上

  2. 將 Xcode 的畫面分割成 storyboard 與程式碼,右邊程式碼的部分為 ViewController.swift

  3. 選到 Label 元件,然後壓著鍵盤上的 control 鍵,拖出一條藍線到右邊程式碼的 viewDidLoad() 上方

  4. 鬆開滑鼠後在 Name 的位置輸入想要的名稱,再按下 Connect,就完成命名了

  5. Xcode 幫我們產生了一個 IBOutlet 屬性

    @IBOutlet weak var label1: UILabel!
    

攔截事件

App 之所以可以跟使用者互動,靠的就是事件的產生並且透過程式回應這個事件,例如當手指在某個按鈕上點一下時,作業系統就會在這個按鈕上發出點一下的事件

步驟說明

  1. 建立 Single View App 專案
  2. 開啟 Main.storyboard,然後從元件清單中拖放一個 Button 元件 跟一個 Label 元件 到 View Controller 上
  3. 將 Label 拖拉至右方程式碼命名
  4. 將 button 拖拉至右方,並在 Connection 選擇 Action

  5. 在 button 裡寫個能跟 label 做互動的程式碼

    @IBAction func button(_ sender: Any) {
    
         if label1.text == "001" {
             label1.text = "100"
         }else{
             label1.text = "001"
         }
     }
    
  6. 執行

結語

以上兩篇就是比較基礎的部分了,還有很多常用元件 segue 之類的我後面就不多談了,網路上資源都蠻多的了,之後的文章我會介紹些 realm 資料庫,或是些正規化的部分

#swift #iOS







你可能感興趣的文章

[讀書筆記 Flutter 實戰 004] Dart 語言簡介

[讀書筆記 Flutter 實戰 004] Dart 語言簡介

實作 PHP API & 留言板 SPA(上)

實作 PHP API & 留言板 SPA(上)

漫談傳輸介面-UART

漫談傳輸介面-UART






留言討論