How to make an UIPickerView with a Done button? How to make an UIPickerView with a Done button? ios ios

How to make an UIPickerView with a Done button?


Add this code to your viewDidLoad() instead of method

let picker: UIPickerViewpicker = UIPickerView(frame: CGRectMake(0, 200, view.frame.width, 300))picker.backgroundColor = .whiteColor()picker.showsSelectionIndicator = truepicker.delegate = selfpicker.dataSource = selflet toolBar = UIToolbar()toolBar.barStyle = UIBarStyle.defaulttoolBar.isTranslucent = truetoolBar.tintColor = UIColor(red: 76/255, green: 217/255, blue: 100/255, alpha: 1)toolBar.sizeToFit()let doneButton = UIBarButtonItem(title: "Done", style: UIBarButtonItem.Style.done, target: self, action: #selector(self. donePicker))let spaceButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.flexibleSpace, target: nil, action: nil)let cancelButton = UIBarButtonItem(title: "Cancel", style: UIBarButtonItem.Style.plain, target: self, action: #selector(self. donePicker))toolBar.setItems([cancelButton, spaceButton, doneButton], animated: false)toolBar.userInteractionEnabled = truetextField1.inputView = pickertextField1.inputAccessoryView = toolBar


I think it's better to make a custom class to remove code from controller.

Swift 4/5 example:

import Foundationimport UIKitprotocol ToolbarPickerViewDelegate: class {    func didTapDone()    func didTapCancel()}class ToolbarPickerView: UIPickerView {    public private(set) var toolbar: UIToolbar?    public weak var toolbarDelegate: ToolbarPickerViewDelegate?    override init(frame: CGRect) {        super.init(frame: frame)        self.commonInit()    }    required init?(coder aDecoder: NSCoder) {        super.init(coder: aDecoder)        self.commonInit()    }    private func commonInit() {        let toolBar = UIToolbar()        toolBar.barStyle = UIBarStyle.default        toolBar.isTranslucent = true        toolBar.tintColor = .black        toolBar.sizeToFit()        let doneButton = UIBarButtonItem(title: "Done", style: .plain, target: self, action: #selector(self.doneTapped))        let spaceButton = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)        let cancelButton = UIBarButtonItem(title: "Cancel", style: .plain, target: self, action: #selector(self.cancelTapped))        toolBar.setItems([cancelButton, spaceButton, doneButton], animated: false)        toolBar.isUserInteractionEnabled = true        self.toolbar = toolBar    }    @objc func doneTapped() {        self.toolbarDelegate?.didTapDone()    }    @objc func cancelTapped() {        self.toolbarDelegate?.didTapCancel()    }}

Usage example:

class MyViewController: UIViewController {    @IBOutlet weak var textField: UITextField!    fileprivate let pickerView = ToolbarPickerView()    fileprivate let titles = ["0", "1", "2", "3"]    override func viewDidLoad() {        super.viewDidLoad()        self.textField.inputView = self.pickerView        self.textField.inputAccessoryView = self.pickerView.toolbar        self.pickerView.dataSource = self        self.pickerView.delegate = self        self.pickerView.toolbarDelegate = self        self.pickerView.reloadAllComponents()    }}extension MyViewController: UIPickerViewDataSource, UIPickerViewDelegate {    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {        return self.titles.count    }    func numberOfComponents(in pickerView: UIPickerView) -> Int {        return 1    }    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {        return self.titles[row]    }    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {        self.textField.text = self.titles[row]    }}extension MyViewController: ToolbarPickerViewDelegate {    func didTapDone() {        let row = self.pickerView.selectedRow(inComponent: 0)        self.pickerView.selectRow(row, inComponent: 0, animated: false)        self.textView.text = self.titles[row]        self.textField.resignFirstResponder()    }    func didTapCancel() {        self.textField.text = nil        self.textField.resignFirstResponder()    }}


UIPickerView with a Done button? Swift4

Step 1 : Adding one textFiled named txt_pickUpData in ViewController and give IBOutlet connection and delegate. also take one UIDatePicker variable. and take an Array with string value which is display on picker wheel.

@IBOutlet weak var txt_pickUpData: UITextField!var myPickerView : UIPickerView!var pickerData = ["Hitesh Modi" , "Kirit Modi" , "Ganesh Modi" , "Paresh Modi"]

Step 2 : Also adding the delegate of UIPickerView and UITextFiled.

class ViewController: UIViewController , UIPickerViewDelegate, UIPickerViewDataSource, UITextFieldDelegate{

Step 3 : The function pickUp to create UIPickerView with ToolBar.

func pickUp(_ textField : UITextField){// UIPickerViewself.myPickerView = UIPickerView(frame:CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 216))self.myPickerView.delegate = selfself.myPickerView.dataSource = selfself.myPickerView.backgroundColor = UIColor.whitetextField.inputView = self.myPickerView// ToolBarlet toolBar = UIToolbar()toolBar.barStyle = .defaulttoolBar.isTranslucent = truetoolBar.tintColor = UIColor(red: 92/255, green: 216/255, blue: 255/255, alpha: 1)toolBar.sizeToFit()// Adding Button ToolBarlet doneButton = UIBarButtonItem(title: "Done", style: .plain, target: self, action: #selector(ViewController.doneClick))let spaceButton = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)let cancelButton = UIBarButtonItem(title: "Cancel", style: .plain, target: self, action: #selector(ViewController.cancelClick))toolBar.setItems([cancelButton, spaceButton, doneButton], animated: false)toolBar.isUserInteractionEnabled = truetextField.inputAccessoryView = toolBar }

Step 4 : Adding the delegate and datasource methods of UIPickerView to display data on UIPickerView wheel.

//MARK:- PickerView Delegate & DataSourcefunc numberOfComponents(in pickerView: UIPickerView) -> Int {return 1 }func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {return pickerData.count }func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {return pickerData[row]  }func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {self.txt_pickUpData.text = pickerData[row] } //MARK:- TextFiled Delegate func textFieldDidBeginEditing(_ textField: UITextField) {self.pickUp(txt_pickUpData) }

Step 5 : Adding two buttons method which which is in ToolBar. One is doneClick and other is cancelClick. Which is dismiss the UIPickerView.

func doneClick() {  txt_pickUpData.resignFirstResponder() }func cancelClick() {  txt_pickUpData.resignFirstResponder()}

Step 6 : Calling the pickUp function in UITextField delegate method.

func textFieldDidBeginEditing(_ textField: UITextField) {self.pickUp(txt_pickUpData)}

Just copy and paste in Your code.