- 使用 Swift 2 進行 iOS 開發
- iOS 開發 - 首頁
- iOS 開發 - Xcode IDE
- iOS 開發 - 第一個應用程式
- 使應用互動式
- iOS 開發 - Swift Playground
- 使用 Swift 建立應用程式
- iOS 開發 - 高階 iOS
- iOS 開發 - 整合地圖
- iOS 開發 - 自動佈局
- iOS 開發 - 動畫
- 訪問 Web 服務
- 併發控制
- 面試問題
- iOS 開發有用資源
- iOS 開發 - 快速指南
- iOS 開發 - 資源
- iOS 開發 - 討論
使應用互動式
在本章中,我們將介紹 iOS 提供的一些新內容和 UI 功能,用於與使用者互動。我們將新增 -
- 文字欄位
- 標籤
- 按鈕及其操作
此外,我們將使用 Swift 編寫動態標籤的程式碼,該標籤將顯示使用者輸入的計算結果。
標題“使我們的應用程式互動式”的意思是使我們的應用程式與使用者互動。因此,在這裡我們賦予使用者互動和控制應用程式的能力。
新增文字欄位
在這裡,我們將再次建立一個新專案。它應該易於管理,因為我們已經討論瞭如何在 Xcode 中建立新專案。
好的,現在我們將建立一個名為“My Dog’s Age”的新專案。建立此專案後,我們將點選我們的“Main.storyboard”檔案並按照以下步驟操作。
在實用程式窗格的搜尋欄(位於 Xcode 的右下角)中,搜尋 Label。單擊並將其拖到您的 main.storyboard /(檢視)中。然後,雙擊標籤並將其重新命名為 -“My Dog’s Age”。
搜尋“文字欄位”,單擊並將其拖到您的檢視中。選中此文字欄位後,轉到屬性檢查器並將鍵盤型別更改為數字鍵盤,以便只能輸入數字,如下面的螢幕截圖所示。
向我們的檢視新增按鈕
現在在搜尋欄中搜索 Button。將其拖到您的檢視中,雙擊它並重命名為“Calculate”。
向檢視新增標籤
搜尋標籤並將其新增到按鈕下方,以顯示年齡輸出。雙擊並清空標籤並將其稍微拉伸,以便完整輸出可見。
提示 - 如果您無法透過雙擊重新命名,則選擇該專案,在實用程式窗格 - 屬性檢查器中,有該專案的標題,在其中修改並按 Return,如下面的螢幕截圖所示。
現在,您的 Main.storyboard 應該如下面的螢幕截圖所示。
我們不會止步於此,現在我們將討論如何向 main.storyboard 新增影像。
向我們的檢視新增影像
首先,我們應該搜尋要新增到專案中的影像。您可以下載以下提供的影像 -
將此影像複製到您的專案中,或將此影像拖到您的專案中,然後您將看到以下視窗。
確保您選擇,根據需要複製專案並建立組。點選完成按鈕。
現在,轉到實用程式窗格→物件庫並搜尋影像檢視。將影像檢視拖到您的檢視中。現在您的檢視應該如下面的螢幕截圖所示。
現在,單擊您剛剛拖到檢視中的此影像檢視,然後您將看到在實用程式區域中有一個名為“Image”的選項來選擇影像。單擊該箭頭,您將看到所有可用的影像。確保您選擇了這個新新增的影像檢視。
現在您已為影像檢視選擇了影像,最終檢視應如下面的螢幕截圖所示。這是我們將在該應用程式的 main.storyboard 中執行的唯一操作。
這是我們新增所有 UI 元素後的檢視。
在此之後,我們對程式碼進行了邏輯實現,如果您已完成到此步驟,我們將繼續進行。
現在,選擇您的檢視控制器並透過單擊右上角的助手編輯器按鈕開啟助手編輯器(如下面的螢幕截圖所示)。
現在,我們的檢視應該如下面的螢幕截圖所示。
向我們的應用程式新增功能
到目前為止,我們的應用程式只是一個靜態應用程式,它對任何內容都沒有響應,並且不會根據使用者互動而改變。
現在是將我們的 UI 元素連線到我們的程式碼的主要部分,並且 UI 將根據使用者的輸入進行更改。“ViewController.swift” 檔案是我們編寫當前檢視程式碼的主要檔案。
注意 - 目前我們正在使用單個檢視,稍後當我們討論多個檢視時。我們將討論不同的檔案如何控制不同的檢視。
單擊文字欄位,按住 Control 鍵並拖動游標到螢幕的第二部分,即 viewcontroller.swift 檔案。您將看到一條藍線連線我們的檢視和 swift 檔案。當您釋放滑鼠時,您將看到一個彈出視窗,要求輸入。
提示 - 使用任何類似於輸入欄位的名稱填充“名稱”欄位。重要的一點是名稱不能包含空格,因此您可以像前面的影像中顯示的那樣編寫它,即如果名稱包含多個單詞,則第一個單詞應小寫,然後每個後續單詞的第一個字母應大寫。
按照相同的步驟連線其餘的元素。請記住,對於文字欄位和標籤,型別是 Outlet。但是,在新增按鈕時,型別必須是 action,如下面的螢幕截圖所示。
在此階段,我們的 viewcontroller.swift 將如下所示 -
現在,在您的按鈕操作中,新增以下行 -
var age = Int(enteredAge.text!)! * 8 yearsLabel.text = String(age);
提示 - 我們不需要在 Swift 中新增分號來結束一行,但即使我們添加了分號,編譯器也不會報告任何錯誤。
在上面的程式碼中,第一行聲明瞭一個變數“age”,我們將在下一章中討論。然後我們透過將其轉換為整數並乘以 8 來分配使用者輸入的值。
在第二行中,我們將“age”的值分配給我們的輸出標籤。在此階段,我們的檢視控制器將如下所示 -
現在,我們將執行我們的應用程式,它將如下所示。
提示 - 如果您的鍵盤在第一次執行時沒有出現,請開啟您的模擬器,單擊硬體,轉到鍵盤並單擊切換軟體鍵盤。
在下一章中,我們將討論一個名為Playground的新工具。我們還將學習更多 Swift 概念,例如變數、字典、陣列迴圈、類和物件。