原文鏈接
作者：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 翻譯組翻譯，已經獲得作者翻譯授權。