【Swift】ピッカー(UIPickerView)の基本的な使い方からカスタムする方法まで徹底解説！

2024年3月9日2024年4月2日

ふくしま

こんにちは！株式会社メモリアインクのふくしまです！

SwiftにおけるUIPickerViewは、ユーザーが複数の選択肢から一つを選び出すための便利なUIコンポーネントです。この記事では、Swift 5.9とXcode 15を使用して、UIPickerViewの基本的な使い方から、カスタム方法、さらには応用的な使い方までをわかりやすく解説していきます。

この記事を読んで分かること…
・UIPickerViewとは？
・UIPickerViewの基本的な設定方法
・UIPickerViewのカスタマイズ方法

UIPickerViewとは？

UIPickerViewはiOSアプリケーション開発で使用されるUIKitフレームワークに含まれるUIコンポーネントの一つです。ユーザーが複数の選択肢の中から一つまたは複数を選ぶことができるスクロール可能なリストを提供します。一般的には、日付、時間、または任意のカスタムデータセットからの選択に使われます。

UIPickerViewの基本設定

データの提供とユーザー選択の取得には、UIPickerViewDataSourceとUIPickerViewDelegateプロトコルを実装します。

サンプルコード：基本設定

import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
    var pickerView = UIPickerView()

    override func viewDidLoad() {
        super.viewDidLoad()
        pickerView.delegate = self
        pickerView.dataSource = self
        pickerView.center = view.center
        view.addSubview(pickerView)
    }

    // ピッカーに表示する列数
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }

    // 各列の行数
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return 5
    }

    // 各行のタイトル
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return "選択肢 \(row)"
    }
}

サンプルコードの説明：基本設定

◾️３行目：UIPickerViewのデリゲート(delegate)とデータソース(dataSource)のプロトコルに準拠しています。これにより、ピッカービューの振る舞いや表示内容をカスタマイズできます。
◾️４行目：UIPickerViewインスタンスを作成し、viewControllerのプロパティとして保持します。これは、画面にピッカービューを表示するために使用されます。
◾️６−１２行目：ここで、ピッカービューのデリゲートとデータソースを自身に設定し、ビューの中心に配置しています。最後に、このピッカービューを親ビューのサブビューとして追加しています。
◾️１５−１７行目：numberOfComponents(in:)メソッドは、ピッカービューに表示される列の数を返します。この例では1列だけを表示します。
◾️２０−２２行目：pickerView(_:numberOfRowsInComponent:)メソッドは、特定の列における行の数を返します。ここでは、どの列も5行のデータを持っていることを示しています。
◾️２５−２７行目：pickerView(_:titleForRow:forComponent:)メソッドは、特定の行と列に表示されるテキストを返します。この例では、各行に”選択肢 X”と表示されます。Xは行の番号（0始まり）で、これにより各選択肢が一意に識別されます。

動作確認

ふくしま

ビルドして、動作確認してみましょう！

UIPickerViewのカスタマイズ方法

UIPickerViewの見た目や挙動をカスタマイズすることで、アプリのブランドやデザインに合わせることができます。

サンプルコード：カスタマイズ

// この部分は「サンプルコード：基本設定」のサンプルコードと連携しています。
// pickerView(_:viewForRow:forComponent:reusing:) メソッドを使って行のカスタマイズを行います。
・・・

    // 各行のタイトルやカスタマイズ
    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
        var label: UILabel
        if let view = view as? UILabel {
            label = view
        } else {
            label = UILabel()
        }
        label.textAlignment = .center
        label.text = "カスタム選択肢 \(row)"
        label.font = UIFont.systemFont(ofSize: 18, weight: .medium) // フォントサイズとウェイトをカスタマイズ
        label.textColor = UIColor.blue // テキストの色を青色にカスタマイズ
        label.backgroundColor = UIColor.lightGray // ラベルの背景色を薄灰色にカスタマイズ
        return label
    }
}

サンプルコードの説明：カスタマイズ

サンプルコード：基本設定のpickerView(_:titleForRow:forComponent:)メソッドをpickerView(_:viewForRow:forComponent:reusing:)メソッドに書き換えて実装します。

◾️６行目：UIPickerViewの特定の行に表示するビューを提供するメソッドを定義します。rowパラメータは表示する行のインデックス、componentは列のインデックス、reusing viewは再利用可能なビュー（この場合は前にこのメソッドが生成したUILabelが再利用される可能性がある）です。
◾️８−１２行目：再利用可能なビュー（reusing view）がUILabelであれば、そのビューをlabel変数に割り当てます。そうでない場合は、新しいUILabelインスタンスを作成してlabelに割り当てます。
◾️１３−１７行目：中央揃えで「カスタム選択肢 X」というテキストが設定され、フォントサイズは18、フォントウェイトはmedium、テキストの色は青色、背景色は薄灰色にカスタム

viewForRowメソッドを使用するサンプルでは、より複雑なビューのカスタマイズを行います。このメソッドは、ラベルのフォント、色、背景色などをカスタマイズする場合や、画像を含むようなより複雑なビューを行に表示する場合に使われます。reusing view: UIView?パラメータは、これらのカスタマイズされたビューを再利用するために提供されています。これは、特に大量のデータを扱う場合や、パフォーマンスを最適化したい場合に重要です。