【Swift5】UIPickerViewで2列のピッカーを作る。

UIPickerViewで2列のを作りたかったのですがやり方が分からず少し悩みました。

UIPickerViewの参考サイト
【swift】UIPickerViewを作ってみる(ドラムロール)|株式会社イーガオ
[iPhone] UIPickerView の基本的な設定

特に指定せずとも、一列目がcomponentが0で、二列目が1で良いようです。

簡単にラベル2つとUIPickerViewを配置します。
スクリーンショット 2019-04-07 20.19.07

Classに UIPickerViewDelegate, UIPickerViewDataSource を追加して、
それぞれ
pickerView.delegate = self
pickerView.dataSource = self
でつなぎます。
あとは列数は2,行数と、タイトルと、選択時の動作はswitchのcomponentで分岐します。
以下コード。

import UIKit

class ViewController: UIViewController,UIPickerViewDelegate, UIPickerViewDataSource {

    @IBOutlet weak var label1: UILabel!
    @IBOutlet weak var label2: UILabel!
    @IBOutlet weak var pickerView: UIPickerView!
    let list1:[String] = ["1","2","3","4","5","6","7"]
    let list2:[String] = ["いち","に","さん","よん","ご",]
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        pickerView.delegate = self
        pickerView.dataSource = self
        //ピッカーの初期値
//        pickerView.selectRow(<#T##row: Int##Int#>, inComponent: <#T##Int#>, animated: <#T##Bool#>)
        pickerView.selectRow(0, inComponent: 0, animated: false)
        pickerView.selectRow(1, inComponent: 1, animated: false)
        
    }
    
    // ドラムロールの列数
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 2
    }
    
    // ドラムロールの行数
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        switch component {
        case 0:
            return list1.count
        case 1:
            return list2.count
        default:
            return 0
        }
    }

    // ドラムロールの各タイトル
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        switch component {
        case 0:
            return list1[row]
        case 1:
            return list2[row]
        default:
            return "error"
        }
    }
    
    // ドラムロール選択時
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        switch component {
        case 0:
            label1.text = list1[row]
        case 1:
            label2.text = list2[row]
        default:
            break
        }
    }
}

switch文のdefaultは適当です。
動かすと味気ない画面ですがちゃんと動きます。
スクリーンショット 2019-04-07 20.27.35

二列ではなく、画面に複数のUIPickerViewを使いたいときはtagを使うと良いようです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です