SwiftUI Wheel 10:00

Wheelを使って時間だけ表示したい

SwiftUIには、Wheelを使うと日付と時間を表示する機能がありますが、時間だけ表示して、保存する機能を作るUIを作りたい場面が出てきました。例えば、お店の営業時間を記録するとか。

DatePickerを使えばできるが工夫が必要だった。数字だけの表示はできたが、labelのテキストのようなものと並んで表示されると、間に空白が多く空いてしまう。class modifierの.padding(.horizontal, 100)で外側から、余白を入れて感覚を狭めると解決した。

DatePicker("時間", selection: $selectedDate, displayedComponents: .hourAndMinute)
                .environment(\.locale, Locale(identifier: "ja_JP"))
                .padding(.horizontal, 100)// 水平方向のpaddingを調整
                .padding(.bottom, 20)

全体のコード

@Stateで、Date型の状態変数を定義することで、時間を保存する機能を作ることができます。おまけですけど、ボタンを押すと、データ型を調べることができるログを出す機能を実装してます。Cloud Firestoreに保存するときは、おそらくTimestampに変換する必要があると思う。

import SwiftUI

struct ContentView: View {
    @State private var selectedDate = Date()
    
    var body: some View {
        VStack {
            DatePicker("時間", selection: $selectedDate, displayedComponents: .hourAndMinute)
                .environment(\.locale, Locale(identifier: "ja_JP"))
                .padding(.horizontal, 100)// 水平方向のpaddingを調整
                .padding(.bottom, 20)
            
            Text("Hello, world!")
            
            Button("変数の型をログに出力") {
                let typeOfSelectedDate = Mirror(reflecting: selectedDate).subjectType
                print("selectedDateの型: \(typeOfSelectedDate)")
            }
            .padding(.top, 20)
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Wheelの箇所をタップする。

時間が、4:52と表示された。これで、例えば営業時間が、18:30と入力することができるようになると思われます。

感想

Wheelがあるのは、iOS独特だなと思いました。操作する時に、「じー」って音がしたり、「カリカリ」いって回るのが好きですね。Androidでも一応実装できるようですが...