こんにちは!株式会社メモリアインクのふくしまです!
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)"
}
}
サンプルコードの説明:基本設定
◾️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始まり)で、これにより各選択肢が一意に識別されます。
動作確認
ビルドして、動作確認してみましょう!
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?
パラメータは、これらのカスタマイズされたビューを再利用するために提供されています。これは、特に大量のデータを扱う場合や、パフォーマンスを最適化したい場合に重要です。
動作確認
それではビルドして、動作確認してみましょう!
まとめ
いかがでしたか?UIPickerView
は、SwiftにおけるiOSアプリ開発で不可欠なコンポーネントの一つです。基本的な使い方からカスタマイズの方法までを分かりやすく解説しました。
本記事が、今後の皆様の開発ライフの一助になれれば幸いです!
この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
コメント