The Picker has been around since iOS 2 and is known as the UIPickerView in UIKit. It joined SwiftUI in iOS 13 as “Picker”. As well as the Picker view, there is also the DatePicker view that you will also be familiar with using in apps.
The regular Picker also has a modifier called .pickerStyle that you can attach to that view where you can pass in various picker styles that conform to the PickerStyle protocol. In this tutorial we’ll look over some of these to show you ways how you might provide ways for your users to input the required information.
Setting up Pickers
struct ContentView: View {
@State private var selectedVehicle = "Lamborghini"
@State private var selectedColor = Color.green
@State private var selectedDate = Date()
let vehicles = ["Lamborghini", "Ferrari", "McLaren", "McMurtry", "Rimac"]
let colors: [Color] = [.red, .green, .blue, .yellow, .purple, .gray]
var body: some View {
ScrollView {
VStack(spacing: 30) {
// Selection Picker with Wheel Style
Text("Select Your Favorite Vehicle (Wheel Style):")
.font(.headline)
Picker("Select a vehicle", selection: $selectedVehicle) {
ForEach(vehicles, id: \.self) { vehicle in
Text(vehicle)
}
}
.pickerStyle(WheelPickerStyle())
// Selection Picker with Segmented Style
Text("Select Your Favorite Vehicle (Segmented Style):")
.font(.headline)
Picker("Select a vehicle", selection: $selectedVehicle) {
ForEach(vehicles, id: \.self) { vehicle in
Text(vehicle)
}
}
.pickerStyle(SegmentedPickerStyle())
// Selection Picker with Menu Style
Text("Select Your Favorite Vehicle (Menu Style):")
.font(.headline)
Picker("Select a vehicle", selection: $selectedVehicle) {
ForEach(vehicles, id: \.self) { vehicle in
Text(vehicle)
}
}
.pickerStyle(MenuPickerStyle())
// Inline Picker with Label
Text("Select a Color (Inline Style):")
.font(.headline)
Picker("Select a color", selection: $selectedColor) {
ForEach(colors, id: \.self) { color in
Text(color.description)
.foregroundColor(color)
.tag(color)
}
}
.pickerStyle(InlinePickerStyle())
Group {
Text("Pick a Date:")
.font(.headline)
DatePicker("", selection: $selectedDate, displayedComponents: .date)
.datePickerStyle(WheelDatePickerStyle())
.padding()
Text("DefaultDatePickerStyle")
DatePicker("Select a Date", selection: $selectedDate)
.datePickerStyle(DefaultDatePickerStyle())
Text("GraphicalDatePickerStyle")
DatePicker("", selection: $selectedDate)
.datePickerStyle(GraphicalDatePickerStyle())
}
Text("You selected: \(selectedVehicle) - \(selectedColor.description)")
.font(.title2)
.foregroundColor(selectedColor)
}
.padding()
}
}
}
Lines 2 – 4 contain @State property wrappers for vehicle, colour, and Date. We use @State so that the view can update any time one of the variables changes.
On lines 6 and 7 we create two arrays. The first being an array of String that contains five vehicle manufacturers. The other line contains an array of Color.
Line 10 is inside the body of the view and wraps everything in a ScrollView as we have several pickers to show which are longer than the screen.
The first type of Picker we use is the Wheel Picker. We declare it on line 15 as a Picker, and on line 20 we apply the WheelPickerStyle in the .pickerStyle modifier. This particular picker is just a generic single wheel that you can spin up and down by providing it an array. You specify the Text for each line on line 17. Because there isn’t much to this Picker, it is recommended that you organise the contents of the array into an order that makes sense (alphabetical for example).
On line 25 we declare our next Picker. It is created the same as the previous one, but we change the style to SegmentedPickerStyle() on line 30. Because we bind to $selectedVehicle for this and the previous Picker, when one changes, so does the other.
The same Picker is used on line 35, but this time with the MenuPickerStyle() added in the view modifier.
The last one in this section is declared on line 45 and is set to the style “InlinePickerStyle()”. The only difference here is that we base this Picker on the selectedColor and because the array of colours that we loop over contains Colors and not Strings, we can access the colours description to provide the text, but also pass in the colours on lines 48 and 49 to set the foregroundColor and tag.
The DatePickers
Line 58 is where the the first DatePicker is declared. It uses the .datePickerStyle view modifier and uses WheelDatePickerStyle(). I took the title off of this because it squashes to the left of the picker and goes vertical. We bind to $selectedDate so that any updates here will cause any other reference to be updated.
The next DatePicker is declared on line 63 where we set the style to be a DefaultDatePickerStyle.
The final DatePicker we use is declared on line 67 which uses the GraphicalDatePickerStyle.
All three work similar with the exception of the first where we passed in the displayComponents we wanted to use.
Overall, Pickers and DatePickers provide a simple way for your users to select data either provided from an array, or select a date from the calendar. There are various options to suit your needed. Please do reach out with any questions.
Leave a Reply
You must be logged in to post a comment.