【2024年10月】弊社では副業案件希望の方を募集しております。<例>土日稼働可等。 詳細はこちら

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

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

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

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

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

目次

UIPickerViewとは?

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

UIPickerViewの基本設定

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

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

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)"
    }
}

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

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

動作確認

ふくしま

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

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

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:)メソッドに書き換えて実装します。

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

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

動作確認

ふくしま

それではビルドして、動作確認してみましょう!

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

まとめ

いかがでしたか?
UIPickerViewは、SwiftにおけるiOSアプリ開発で不可欠なコンポーネントの一つです。基本的な使い方からカスタマイズの方法までを分かりやすく解説しました。
本記事が、今後の皆様の開発ライフの一助になれれば幸いです!

ふくしま

この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次