iOSで配列からUIPickerViewをコードだけで作成する方法【Swift】

ピッカービュー（Picker View）は、ユーザーが回転操作によって項目を選択できる1つ以上のホイールを表示するUIコンポーネントです。各ホイールは「コンポーネント（component）」と呼ばれ、選択可能な項目がインデックス付きの行として並んでいます。

UIPickerViewはiOS開発における重要なコンポーネントの一つで、多くのアプリケーションで利用されています。特に、フォーム入力を伴うアプリでは頻繁に見かけるでしょう。

より詳細な情報は、Appleの公式ドキュメントを参照してください。
https://developer.apple.com/documentation/uikit/uipickerview

この記事では、ストーリーボードを使用せずに、配列のデータからUIPickerViewをコードだけで作成し、その値をピッカーに読み込ませる方法を解説します。

実装手順

ステップ1：プロジェクトを作成する

Xcodeを開き、Single View Applicationで新規プロジェクトを作成します。プロジェクト名は「PickerSample」としましょう。

ステップ2：ViewController.swiftを開く

今回はすべてコードで実装するため、ストーリーボードには一切触れません。ViewController.swiftファイルを開いてください。

ステップ3：UIPickerViewのインスタンスを生成する

まず、viewDidLoadメソッド内でUIPickerViewのオブジェクトを作成します。

let UIPicker: UIPickerView = UIPickerView()

ステップ4：デリゲートを設定し、画面中央に配置する

デリゲートとデータソースを設定した後、ピッカーを画面中央に配置してビューに追加します。

UIPicker.delegate = self as UIPickerViewDelegate
UIPicker.dataSource = self as UIPickerViewDataSource
self.view.addSubview(UIPicker)
UIPicker.center = self.view.center

ステップ5：クラスにプロトコルを準拠させる

ViewControllerクラスにUIPickerViewDelegateとUIPickerDataSourceを準拠させます。

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource

ステップ6：表示用のデータ配列を作成する

ピッカーに表示したいデータの配列を定義します。

let dataArray = ["English", "Maths", "History", "German", "Science"]

ステップ7：デリゲートメソッドを実装する

ピッカーの動作に必要なデリゲートメソッドを実装します。

func numberOfComponents(in pickerView: UIPickerView) -> Int {
    return 1
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    return dataArray.count
}
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
    let row = dataArray[row]
    return row
}

ステップ8：アプリを実行する

アプリをビルドして実行すると、画面中央に科目名が並んだピッカーが表示されます。

完成版のコード全体

import UIKit
class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
    let dataArray = ["English", "Maths", "History", "German", "Science"]
    override func viewDidLoad() {
        super.viewDidLoad()
        let UIPicker: UIPickerView = UIPickerView()
        UIPicker.delegate = self as UIPickerViewDelegate
        UIPicker.dataSource = self as UIPickerViewDataSource
        self.view.addSubview(UIPicker)
        UIPicker.center = self.view.center
    }
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return dataArray.count
    }
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        let row = dataArray[row]
        return row
    }
}