How would you add a label between two columns in a UIPicker?

Question

I am trying to build the following picker. How would one create the "to" label in between to the components of the picker?

Answer 1

As commented by @Paulw11, here you have a demo implementation.

enum PickerComponents: CaseIterable {
    case timeFrom
    case to
    case timeTo
    
}

enum TimeFrom: String, CaseIterable {
    case now = "Now"
    case tenAM = "10:00AM"
    case quarterToTenAM = "10:15AM"
}

enum TimeTo: String, CaseIterable {
    case fiveThirtyPM = "5:30PM"
    case fiveFortyFive = "5:45PM"
    case sixPM = "6:00PM"
}

class ViewController: UIViewController {

    @IBOutlet weak var pickerView: UIPickerView!
    
    private let pickerComponents = PickerComponents.allCases
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.pickerView.delegate = self
        self.pickerView.dataSource = self
    }
}

extension ViewController: UIPickerViewDataSource, UIPickerViewDelegate {
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return pickerComponents.count
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        let component = pickerComponents[component]
        
        switch component {
        case .timeFrom:
            return TimeFrom.allCases.count
        case .to:
            return 1
        case .timeTo:
            return TimeTo.allCases.count
        }
    }
    
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        let component = pickerComponents[component]
        
        switch component {
        case .timeFrom:
            return TimeFrom.allCases[row].rawValue
        case .to:
            return "to"
        case .timeTo:
            return TimeTo.allCases[row].rawValue
        }
    }
}