Segmented Control 教程_app

概述作者：Arthur Knopper，原文链接，原文日期：2016-10-18 译者：Crystal Sun；校对：星夜暮晨；定稿：CMB Segmented Control 用于展示一些用户可以选择的选项。每个 Segment 看起来像是一个单选按钮 (radio button)，用户即便选中了某个选项，这个 Segment 仍保持“选中”状态。在本节教程里，我们会在 UISegmentedCon

作者：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，在d出窗中选择 Vertical Spacing 选项。

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

按住 Shift 键选中 Label 和 Segmented Control，点击 Storyboard 右下角的 auto Layout 中的 Align 按钮，在d出窗中输入下图中的值，点击 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 的源代码。