使应用程序具有交互性

使用 Swift 进行 iOS 开发 - 使应用程序具有交互性

静态应用提供了信息，但交互式应用能吸引用户。在本章中，我们将探讨如何让你的 iOS 应用响应用户输入。我们将涵盖：

添加文本字段（UITextField）用于用户输入
使用标签（UILabel）显示动态信息
添加按钮（UIButton）并处理其动作（轻点事件）

我们将构建一个简单的应用，例如一个“狗狗年龄计算器”，用户输入狗狗的人类年龄，应用会计算并显示其等效的狗狗年龄（使用一个简单的乘数）。

首先，创建一个新的 Xcode 项目（iOS App 模板，Storyboard 界面，Swift 语言），或者使用现有项目。让我们将其命名为“InteractiveAppDemo”。

在 Storyboard 中设计用户界面

打开你的 Main.storyboard 文件。

添加标题标签：将一个 UILabel 从对象库（Object Library）拖到视图上。双击它并将文本设置为“Dog’s Age Calculator”。将其放在顶部附近。
添加输入文本字段：从对象库（Object Library）拖一个 UITextField。将其放在标题标签下方。在属性检查器（Attributes Inspector）中（右侧面板，先选中文本字段），你可以设置一个“Placeholder”（占位文本）文本，例如“Enter dog’s age in human years”。对于数字输入，将“Keyboard Type”（键盘类型）更改为“Number Pad”。
添加触发计算的按钮：在文本字段下方拖一个 UIButton。双击它或使用属性检查器（Attributes Inspector）将其标题更改为“Calculate Age”。
添加结果标签：在按钮下方拖另一个 UILabel。此标签将显示计算出的年龄。最初，你可以清空其文本或将其设置为“Result will appear here”之类的内容。将其稍微拉伸一些以容纳更长的结果。

提示：如果双击无法编辑元素的文本，请选中该项并在属性检查器（Attributes Inspector）中找到其“Text”（对于标签）或“Title”（对于按钮）属性。更改后按 Return/Enter 键。

（可选）添加图片以使 UI 更具视觉吸引力：

添加图片（可选）

找到一张合适的图片（例如，狗图标）。将其添加到你项目的资源目录（Asset Catalog）（Assets.xcassets）中。将图片文件从 Finder 拖到资源目录中。给它一个描述性的名称（例如，dog_icon）。
在 Main.storyboard 中，从对象库（Object Library）拖一个 UIImageView 到视图上。
选中 Image View，转到属性检查器（Attributes Inspector）。在“Image”下拉菜单中，选择你添加的图片的名称（例如，dog_icon）。
调整 Image View 的大小和位置。设置其“Content Mode”（内容模式，例如“Aspect Fit”或“Aspect Fill”）以控制图片的缩放方式。

将这些 UI 元素整齐地排列在视图上。考虑使用自动布局约束（Auto Layout constraints）或堆栈视图（Stack Views）来实现响应式设计，不过对于这个简单示例，固定位置足以满足单一设备预览。

将 UI 元素连接到代码（Outlets 和 Actions）

为了在 Swift 中与这些 UI 元素交互，我们需要创建连接：

打开助理编辑器（Assistant Editor）：当 Main.storyboard 处于活动状态时，点击工具栏中的助理编辑器按钮（两个重叠圆圈图标）或按下 Option-Command-Return。这应该会打开 ViewController.swift 文件以及你的 storyboard。
为输入和输出元素创建 Outlet：
- 对于文本字段：按住 Control 键从 storyboard 中的 UITextField 拖动到你的 ViewController.swift 文件中，放在 class ViewController... 行下方。在弹出的窗口中，确保“Connection”是“Outlet”，提供一个“Name”（例如，ageTextField），然后点击“Connect”。
- 对于结果标签：按住 Control 键从结果 UILabel 拖动到 ViewController.swift。创建一个名为 resultLabel 的 outlet。
为按钮创建一个 Action：
- 按住 Control 键从 UIButton（“Calculate Age”）拖动到 ViewController.swift 中，放在类的大括号内，通常在 viewDidLoad() 或其他 outlet 下方。在弹出的窗口中：
  - 将“Connection”设置为“Action”。
  - 给它一个“Name”（例如，calculateButtonTapped）。
  - 确保“Type”是 UIButton（如果愿意，也可以是 Any）。
  - 点击“Connect”。

你的 ViewController.swift 现在应该有类似以下的代码行（顺序可能有所不同）：

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var ageTextField: UITextField!
    @IBOutlet weak var resultLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        // 初始设置，例如清空结果标签
        resultLabel.text = ""
    }

    @IBAction func calculateButtonTapped(_ sender: UIButton) {
        // 逻辑将在此处实现
    }
}

实现逻辑

现在，让我们在 calculateButtonTapped action 方法内部添加计算逻辑。

@IBAction func calculateButtonTapped(_ sender: UIButton) {
    // 1. 从文本字段获取文本
    guard let ageText = ageTextField.text, !ageText.isEmpty else {
        resultLabel.text = "Please enter an age."
        return
    }

    // 2. 将文本转换为整数
    guard let humanYears = Int(ageText) else {
        resultLabel.text = "Invalid number entered."
        return
    }

    // 3. 执行计算（例如，为简化起见，1 人类年 = 7 狗年）
    // 原教程使用了乘数 8。
    let dogAgeMultiplier = 7 // 如果偏好原教程，也可以使用 8
    let calculatedDogYears = humanYears * dogAgeMultiplier

    // 4. 在标签中显示结果
    resultLabel.text = "Your dog is \(calculatedDogYears) in dog years!"

    // 可选：隐藏键盘
    ageTextField.resignFirstResponder()
}

提示：如果每条语句都在单独的行上，Swift 不需要行末的分号。代码使用了 guard let 来安全解包可选值（如 ageTextField.text），并在输入无效时提前退出。使用字符串插值（\(...)）来创建输出字符串。

运行你的应用程序。在文本字段中输入一个数字，然后轻点“Calculate Age”按钮。结果应该会出现在标签中。尝试输入非数字文本或留空，看看错误消息。

如果在模拟器中轻点文本字段时键盘没有出现，你可能需要启用它：在模拟器处于活动状态时，转到菜单 I/O > Keyboard > Toggle Software Keyboard（或 Command-K）。

你现在已经构建了一个交互式应用！UI 元素、outlets、actions 和基本逻辑的这个基础是大多数 iOS 应用的关键。在接下来的章节中，我们将探索更高级的 Swift 概念和 iOS 特性。