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.