Skip to content Skip to sidebar Skip to footer

UIPickerView Example With UIToolbar in Swift 3.0.

UIPickerView is a wheel type machine mechanism in which you are take one or more sets of value. There are one selection indicator where value is selected by user. In this example we are create UIPickerView example with UIToolbar in swift 3 programmatically.


In this example, take one textFiled in which to open the pickerView using inputView. and adding toolbar on pickerView programmatically.

Follow the below steps :

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){        // UIPickerView      self.myPickerView = UIPickerView(frame:CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 216))      self.myPickerView.delegate = self      self.myPickerView.dataSource = self      self.myPickerView.backgroundColor = UIColor.white      textField.inputView = self.myPickerView        // ToolBar      let toolBar = UIToolbar()      toolBar.barStyle = .default      toolBar.isTranslucent = true      toolBar.tintColor = UIColor(red: 92/255, green: 216/255, blue: 255/255, alpha: 1)      toolBar.sizeToFit()        // Adding Button ToolBar      let 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 = true      textField.inputAccessoryView = toolBar    }  

Step 4 : Adding the delegate and datasource methods of UIPickerView to display data on UIPickerView wheel.
  //MARK:- PickerView Delegate & DataSource  func 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.
  //MARK:- Button    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)  }  
Step 7 : outPut UIPickerView with ToolBar in UITextField.

                               


Step 8 : Demo[1]

Thanks.

References

  1. ^ Demo (github.com)
Source: iosdevcenters.blogspot.com