SwiftUI – How to create a multi-component picker

Share on facebook
Share on twitter
Share on pinterest

We already talked about how to create Pickers and date pickers in SwiftUI. However, it seems that in SwiftUI it’s currently not possible to create a custom picker with multiple components/sections. Well, here’s a little work-around!

Step 1: Create one State for every component of your picker for keeping track of which value of the particular section is currently selected.

struct ContentView: View {
    
    @State var day = 0
    @State var hourSelection = 0
    @State var minuteSelection = 0
    
    var body: some View {
        //...
    }
}


Step 2: Create the data sets for your sections. In our example we created 23 integers for the hours and 59 integers for the minutes.⠀

@State var day = 0
    @State var hourSelection = 0
    @State var minuteSelection = 0
    
    var days = [Int](0..<30)
    var hours = [Int](0..<24)
    var minutes = [Int](0..<60)
    
    var body: some View {
        //...
    }


Step 3: Create a Geometry Reader for knowing the overall view’s size. Especially, we need to know the view’s width since we want each component to of the picker to be equally wide. If you want to know more about how GeometryReaders in SwiftUI work, check out our Instagram post.⠀

var body: some View {
        GeometryReader { geometry in
            
        }
    }


Step 4: Inside a HStack, create one single picker for every component. In our example we created one picker for the days, one for the hours, and one for the minutes. ⠀

HStack {
                Picker(selection: self.$day, label: Text("")) {
                    ForEach(0 ..< self.days.count) { index in
                        Text("\(self.days[index]) d").tag(index)
                    }
                }
                Picker(selection: self.$hourSelection, label: Text("")) {
                    ForEach(0 ..< self.hours.count) { index in
                        Text("\(self.hours[index]) h").tag(index)
                    }
                }
                Picker(selection: self.$minuteSelection, label: Text("")) {
                    ForEach(0 ..< self.minutes.count) { index in
                        Text("\(self.minutes[index]) m").tag(index)
                    }
                }
            }


Step 5: Each picker component should be equally wide. So take the geometry size width and divide it by the number of components. Take this value for the width argument of the .frame modifier for every picker.⠀

HStack {
                Picker(selection: self.$day, label: Text("")) {
                    //...
                }
                    .frame(width: geometry.size.width/3, height: 100, alignment: .center)
                Picker(selection: self.$hourSelection, label: Text("")) {
                    //...
                }
                    .frame(width: geometry.size.width/3, height: 100, alignment: .center)
                Picker(selection: self.$minuteSelection, label: Text("")) {
                    //...
                }
                    .frame(width: geometry.size.width/3, height: 100, alignment: .center)
            }


This is how your preview should look like now:


That’s all! You can now use the selection states for subscripting the selected values out of your data sets. And that is how to create multi component Pickers in SwiftUI!

If you want to learn more about SwiftUI, make sure you check out our free SwiftUI Basics eBook and our other tutorials! Also make sure you follow us on Instagram and subscribe to our newsletter to not miss any updates, tutorials and tips about SwiftUI and more!

One reply on “SwiftUI – How to create a multi-component picker”

Due to the overlapping of pickers you can’t scroll well in picker . So if you use .clipped( ) after .frame( ), you can cut the overlapping lines. Also add spacing: 0 to HStack after clipped to merge them.

Leave a Reply

Your email address will not be published. Required fields are marked *

small_c_popup.png

Covid-19 Forces you into quarantine?

Start Mastering swiftUI Today save your 33% discount

small_c_popup.png

Are you ready for a new era of iOS development?

Start learning swiftUI today - download our free e-book