Multi-Segment Picker in SwiftUI

iOSMultiSegmentPickerSwiftUI.swift

import SwiftUI
import PlaygroundSupport

struct MultiSegmentPickerViewModel {
    typealias Label = String
    typealias Selection = Binding<Int>
    typealias PickerDisplayValues = [String]
    
    let segments: [(Label, Selection, PickerDisplayValues)]
}

struct MultiSegmentPickerView: View {
    
    let viewModel: MultiSegmentPickerViewModel
    
    var body: some View {
        GeometryReader { geometry in
            HStack {
                // Iterate over the individual picker values
                ForEach(0..<self.viewModel.segments.count, id: \.self) { pickerIndex in
                    // Define a picker
                    Picker(
                        self.viewModel.segments[pickerIndex].0, // Label
                        selection: self.viewModel.segments[pickerIndex].1 // Selection
                    ) {
                        // Populate with data for this specific picker
                        ForEach(0..<self.viewModel.segments[pickerIndex].2.count) { pickerSelectionIndex in
                            Text(self.viewModel.segments[pickerIndex].2[pickerSelectionIndex])
                                // Tag tells SwiftUI which selection to show - we tag with the index
                                .tag(pickerSelectionIndex)
                        }
                    }
                    .pickerStyle(WheelPickerStyle())
                    // Size each picker to the allowed fraction of the total width
                    .frame(width: geometry.size.width / CGFloat(self.viewModel.segments.count))
                    // Clip to the given width, otherwise the picker lines will overflow & intersect
                    .clipped()
                }
            }
        }
    }
}

let testVm = MultiSegmentPickerViewModel(segments: [
    ("FirstPicker", .constant(0), ["1.1", "1.2", "1.3"]),
    ("SecondPicker", .constant(1), ["2.1", "2.2", "2.3"]),
])

PlaygroundPage.current.setLiveView(
    MultiSegmentPickerView(viewModel: testVm)
        .padding()
)