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。