iOSでUIPickerViewを使って、連動した日、月、年の選択

2年 ago
結衣, 春花
1 minute

UIPickerViewで3つの列を使って、年月日の階層的な選択を実現します。各列は年、月、日を表します。ユーザーの選択に応じて、各列のデータを動的に更新します。

まず、UIViewControllerを作成し、その上にUIPickerViewを追加しましょう。その後、各列にデータソース及びデリゲートメソッドを設定します。

以下は簡単な実装のコード例です。

import UIKit
class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {
@IBOutlet weak var pickerView: UIPickerView!
let years = Array(1970...2021)
let months = Array(1...12)
let days = Array(1...31)
override func viewDidLoad() {
super.viewDidLoad()
pickerView.dataSource = self
pickerView.delegate = self
}
// MARK: - UIPickerViewDataSource
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 3
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
if component == 0 {
return years.count
} else if component == 1 {
return months.count
} else {
return days.count
}
}
// MARK: - UIPickerViewDelegate
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
if component == 0 {
return String(years[row])
} else if component == 1 {
return String(months[row])
} else {
return String(days[row])
}
}
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
let selectedYear = pickerView.selectedRow(inComponent: 0)
let selectedMonth = pickerView.selectedRow(inComponent: 1)
let selectedDay = pickerView.selectedRow(inComponent: 2)
let year = years[selectedYear]
let month = months[selectedMonth]
let day = days[selectedDay]
print("Selected date: \(year)-\(month)-\(day)")
}
}

この例では、３つの列があるUIPickerViewを作成しました。各列は、それぞれ年、月、日のデータを表示します。ユーザーが日付を選択すると、UIPickerViewDelegateメソッドを介して選択した値を取得して、それをプリントします。

このサンプルは単純なものにすぎません。UIPickerView の外観や動作のカスタマイズは必要に応じて行えますのでご注意ください。

bannerAds