代码之家  ›  专栏  ›  技术社区  ›  Alberto O.

如何使用“完成”按钮创建UIPickerView?

  •  83
  • Alberto O.  · 技术社区  · 11 年前

    当用户点击UITextField时,我很难制作一个带有完成按钮的UIPickerView。这是我迄今为止的代码。一切都构建得很好,但当我点击文本字段时,键盘会出现,而不是选择器。

    class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {
    
    
    @IBOutlet var textField1: UITextField!
    
    let pickerData = ["11", "12", "13"]
    
    
    
    
    
    @IBAction func textButton(sender: AnyObject) {
    
        let picker: UIPickerView
        picker = UIPickerView(frame: CGRectMake(0, 200, view.frame.width, 300))
        picker.backgroundColor = .whiteColor()
    
        picker.showsSelectionIndicator = true
        picker.delegate = self
        picker.dataSource = self
    
        let toolBar = UIToolbar()
        toolBar.barStyle = UIBarStyle.Default
        toolBar.translucent = true
        toolBar.tintColor = UIColor(red: 76/255, green: 217/255, blue: 100/255, alpha: 1)
        toolBar.sizeToFit()
    
        let doneButton = UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.Plain, target: self, action: "donePicker")
        let spaceButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil)
        let cancelButton = UIBarButtonItem(title: "Cancel", style: UIBarButtonItemStyle.Plain, target: self, action: "donePicker")
    
        toolBar.setItems([cancelButton, spaceButton, doneButton], animated: false)
        toolBar.userInteractionEnabled = true
    
        textField1.inputView = picker
        textField1.inputAccessoryView = toolBar
    
    
    
    
    }
    
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    func numberOfComponentsInPickerView(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) {
        textField1.text = pickerData[row]
    }
    
    func donePicker() {
    
        textField1.resignFirstResponder()
    
    }
    
    
    
    
    }
    
    6 回复  |  直到 8 年前
        1
  •  151
  •   Viktor Richard Salim    7 年前

    将此代码添加到 viewDidLoad() 而不是方法

    let picker: UIPickerView
    picker = UIPickerView(frame: CGRectMake(0, 200, view.frame.width, 300))
    picker.backgroundColor = .whiteColor()
    
    picker.showsSelectionIndicator = true
    picker.delegate = self
    picker.dataSource = self
    
    let toolBar = UIToolbar()
    toolBar.barStyle = UIBarStyle.default
    toolBar.isTranslucent = true
    toolBar.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 = true
    
    textField1.inputView = picker
    textField1.inputAccessoryView = toolBar
    
        2
  •  58
  •   Eridana    7 年前

    我认为最好创建一个自定义类来从控制器中删除代码。

    Swift 4/5示例 :

    import Foundation
    import UIKit
    
    protocol 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()
        }
    }
    

    用法示例:

    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()
        }
    }
    
        3
  •  26
  •   Nil Rathod    4 年前

    带有“完成”按钮的UIPickerView?快速4

    步骤1:在ViewController中添加一个名为txt_pickUpData的textFiled,并给予IBOutlet连接和委托。也采用一个UIDatePicker变量。并获取一个带有字符串值的数组,该数组显示在选择器轮上。

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

    步骤2:还添加UIPickerView和UITextFiled的委托。

    class ViewController: UIViewController , UIPickerViewDelegate, UIPickerViewDataSource, UITextFieldDelegate{
    

    步骤3:函数pickUp使用ToolBar创建UIPickerView。

    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
    
     }
    

    步骤4:添加UIPickerView的委托和数据源方法以在UIPickerViewwheel上显示数据。

    //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)
     }
    

    步骤5:添加ToolBar中的两个按钮方法。一个是doneClick,另一个是cancelClick。即关闭UIPickerView。

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

    步骤6:调用UITextField委托方法中的pickUp函数。

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

    只需复制并粘贴代码。

        4
  •  8
  •   Community Mohan Dere    9 年前

    人们似乎在用这里的代码来回答其他问题 VBaarathi 问

    Swift3中

    let doneButton = UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.plain, target: self, action: #selector(donePicker))
    let spaceButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: nil, action: nil)
    let cancelButton = UIBarButtonItem(title: "Cancel", style: UIBarButtonItemStyle.plain, target: self, action: #selector(donePicker))
    

    然后您可以将以下内容放在同一个swift文件中

    func donePicker (sender:UIBarButtonItem)
    {
         // Put something here
    }
    
        5
  •  3
  •   Awais Fayyaz    8 年前

    斯威夫特3x:

    已经给出了令人惊叹的答案,但这里有不同的方法,只需 pickerView 并将 inputView 和 inputAccessoryView 这样地:

    YOUR_TEXTFIELD_NAME.inputView = picker
    
    
    func addKeyboardToolBar() {
    
      var nextButton: UIBarButtonItem?
      var keyboardToolBar = UIToolbar(frame: CGRect(x: CGFloat(0), y: 
      CGFloat(0), width: CGFloat(pickerView.frame.size.width), height: CGFloat(25)))
      keyboardToolBar.sizeToFit()
      keyboardToolBar.barStyle = .default
      daysHourTextField.inputAccessoryView = keyboardToolBar
      nextButton = UIBarButtonItem(title: "Done", style: .plain, target: self, action: #selector(self.textFieldShouldReturn))
      keyboardToolBar.items = [UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil), nextButton]
    
    }
    
        6
  •  1
  •   Dominic Tabu    5 年前

    使用IQKeyboardManager库。设置后,它将自动为您添加“完成”按钮。在这里查看: github

    首先用

    pod 'IQKeyboardManagerSwift'
    

    然后在AppDelegate中。swift,只需导入IQKeyboardManagerSwift框架并启用IQKeyboard Manager。

     import IQKeyboardManagerSwift
    
     @UIApplicationMain
     class AppDelegate: UIResponder, UIApplicationDelegate {
    
       var window: UIWindow?
    
       func application(_ application: UIApplication, 
        didFinishLaunchingWithOptions launchOptions: 
        [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    
        IQKeyboardManager.shared.enable = true
    
        return true
      }
    }
    

    此库将自动为您在键盘中添加“完成”按钮。