如何在同一个 Viewcontroller 上使用 UIPickerview 和 UIDatePicker？

Posted 2023-02-24

【中文标题】如何在同一个 Viewcontroller 上使用 UIPickerview 和 UIDatePicker？

【英文标题】：How to use UIPickerview and UIDatePicker on the same Viewcontroller?

【发布时间】：2019-06-24 17:30:22

【问题描述】：

我在 Viewcontroller 中有三个 TextField。单击第一个后，我想使用 UIPickerview 选择一些东西。第二个 TF 应该打开键盘，第三个应该打开 UIDatepicker。

import UIKit

class NewCompetitionViewController: UIViewController, UITextViewDelegate,UIPickerViewDataSource, UIPickerViewDelegate
    @IBOutlet weak var programTextField: UITextField!

    let program = ["Big Target - 60 Shots",
                   "Big Target - 30 Shots",
                   "Small Target - 40 Shots"]

    var selectedProgram: String?

    let datePicker = UIDatePicker()

    @IBOutlet weak var locationTextField: UITextField!
    @IBOutlet weak var dateTextField: UITextField!

    override func viewDidLoad() 
        super.viewDidLoad()

        createProgramPicker()
        createDatePicker()
    

    @IBAction func saveButton(_ sender: UIButton) 
        dismiss(animated: true)
    

    @IBAction func cancelButton(_ sender: UIButton) 
        dismiss(animated: true)
    

    // PROGRAM PICKER
    func createProgramPicker()
        let programPicker = UIPickerView()
        let toolBarPP = UIToolbar()

        programPicker.delegate = self

        // Customizations
        programPicker.backgroundColor = .white

        toolBarPP.sizeToFit()
        let spaceButtonPP = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
        let doneButtonPP = UIBarButtonItem(title: "Done", style: .plain, target: self, action: #selector(dismissKeyboard))

        toolBarPP.setItems([spaceButtonPP, doneButtonPP], animated: false)
        //toolBarPP.isUserInteractionEnabled = true

        programTextField.inputAccessoryView = toolBarPP
        programTextField.inputView = programPicker
    

    // DISMISS KEYBOARD
    @objc func dismissKeyboard()
        self.view.endEditing(true)
    

    // DATE PICKER
    func createDatePicker()
        datePicker.datePickerMode = .date
        datePicker.backgroundColor = .white

        let toolbarDP = UIToolbar()
        toolbarDP.sizeToFit()

        // flexible Space Button and Done button
        let spaceButtonDP = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
        let doneButtonDP = UIBarButtonItem(title: "Done", style: .plain, target: self, action: #selector(doneClicked))

        toolbarDP.setItems([spaceButtonDP, doneButtonDP], animated: false)
        //toolbarDP.isUserInteractionEnabled = true

        dateTextField.inputAccessoryView = toolbarDP
        dateTextField.inputView = datePicker
    

    @objc func doneClicked()
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "dd/MM/YYYY"
        dateFormatter.dateStyle = .medium
        dateFormatter.timeStyle = .none

        dateTextField.text = dateFormatter.string(from: datePicker.date)
        self.view.endEditing(true)
    

    // Returns true after "Done" clicked
    func textFieldShouldReturn(_ textField: UITextField) -> Bool 
        // Hide the keyboard
        textField.resignFirstResponder()
        return true
    

    private func textFieldDidEndEditing(_ textField: UITextField)
        locationTextField.text = textField.text
    


extension NewCompetitionViewController: UIPickerViewDelegate, UIPickerViewDataSource 
    func numberOfComponents(in pickerView: UIPickerView) -> Int 
        return 1
    

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int 
        return program.count
    

    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? 
        return program[row]
    

    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) 
        selectedProgram = program[row]
        programTextField.text = selectedProgram
    

我可以开始模拟并且 UIPickerview 工作。也是第二个文本字段的键盘输入。但是，如果我打开 datePicker 并单击完成按钮，则显示会从底部向上滑动，并带有透明的蓝色外观。

【问题讨论】：

您能否添加 GIF 或图片，以便我们了解布局以及到底发生了什么？

你试过使用多个 UIView 吗？在需要时使用日期选择器和选择器视图隐藏和显示视图。

【参考方案1】：

以下是一些截图：

Main screen

Program selection

Date selection

Bluescreen after clicking done