Swift - Toolbar done button not appearing in UIPickerView subview

Question

I'm a beginner in swift and trying to learn UIPickerView which has done button to close after the selection from the picker view. I have following code to add the tool bar and the done button to the picker as a toolbar in subview. It shows up as a blank black toolbar (attached screenshot)

let toolBar = UIToolbar()
toolBar.barStyle = .black
toolBar.sizeToFit()
let doneBtn = UIBarButtonItem.init(title: "Done", style: .plain, target: self, action: #selector(self.closePicker))
toolBar.items = [doneBtn]
toolBar.isUserInteractionEnabled = true
picker.addSubview(toolBar)

Picker is the outlet for UIPickerView in my controller. What am I doing wrong? I referred to other questions but they dont seem to solve my problem. Any suggestions?

@ArashEtemad no, I got that part figured. Now i want to add done button so that i can close the picker after selection. — pritesh, Mar 18 '19 at 13:02
Just create a Container view, which contains your picker and tool bar. — Parvendra Singh, Mar 18 '19 at 13:02
I think you should use like this dateText.inputAccessoryView = numberToolbar — IOS Singh, Mar 18 '19 at 13:04
Check this URL.. https://stackoverflow.com/questions/31728680/how-to-make-an-uipickerview-with-a-done-button/31728914 — Parvendra Singh, Mar 18 '19 at 13:06
@ParvendraSingh inputAccessoryView does not work. I dont have textfield to attach it to. It says its read-only property. The link you gave is for TextField. — pritesh, Mar 18 '19 at 13:09
@pritesh . On that function you have to create your ToolBar and Picker, then add them on a view, Present the view with animation as you like.. it is very simple and clear — Parvendra Singh, Mar 18 '19 at 13:12
This is not necessary to have a TextField,, i give you url for the idea only — Parvendra Singh, Mar 18 '19 at 13:13
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/190241/discussion-between-pritesh-and-parvendra-singh). — pritesh, Mar 18 '19 at 13:18

The Dreams Wind · Answer 1 · 2019-03-18T13:14:01.430

You are wrong at this line:

picker.addSubview(toolBar)

Picker is not supposed to have any subviews - it's a comprehensive view by itself and there is no area in it to accommodate anything in addition.

Instead you need to add both the picker and the toolbar on the same view and align them next to each other

let toolBar = UIToolbar()
...configure your toolbar here...
guard let superview = picker.superview else { return }
superview.addSubview(toolBar)
toolBar.translateAutoresizingMaskIntoConstraints = false
NSLayoutConstraints.activate([
    toolBar.topAnchor.constraint(equalTo: superview.topAnchor),
    toolBar.leftAnchor.constraint(equalTo: superview.leftAnchor),
    toolBar.rightAnchor.constraint(equalTo: superview.rightAnchor),
    toolBar.bottomAnchor.constraint(equalTo: picker.topAnchor)
])

@pritesh presumably these are two distinct views lying next to each other — The Dreams Wind, Mar 18 '19 at 13:17

Arash Etemad · Answer 2 · 2019-03-18T13:36:10.607

-1

You should not add toolBar as subView of picker.

You should set the toolBar as inputAccessoryView of textField.

As I searched for this problem I got that the common way (also easiest way) to achieve what you want is Using dummy textField.

It means create a textField at the exact frame of button and hide it, when user touches the button make the textField firstResponder.

@IBAction func pickerButtonClicked(_ sender: Any) {
    self.pickerViewTextField.becomeFirstResponder
}

edited Mar 18 '19 at 13:36

answered Mar 18 '19 at 13:05

Arash Etemad

1,827
1
13
29

Im showing it on click of button and it says its a read-only property. Please help me with the code. – pritesh Mar 18 '19 at 13:11

Swift - Toolbar done button not appearing in UIPickerView subview

2 Answers2