[Swift5]同じビュー内に違う値を持つPickerViewを2つ表示する方法

2020年1月2日2021年8月22日

久々の更新、最近はiphoneのアプリ開発を勉強しています。
今日は、同一ビュー内に異なる値のPickerViewを表示したかったが
あまり、参考になるサイトが少なかったのでわかったことをメモしておく。
*あくまでメモなので参考程度に

1 まずは結果から
2 ソースコード全体
3 ポイント
4 さいごに

まずは結果から

まずは、動作結果を動画にしてみた。

PickerViewの使い方は、以下のサイトがわかりやすかった。

[iPhone] UIPickerView の基本的な設定 | iOS アプリ開発

UIPickerViewとはスロットマシーンのように選択肢が回転するものです。UIDatePickerはこのカスタムクラ ...

https://i-app-tec.com/ios/uipickerview.html

ソースコード全体

今回作成した全体のソースを表示する。
今回は、ゲームの参加人数と制限時間をPickerViewにしてみた。

import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
    
    @IBOutlet weak var joinnum_picker: UIPickerView!
    @IBOutlet weak var limitedtime_picker: UIPickerView!
    
    //参加人数
    let JoinNum = ["4","5","6","7","8","9","10"]
    //制限時間
    let limitTime = ["3:00","5:00","7:00","10:00"]
    
    //表示するリストの数
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    //表示する配列の数
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        if pickerView.tag == 1{
            return JoinNum.count
        } else if pickerView.tag == 2{
            return limitTime.count
        } else {
            return JoinNum.count
        }
    }
    
    //データを返すメソッド
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        
        if pickerView.tag == 1{
            return JoinNum[row]
        } else if pickerView.tag == 2{
            return limitTime[row]
        } else {
            return JoinNum[row]
        }
    }
    
    //データ選択時の呼び出しメソッド
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        //pickerviewの設定、tagで表示内容を分ける
        joinnum_picker.delegate = self
        joinnum_picker.dataSource = self
        joinnum_picker.tag = 1
        limitedtime_picker.delegate = self
        limitedtime_picker.dataSource = self
        limitedtime_picker.tag = 2
    }


}

ポイント

まず、viewDidLoadないでpickerviewの定義をする時に
tagを設定する、これが複数使用する時のポイントのようだ。

        joinnum_picker.delegate = self
        joinnum_picker.dataSource = self
        joinnum_picker.tag = 1
        limitedtime_picker.delegate = self
        limitedtime_picker.dataSource = self
        limitedtime_picker.tag = 2

後は、複数定義をしたい所をtagごとに処理わけすれば問題なさそう

//表示する配列の数
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        if pickerView.tag == 1{
            return JoinNum.count
        } else if pickerView.tag == 2{
            return limitTime.count
        } else {
            return JoinNum.count
        }
    }
    
    //データを返すメソッド
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        
        if pickerView.tag == 1{
            return JoinNum[row]
        } else if pickerView.tag == 2{
            return limitTime[row]
        } else {
            return JoinNum[row]
        }
    }