Picker View 教程

做者：Arthur Knopper，原文連接，原文日期：2017/04/05
譯者：Crystal Sun；校對：walkingway；定稿：CMB

picker view 看起來像是自動販售機或者角子老虎機，用於展現一組或者多組數值。用戶經過滾輪來選擇數值，選中的值處在同一行中。Xcode 裏的 User Interface 提供了 picker view 控件，展現可選的組件和行。組件就是滾輪，有不少行，每行都有固定的 index 值。本教程使用的是 Xcode 8.3 和 iOS 10.3。

建立工程

打開 Xcode，建立一個 Single View Application。

Product Name 使用 IOS10PickerViewTutorial，填寫本身的 Organization Name 和 Organization Identifier，Language 一欄選擇 Swift，Devices 一欄選擇 iPhone。

設置 Storyboard

打開 Storyboard，添加一個 Picker View，而後選中，點擊右下角的 Auto Layout 的 Pin 按鈕，以下圖所示，選中上、左、右三個方向，點擊 「Add 3 Constants」。

點擊 Assistant Editor，確保 ViewController.swift 文件可見。使用 Control 拖拽法將 Picker View 和 ViewController 類建立下列 Outlet：

Storyboard 看起來應以下圖所示：

寫代碼

打開 ViewController.swift 文件，Picker View 必須遵循 UIPickerViewDataSource 和 UIPickerViewDelegate 協議，在類的聲明裏，將代碼改爲以下所示：

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

將 viewDidLoad 方法改爲以下所示：

override func viewDidLoad() {
    super.viewDidLoad()
        
    pickerView.delegate = self
    pickerView.dataSource = self
}

還須要給 Picker View 提供數值，在 ViewController 類中添加下列數組：

let colors = ["Red","Yellow","Green","Blue"]

colors 數組就是 Picker View 的數據源（data source），UIPickerViewDataSource 協議須要特定的方法來定義 picker 的組件和行數。實現下列方法：

func numberOfComponents(in pickerView: UIPickerView) -> Int {
    return 1
}
    
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    return colors.count
}

咱們定義了 picker 的行數等於數組的元素數量。接下來，將數組對應的元素內容賦值給對應的行：

func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
    return colors[row]
}

運行工程

運行工程，如今能夠在 Picker View 裏選擇不一樣的顏色了。

能夠從 github 上下載 IOS10PickerViewTutorial 教程的源碼。

本文由 SwiftGG 翻譯組翻譯，已經得到做者翻譯受權，最新文章請訪問 http://swift.gg。