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

この記事からわかること
- Swift/UIKitのUIPickerViewの実装方法と使い方
- 選択時に処理を実行するには?
- UIPickerViewDelegateやUIPickerViewDataSourceとは?
- デフォルトの選択項目を変更するには?
index
[open]
\ アプリをリリースしました /
SwiftのUIKitで選択可能なピッカービューを構築するUIPickerViewについてまとめていきます。

UIPickerView
@MainActor class UIPickerView : UIView
UIPickerView
はUILabel
などと同じUIViewを継承しているUI部品の1つで複数の選択肢から項目を選択できるビューを構築できるクラスです。
おすすめ記事:【Swift/UIKit】UIViewクラスとは?使い方やプロパティまとめ
実装の手順
今回はStoryboardを使用した実装方法です。
- StoryboardからUIを配置
- UIPickerViewのアウトレット変数を定義
- 表示させる項目を定義(dataSource)
- デリゲートを指定(delegate)
おすすめ記事:【Swift】delegate(デリゲート)とは?使い方とメリット
実装するにはUITableView
などと同様にdataSource
とdelegate
を設定する必要があります。そのためにViewControllerクラスにはUIPickerViewDelegate
とUIPickerViewDataSource
プロトコルの準拠が必要になります。
おすすめ記事:【Swift UIKit】UITableViewの使い方!リストビューの実装方法
必要となるデリゲートメソッド
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
メソッドを使用します。
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つ目
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。
個人開発に限界を感じたらiOSに特化したプログラミングスクール「iOSアカデミア」も検討してみてください!無料相談可能で「最短・最速」でiOSエンジニアになれるように手助けしてくれます。