How to make an UIPickerView with a Done button?

前端 未结 5 1834
天涯浪人
天涯浪人 2020-12-22 16:31

I am having difficulties to make an UIPickerView with a done button to appear when the users taps a UITextField. This is my code so far. Everything builds fine, but when I t

5条回答
  •  半阙折子戏
    2020-12-22 17:29

    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){
    
    // 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.

    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.

提交回复
热议问题