[SwiftUI]Pickerを作成する

目次

概要

Pickerはユーザーに何か選択して欲しい時、特に項目数が多いものに対して使われる。
(例として、国、都道府県、時刻など)

結論

最低限の実装となると、以下のようなコードで実装ができる

Picker("", selection: [選択したものを代入する変数(@State)]) {
    ForEach([配列], id: \.self) { [配列の各要素] in
        Text(表示したい文字列).tag(タグ)
    }
}

デフォルトのPickerのソースコード

一つはタップしたらリストが表示されるパターン(デフォルト)

デモ動画

これはかつて大きな話題になった、「幼馴染と金持ちお嬢様のどちらと結婚するか」というイベントのセリフです笑

プログラミングを人に教える時は専門用語を使って説明してはいけないと思ってる。

くるくる回る感じのPicker

この方が見覚えある人は多いかも。

import SwiftUI

struct PickerView: View {
    let range: [Range<Int>] = [0..<24, 0..<60, 0..<60]
    @State var selectedTime: [Int] = [0, 0, 0]
    
    var body: some View {
        timePicker()
    }
    
    // 時間を設定するピッカー
    private func timePicker() -> some View {
        return VStack {
            HStack {
                // 設定した時間を表示する
                Text(String(format: "%02d", selectedTime[0]))
                    .font(.system(size: 20))
                
                ForEach(1..<selectedTime.count, id:\.self) { index in
                    Text(":")
                        .font(.system(size: 20))
                    Text(String(format: "%02d", selectedTime[index]))
                        .font(.system(size: 20))
                }
            }
            HStack {
                // 時間のピッカー群
                hhmmssSelectPicker(index: 0)
                ForEach(1 ..< range.count, id: \.self) { index in
                        Text(":")
                    hhmmssSelectPicker(index: index)
                }
            }
        }
    }
    
    // HH:mm:ssのそれぞれの要素を表示するピッカー
    private func hhmmssSelectPicker(index: Int) -> some View {
        return HStack {
            Picker("", selection: $selectedTime[index] ) {
                ForEach(range[index], id: \.self) { time in
                    // ピッカーの内容は二桁表示固定
                    Text(String(format: "%02d", time)).tag(time)
                }
            }
            .pickerStyle(WheelPickerStyle())
        }
    }
}

デモ動画

ただ、これは時計に使うのは良くないな。時計を使うならDatePickerを使用した方がよさそう。
そちらを使った方がループできるらしいし。

詳細

.disabled(true)とすることで、Pickerの値を固定することができる

Pickerの種類は以下があるとのこと(Apple公式ページ

設定値内容
DefaultPickerStyle何も設定しないとこのスタイルになる。
InlinePickerStyleインライン形式
MenuPickerStyleUIをタップするとメニューが表示される
RadioGroupPickerStyleラジオボタン形式(Mac向けのみ)
SegmentedPickerStylesegmented control形式
WheelPickerStyleくるくる回る感じのもの

イメージ

InlinePickerStyle

MenuPickerStyle

SegmentedPickerStyle

WheelPickerStyle