Segmented Control 教程

做者：Arthur Knopper，原文连接，原文日期：2016-10-18
译者：Crystal Sun；校对：星夜暮晨；定稿：CMB

Segmented Control 用于展现一些用户能够选择的选项。每一个 Segment 看起来像是一个单选按钮 (radio button)，用户即使选中了某个选项，这个 Segment 仍保持“选中”状态。在本节教程里，咱们会在 UISegmentedController 当中建立两个 Segment，每一个 Segment 会让 Label 显示不一样的文本内容。本节教程将使用 Xcode 8 和 iOS 10 来进行构建。

打开 Xcode，建立一个 Single View Application。

点击 Next，product name 一栏填写 IOS10SegmentedControlTutorial，填写好 Organization Name 和 Organization Identifier，Language 选择 Swift，Devices 选择 iPhone。

前往 Storyboard 当中，拖一个 Segmented Control 放到主界面。随后再拖一个 Label，使其位于 Segmented Control 的下方并将其文本内容改成 First Segment Selected。Storyboard 看起来以下图所示：

选中 Label，按住 Ctrl 并拖向 Segmented Control，在弹出窗中选择 Vertical Spacing 选项。

选中 Segmented Control，点击 Storyboard 右下角的 Auto Layout 中的 Pin 按钮，在弹出窗中输入下图中的值，点击 Add 1 Constraint。

按住 Shift 键选中 Label 和 Segmented Control，点击 Storyboard 右下角的 Auto Layout 中的 Align 按钮，在弹出窗中输入下图中的值，点击 Add 2 Constraint。

点击 Assistant Editor，确保 ViewController.swift 文件可见。按住 Ctrl，把 Segmented Control 拖到 ViewController.swift 文件里，建立一个 Outlet 以下图所示：

按住 Ctrl，把 Label 拖到 ViewController.swift 文件里，建立一个 Outlet 以下图所示：

按住 Ctrl，把 Segmented Control 拖到 ViewController.swift 文件里，建立一个 Action 以下图所示：

当用户改变了 Segment 的索引 (index) 值的时候，都会调用这个 indexChanged 方法，下面来实现这个方法：

@IBAction func indexChanged(_ sender: AnyObject) {
    switch segmentedControl.selectedSegmentIndex
    {
    case 0:
        textLabel.text = "First Segment Selected";
    case 1:
        textLabel.text = "Second Segment Selected";
    default:
        break
    }
}

当 selectedSegmentIndex 值发生变化后，Label 的文本也会更新。第一个 Segment 的索引值是 0，第二个 Segment 的索引值是 1。编译并运行工程，您会发现文本内容会随着 Segment 的变化而发生变化。

在 ioscreator 的 github 上能够下载到本节课程 IOS10SegmentedControlTutorial 的源代码。

本文由 SwiftGG 翻译组翻译，已经得到做者翻译受权，最新文章请访问 http://swift.gg。