Swift3でUIPickerViewを実装する方法

１.storybordにPicker Viewを配置する

まずはPicker Viewとラベルの位置を決めます。
順番はどちらが先でも関係ありませんが、今回はPickerViewから配置してみます。

storybordを開き右側のウィンドウ（ユーティリティエリア）の下側にある選択肢からPickerViewを引っ張ってきます。（画像の黒い線です。）
次に適当な位置に配置し、配置したPickerViewをCtrを押したままクリックしstorybord上の黄色い部分に引っ張ります。（画像の青い線です。）引っ張ったときにポップアップされたウィンドウから「dataSouce」と「delegate」を選択します。一度に一つしか選択できませんので、２回行ってください。

続いて、PickerViewの選択肢を表示するラベルを配置します。storybord上にユーティリティエリアからラベルを引っ張ってきます。（黒い線です。）下図赤い四角の中を変更すると最初に表示される文字を指定できます。今回は「選択してください」としました。

最後に、ラベルをViewController.swiftへの紐付け作業を行います。Connectionに「Outlet」、Nameに「label」（任意の名前でOK）を入力してConnectをクリックします。

２．「UIPickerViewDelegate」,「 UIPickerViewDataSource」を追加する

最初の class ViewControllerの記述ところで、「UIPickerViewDelegate」,「 UIPickerViewDataSource」を追加します。PickerViewを使う場合これを記述しておかないとエラーになりますのでご注意ください。

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource{

３．Picker Viewの選択肢を記述する

定数の配列を以下のように宣言します。
例えば今お腹空いているので今日の夜ご飯の選択肢にしました。

    //選択肢を記述
    let dataSelect = ["焼肉","ラーメン","中華","パスタ"]

４．Picker Viewの列数と行数の値を返す

この辺をしっかり記述しないとエラーが出てしまいます。最初私はここがよくわからなくて躓いてしまいました。

Picker Viewの列は今回１列しかありませんので1を返します。

    //PickerViewに表示する列数を返す
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }

Picker Viewの行は定数dataSelectの個数を返します。

    //PickerViewに表示する行数を返す
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return dataSelect.count
    }

５．Picker Viewの文字列の値を返す

dataSelectで代入した値をPickerViewに表示する値として返します。

     //Picker Viewに表示する値を返す
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return dataSelect[row]
              }

５．ラベルに表示させる

最後に選択した値をラベルに表示される記述をします。

    //Picker Viewで選択された値をラベルに表示する
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        label.text = "\(dataSelect[row])"
}

結果

以下のように表示させることができました。
なんとも味気ないレイアウトです。

実践をやってみた感想

とりあえず、やってみた感想として各論を勉強する前に実践した方が上達が早そうだなと思いました。

しかし、今回のこれを作るだけで休みの時間をかなり費やしました。勉強あるのみです。

参考全体のソース

import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    @IBOutlet weak var label: UILabel!


    //選択肢を記述
    let dataSelect = ["焼肉","ラーメン","中華","パスタ"]

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    //PickerViewに表示する列数を返す
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }

    //PickerViewに表示する行数を返す
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return dataSelect.count
    }

    //Picker Viewに表示する値を返す
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return dataSelect[row]
            //as? String
    }

     //Picker Viewで選択された値をラベルに表示する
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        label.text = "\(dataSelect[row])"
    }


    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}