2023/1/17

【Swift】UIPickerViewの使い方！選択された値を取得する方法

この記事からわかること

Swift/UIKitのUIPickerViewの実装方法と使い方
選択時に処理を実行するには?
UIPickerViewDelegateやUIPickerViewDataSourceとは？
デフォルトの選択項目を変更するには?

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

SwiftのUIKitで選択可能なピッカービューを構築するUIPickerViewについてまとめていきます。

公式リファレンス：UIPickerView

UIPickerView

@MainActor  class UIPickerView : UIView

UIPickerViewはUILabelなどと同じUIViewを継承しているUI部品の1つで複数の選択肢から項目を選択できるビューを構築できるクラスです。

実装の手順

今回はStoryboardを使用した実装方法です。

StoryboardからUIを配置
UIPickerViewのアウトレット変数を定義
表示させる項目を定義(dataSource)
デリゲートを指定(delegate)

実装するにはUITableViewなどと同様にdataSourceとdelegateを設定する必要があります。そのためにViewControllerクラスにはUIPickerViewDelegateとUIPickerViewDataSourceプロトコルの準拠が必要になります。

必要となるデリゲートメソッド

2つのプロトコルに準拠させたことでPickerViewを構築するために必要なデリゲートメソッドを呼び出せるので、任意の値や処理を渡してピッカービューの設定をします。最低限必要になるのは以下の3つのメソッドです。

import UIKit

class ViewController: UIViewController,UIPickerViewDelegate, UIPickerViewDataSource {
      
    // 列数 ：UIPickerViewDataSource
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        //
    }
    
    // 行数 ：UIPickerViewDataSource
    func pickerView(_ pickerView: UIPickerView,numberOfRowsInComponent component: Int) -> Int {
      // 
    }
    
    // 表示する行データ ：UIPickerViewDelegate
    func pickerView(_ pickerView: UIPickerView,titleForRow row: Int,forComponent component: Int) -> String? {
      //
    }
}

公式リファレンス：UIPickerViewDelegate
公式リファレンス：UIPickerViewDataSource

Storyboardでの実装方法

実際にStoryboardを使用してPickerViewを実装する方法を見ていきます。

流れ

StoryboardからUIを配置
ViewControllerクラスに各プロトコルを準拠
アウトレット変数の定義
Storyboard(またはviewDidLoad内)から変数とdelegateなどを紐付け
元データとなる配列を用意
必要なデリゲートメソッドを定義

import UIKit

class ViewController: UIViewController,UIPickerViewDelegate, UIPickerViewDataSource {
    
    // アウトレット変数を定義して紐付け
    @IBOutlet  var pickerView: UIPickerView!
    
    let sourceList  = ["HTML","CSS","PHP","JavaScript","Swift"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // コードで紐付けする場合
        // pickerView.delegate = self
        // pickerView.dataSource = self
    }
    // 列数
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    // 列数
    func pickerView(_ pickerView: UIPickerView,numberOfRowsInComponent component: Int) -> Int {
      return sourceList.count
    }
    
    // 最初に選択状態にする行データ
    func pickerView(_ pickerView: UIPickerView,titleForRow row: Int,forComponent component: Int) -> String? {
      return sourceList[row]
    }
}

選択された際に処理を実行する

ピッカーから値を選択された際に任意の処理を実行させるためにはpickerView(_:didSelectRow:inComponent:)を使用します。

func pickerView(_ pickerView: UIPickerView,didSelectRow row: Int,inComponent component: Int){
    print(sourceList[row])
}

デフォルトの選択項目を変更する

公式リファレンス：selectRow

ピッカーが最初に選択している項目を変更したい場合はselectRowメソッドを使用します。

func selectRow(
    _ row: Int,
    inComponent component: Int,
    animated: Bool
)

1つ目の引数にはデフォルトで選択させたい行番目を、2つ目には多次元の場合は列数を、3つ目にはアニメーションを実装するかを選択できます。

self.pickerView.selectRow(0,inComponent: 0, animated:true) // 1つ目
self.pickerView.selectRow(1,inComponent: 0, animated:true) // 2つ目
self.pickerView.selectRow(2,inComponent: 0, animated:true) // 3つ目
self.pickerView.selectRow(0,inComponent: 1, animated:true) // 2列ある場合の2列目の2つ目

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

Swift