Multi-component Picker View

OdometerReadingVC.swift

import UIKit

extension CGFloat {
    
    static var screenWidth: CGFloat {
        return UIScreen.main.bounds.width
    }
    
}

class OdometerReadingVC: UIViewController {

    // MARK: - Outlets
    @IBOutlet var odometerReadingTextfield: UITextField!
    
    // MARK: - Properties
    var odometerPicker: UIPickerView!
    var dataSource = [[String]]()
    
    // MARK: - View Life Cycle
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //Include decimal as component
        //Example if you need 8 digit odometer reading like '9999999.9' then add number of components as 9
        configurePickerComponents(numberOfComponentsRequired: 8, decimalComponentAtPlace: 1)
    }
    
    // MARK: - Custom Methods
    
    /// Configure the dataSource by adding values corresponding to each component
    /// - Parameters:
    ///   - components: Number of components required
    ///   - place: Decimal's place in odometer reading (from backward)
    func configurePickerComponents(numberOfComponentsRequired components: Int, decimalComponentAtPlace place: Int) {
        for number in 1...components {
            if number == components - place {
                dataSource.append(["."])
            } else {
                dataSource.append(["0","1","2","3","4","5","6","7","8","9"])
            }
        }
    }
    
    func showOdometerPicker() {
        odometerPicker = UIPickerView()
        odometerPicker.dataSource = self
        odometerPicker.delegate = self
        odometerPicker.backgroundColor = .systemBackground
        
        odometerReadingTextfield.inputView = odometerPicker
        
        let toolBar = UIToolbar.init(frame: CGRect.init(x: 0, y: 0, width: CGFloat.screenWidth, height: 44))
        toolBar.barTintColor = .darkGray
        // Adding Button ToolBar
        let doneButton = UIBarButtonItem(title: "Done", style: .plain, target: self, action: #selector(didTapDoneButton))
        doneButton.tintColor = .white
        let spaceButton = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
        toolBar.setItems([spaceButton, doneButton], animated: false)
        
        odometerReadingTextfield.inputAccessoryView = toolBar
    }
    
    @objc func didTapDoneButton() {
        var resultString = ""
        for index in 0..<dataSource.count {
            let digit = dataSource[index][odometerPicker.selectedRow(inComponent: index)]
            resultString += digit
        }
        odometerReadingTextfield.text = resultString
        odometerReadingTextfield.resignFirstResponder()
    }

}

// MARK: - TextField Delegates

extension OdometerReadingVC: UITextFieldDelegate {
    
    func textFieldDidBeginEditing(_ textField: UITextField) {
        showOdometerPicker()
    }
    
}

// MARK: - PickerView DataSources

extension OdometerReadingVC: UIPickerViewDataSource {
    
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return dataSource.count
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return dataSource[component].count
    }
    
}

// MARK: - PickerView Delegates

extension OdometerReadingVC: UIPickerViewDelegate {
    
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return dataSource[component][row]
    }
    
}