显示UIPickerView像一个键盘,没有的UITextField(Show UIPickerVi

2019-08-17 17:04发布

我在寻找一种方式来呈现UIPickerView当用户点击一个UIBarButtonItem 。 想象一下表视图结果的过滤器。

我知道我可以使用一个UITextField inputView,但这不会是这样的-我只有一个UIBarButtonItemUITableView

我见过成使用UIActionSheet ,但它看起来不自然,特别是当它的动画显示。

将动画的UIView开启和关闭手动屏幕的唯一选择?

该应用程序的iOS 6+和iPhone而已,所以我并不需要保持与任何其他版本/成语的兼容性。

Answer 1:

它可能不是你唯一的选择,但动画的UIPickerView应该是比较容易为你做。 所以它显示了屏幕底部的添加选择器视图。 当它的时间来制作动画在:

[UIView animateWithDuration:0.3 animations:^{
    self.datePicker.frame = CGRectMake(0, self.view.bounds.size.height - datePicker.bounds.size.height, datePicker.bounds.size.width, datePicker.bounds.size.height);
}];

而当它的时间来隐藏它:

[UIView animateWithDuration:0.3 animations:^{
    self.datePicker.frame = CGRectMake(0, self.view.bounds.size.height, datePicker.bounds.size.width, datePicker.bounds.size.height);
}];


Answer 2:

附上一个UIPickerView因为你已经添加到您的视图中的0大小的UITextField的inputView。

        let picker = UIPickerView()
        picker.dataSource = self
        picker.delegate = self

        let dummy = UITextField(frame: CGRectZero)
        view.addSubview(dummy)

        dummy.inputView = picker
        dummy.becomeFirstResponder()


Answer 3:

更好的选择是仍然使用UITextField 。 你没有真正显示它在屏幕上。 只要把它在为0x0 UIView ,以便它是不可见的,设置它的inputViewUIPickerView ,并呼吁becomeFirstResponder它来显示选择器和resignFirstResponder隐藏它。

为方便起见,有一个UIView实现所有的与沿子类UIPickerViewDelegateUIPickerViewDataSource方法。



Answer 4:

我去一个看不见的borisgolovnev的建议UITextField ,并与下面的雨燕2.3的实现上来:

import UIKit

class PickerViewPresenter: UITextField {

    // MARK: - Initialization

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    init() {
        super.init(frame: CGRect.zero)
    inputView = pickerView
    inputAccessoryView = pickerInputAccessoryView
    }

    // MARK: - Public

    var pickerDelegate: UIPickerViewDelegate? {
        didSet {
            pickerView.delegate = pickerDelegate
        }
    }

    var pickerDataSource: UIPickerViewDataSource? {
        didSet {
            pickerView.dataSource = pickerDataSource
        }
    }

    var selectButtonAction: (() -> Void)?

    var currentlySelectedRow: Int {
        return pickerView.selectedRowInComponent(0)
    }

    func selectRowAtIndex(index: Int) {
        pickerView.selectRow(index, inComponent: 0, animated: false)
    }

    func showPicker() {
        self.becomeFirstResponder()
    }

    func hidePicker() {
        self.resignFirstResponder()
    }

    // MARK: - Views

    private let pickerView = UIPickerView(frame: CGRect.zero)

    private lazy var pickerInputAccessoryView: UIView = {
        let frame = CGRect(x: 0.0, y: 0.0, width: 0.0, height: 48.0)
        let pickerInputAccessoryView = UIView(frame: frame)

        // Customize the view here

        return pickerInputAccessoryView
    }()

    func selectButtonPressed(sender: UIButton) {
        selectButtonAction?()
    }

}

PickerViewPresenter然后可以方便地就这样使用:

class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(pickerViewPresenter)
    }

    private let dataModel = [10, 20, 30, 40, 50]

    private lazy var pickerViewPresenter: PickerViewPresenter = {
        let pickerViewPresenter = PickerViewPresenter()
        pickerViewPresenter.pickerDelegate = self
        pickerViewPresenter.pickerDataSource = self
        pickerViewPresenter.selectButtonAction = { [weak self] () -> Void in
            guard let strongSelf = self else {
                return
            }
            let result = strongSelf.dataModel[pickerViewPresenter.currentlySelectedRow]
            pickerViewPresenter.hidePicker()
            // ...
        }

        return pickerViewPresenter
    }()

    private func presentPickerView {
        let index = 0 // [0..dataModel.count-1]
        pickerViewPresenter.selectRowAtIndex(index)
        pickerViewPresenter.showPicker()
    }

    // MARK: - UIPickerViewDataSource

    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
        return 1
    }

    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return dataModel.count
    }

    // MARK: - UIPickerViewDelegate

    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return "\(dataModel[row]) drunken sailors"
    }

}

希望有人认为这有用=)



Answer 5:

至少对我的干净的方法,以及用于Swift4 +自动布局溶液,没有一个UITextField正在添加UIView作为的容器UIPickerViewUIToolbar的顶视图/按钮。

然后切换插图/动画是容器视图的偏移,如果你想,隐藏和取消隐藏选择器。

性能

private lazy var view_PickerContainer: UIView = {
    let view = UIView()
    view.backgroundColor = .white
    view.addSubview(self.timePicker)
    view.addSubview(self.toolbar_Picker)
    return view
}()

private lazy var timePicker: UIDatePicker = {
    let picker = UIDatePicker()
    picker.minimumDate = Date()
    picker.datePickerMode = .time
    picker.setDate(Date(), animated: true)
    return picker
}()

private let timeFormatter: DateFormatter = {
    let formatter = DateFormatter()
    formatter.dateFormat = "hh:mm a"
    return formatter
}()

private lazy var toolbar_Picker: UIToolbar = {
    let toolbar = UIToolbar()
    toolbar.barStyle = .blackTranslucent
    toolbar.barTintColor = .blueDarkText
    toolbar.tintColor = .white
    self.embedButtons(toolbar)
    return toolbar
}()

我用SnapKit以编程方式布局自己的看法。 您可以使用timePicker的bounds.size作为布局参考。

实施

在viewDidLoad中()

    // Setup timepicker and its container.
    self.view.addSubview(self.view_PickerContainer)
    self.view_PickerContainer.snp.makeConstraints { (make) in
        make.height.equalTo(self.timePicker.bounds.size.height + 50.0)
        make.leading.trailing.equalToSuperview()
        self.constraint_PickerContainerBottom = make.bottom.equalToSuperview().inset(-500.0).constraint
    }

    self.timePicker.snp.makeConstraints { (make) in
        make.height.equalTo(self.timePicker.bounds.size.height)
        make.width.equalToSuperview()
        make.bottom.equalToSuperview()
    }

    // Add toolbar for buttons.
    self.toolbar_Picker.snp.makeConstraints { (make) in
        make.height.equalTo(40.0)
        make.top.leading.trailing.equalToSuperview()
    }

嵌入顶视图

private func embedButtons(_ toolbar: UIToolbar) {
    func setupLabelBarButtonItem() -> UIBarButtonItem {
        let label = UILabel()
        label.text = "Set Alarm Time"
        label.textColor = .white
        return UIBarButtonItem(customView: label)
    }

    let todayButton = UIBarButtonItem(title: "Today", style: .plain, target: self, action: #selector(self.todayPressed(_:)))

    let doneButton = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(self.donePressed(_:)))

    let flexButton = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil)

    toolbar.setItems([todayButton, flexButton, setupLabelBarButtonItem(), flexButton, doneButton], animated: true)
}

其结果是这样的:



文章来源: Show UIPickerView like a keyboard, without UITextField
标签: ios ios6 uikit