Last run on Xcode 14.2, iOS 16.2, and Swift 5.7.2

Picker View for Time Durations Link to heading

In my Timer app, I needed a Picker View for taking the timer interval from the user. Sadly, at this moment SwiftUI does not come with a built in View that I needed for my use case. However, SwiftUI does provide the building blocks to create such a view.

1 Picker UI Link to heading

SwiftUI comes with a Picker View that can be used to select from a set of exclusive values.

SwiftUI comes with a Picker View that can be used to select from a set of exclusive values. You create a picker by providing a selection binding, a label, and the content for the picker to display. The selection parameter is set to a bound property that provides the value to display as the current selection. The label describes the purpose of selecting content in the picker visually, and the content for the picker is provided to display.

Here’s a code sample that creates a dropdown menu for the 24 hours of a day:

@State var timerHH: Int = 3
Picker("HH", selection: $timerHH) {
    ForEach(0..<24) {
        Text("\($0) hours")
    }
}

2 Picker Style Link to heading

The default style is a dropdown menu list. However, to get a wheel style view similar to the default Timer App, all we need to do is use a modifier called .pickerStyle to select the .wheel style. There are few other styles to choose from like .segmented, .menu, etc

@State var timerHH: Int = 3
Picker("HH", selection: $timerHH) {
    ForEach(0..<24) {
        Text("\($0) hours")
    }
    .pickerStyle(.wheel)
}

3. Combine the Pickers Link to heading

Since three pickers are needed, one for each interval breakdown of hours, minutes, and seconds, you can use an HStack.

@State var timerHH: Int = 3
@State var timerMM: Int = 15
@State var timerSS: Int = 30

HStack {
    Picker("HH", selection: $timerHH) {
        ForEach(0..<24) {
            Text("\($0) hours")
        }
    }
    .pickerStyle(.wheel)
    Picker("MM", selection: $timerMM) {
        ForEach(0..<60) {
            Text("\($0) min")
        }
    }
    .pickerStyle(.wheel)
    Picker("SS", selection: $timerSS) {
        ForEach(0..<60) {
            Text("\($0) sec")
        }
    }
    .pickerStyle(.wheel)
}

Code Listing Link to heading

Here is the complete code listing to create a Picker View for Time Durations.

import SwiftUI

struct TimerPickerView: View {
    @Binding var timerHH: Int
    @Binding var timerMM: Int
    @Binding var timerSS: Int

    var body: some View {
        HStack {
            Picker("HH", selection: $timerHH) {
                ForEach(0..<24) {
                    Text("\($0) hours")
                }
            }
            .pickerStyle(.wheel)
            Picker("MM", selection: $timerMM) {
                ForEach(0..<60) {
                    Text("\($0) min")
                }
            }
            .pickerStyle(.wheel)
            Picker("SS", selection: $timerSS) {
                ForEach(0..<60) {
                    Text("\($0) sec")
                }
            }
            .pickerStyle(.wheel)
        }
    }
}

struct TimerPickerView_Previews: PreviewProvider {
    static var previews: some View {
        TimerPickerView(timerHH: .constant(3), timerMM: .constant(15), timerSS: .constant(30))
    }
}