segmented control 教程

原文链接
作者：Arthur Knopper
原文日期：2016-10-18
译者：Crystal Sun

segmented control 展示了一些选项，用户可以每个选项。每个 segment 像是一个 radio 单选按钮，用户点完 segment 后 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 看起来如下图：

按住 Ctrl，选中 Label 拖向 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 如下图所示：

用户点击 Segmented Control 会改变 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 的 index 值是 0，第二个 segment 的 index 值是 1。运行工程，实现了这个效果。

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

本文由 SwiftGG 翻译组翻译，已经获得作者翻译授权。