完全に理解する Storyboard & UIKit (Day 23): UIDatePickerやUIPickerViewの実装

ユーザーに「生年月日」や「都道府県」を入力してもらう際、普通の文字入力（UITextField）を使うと形式の揺れ（例: "2023/1/1" と "2023年01月01日"）が発生し、エラー処理が非常に面倒になります。

iOSには、これらを直感的に、かつフォーマットを統一して入力させるための2つの優れたピッカー・コンポーネントが用意されています。

1. UIDatePicker (日付と時間の入力)

UIDatePicker は、日付や時間を入力するための専用コンポーネントです。iOS 14でデザインが大きく刷新されました。

Storyboardでの設定 (Attributes Inspector)

1. Style: 表示スタイル。iOS 14以降の選択肢は以下の通りです。
   • Compact: デフォルト。小さなボタンとして表示され、タップするとカレンダーがポップアップします。レイアウトを崩さず省スペースで済むため推奨されます。
   • Inline: 常にカレンダー全体が画面に展開された状態で表示されます。
   • Wheels: 昔ながらのドラムロール（スロットマシン）形式です。
2. Mode: 選択させる内容。
   • Date (年月日), Time (時刻), Date and Time (両方), Count Down Timer (タイマー用) の4種類。
3. Locale: 「日本語」を指定すると、年月日の順序などが日本向けになります。

コードで値を取得する

値が変更された時のイベントは、Buttonのクリックと同様に IBAction (Event: Value Changed) で受け取ります。

swift
@IBOutlet weak var dateLabel: UILabel!

// Value Changed イベントで接続
@IBAction func datePickerValueChanged(_ sender: UIDatePicker) {
    // sender.date で Dateオブジェクト(現在選ばれている日時)が取得できる
    let selectedDate: Date = sender.date

    // DateFormatterを作って文字列(String)に変換するのが定石
    let formatter = DateFormatter()
    formatter.dateFormat = "yyyy年MM月dd日 HH:mm"

    dateLabel.text = formatter.string(from: selectedDate)
}

2. UIPickerView (任意の選択肢入力)

「都道府県」や「血液型」など、任意の配列データから一つを選ばせたい場合は UIPickerView（ドラムロール形式のUI）を使います。

こちらは UITableView（Day 15参照） と仕組みが非常によく似ており、DataSource と Delegate プロトコル を使ってセルの数や文字を提供します。

実装ステップ

1. Storyboardに Picker View を配置し、IBOutlet で接続します。

swift
class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {

    @IBOutlet weak var myPickerView: UIPickerView!

    let bloodTypes = ["A型", "B型", "O型", "AB型"]

    override func viewDidLoad() {
        super.viewDidLoad()

        // 担当者（自分）を登録
        myPickerView.dataSource = self
        myPickerView.delegate = self
    }

    // --- DataSource ---
    // ① 列（コンポーネント）の数。通常は1列なので `1` を返す
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }

    // ② 行の数。配列の要素数を返す
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return bloodTypes.count
    }

    // --- Delegate ---
    // ③ 各行に表示する文字列(String)を返す
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return bloodTypes[row]
    }

    // ④ ドラムロールが止まり、値が選択された時の処理
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        let selectedValue = bloodTypes[row]
        print("選択されたのは: \(selectedValue)")
    }
}

💡 応用: 選択肢をキーボードの代わりに出す（超実践的）

設定画面などでは、Pickerを画面に常に表示しておくのではなく、「UITextFieldをタップすると、文字キーボードの代わりにPickerが下から現れる」というUXが一般的です。

なんと、わずか数行で実装可能です。

swift
// viewDidLoad内
let customPicker = UIPickerView()
customPicker.dataSource = self
customPicker.delegate = self

// 魔法の1行：TextFieldの入力View（キーボード）をPickerに差し替える！
myTextField.inputView = customPicker

📝 今日のまとめ

• UIDatePicker: 日付・時刻選択用。iOS 14以降の Compact スタイルを使うのがモダン。DateFormatter を使ってStringに変換する。
• UIPickerView: 配列から任意の値を選択させるドラムロール。実装には DataSource と Delegate が必要。
• TextFieldの inputView プロパティにPickerを代入すると、キーボードの代わりにPickerを下から表示させることができる。

iOS特有の美しい入力インターフェースの使い分けができるようになりました。 明日の Day 24 からは第6部「中〜上級テクニックとモダンな開発」に入り、複数人開発（Git管理）においてStoryboard最大の弱点となる「競合（コンフリクト）」を回避するための強力な設計手法、Storyboard Reference を用いた分割術を学びます。