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]