Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show a UIPickerView when a button is tapped

enter image description here

I want to open a UIPickerView on the click of this button. I had created this button and now when the user clicks on it I want to open a UIPickerView. I have seen many tutorials on the Internet but all of them are showing with:

textfield.inputview = uipker // i don't want to use extfield

But want to implement it without a textfield. Is it possible and if possible then tell me how can I do that.

like image 678
Jayesh Nai Avatar asked Dec 14 '18 06:12

Jayesh Nai


People also ask

How do you open picker view on button click in Swift?

Just hide/show your uipickerview . Add the picker as subview of main view in storyboard but keep it hidden. On clicking on that button show it.

What is UIPickerView?

What is UIPickerView ? UIPickerView is a subclass of UIView . It is useful for iOS apps that use a spinning wheel with many choices for the user. @MainActor class UIPickerView: UIView. One example of this type of app is a slot machine, where a user spins the wheels to play the game.


1 Answers

If you want to do it from Interface Builder then you can add UIPickerView in your storyBoard and initially hide that UIPickerView and when your button tapped show it.

If you want to do this by coding then you can try this.

Define this as global.

var toolBar = UIToolbar()
var picker  = UIPickerView()

Add below code inside your button tap action. I have added Done button in toolbar to dismiss picker.

Note : I write entire code in button action if you don't want to do that just write all code in viewDidLoad and write only these line in your button action self.view.addSubview(picker) and self.view.addSubview(toolBar)

@IBAction func YOUR_BUTTON__TAP_ACTION(_ sender: UIButton) {
    picker = UIPickerView.init()
    picker.delegate = self
    picker.dataSource = self
    picker.backgroundColor = UIColor.white
    picker.setValue(UIColor.black, forKey: "textColor")
    picker.autoresizingMask = .flexibleWidth
    picker.contentMode = .center
    picker.frame = CGRect.init(x: 0.0, y: UIScreen.main.bounds.size.height - 300, width: UIScreen.main.bounds.size.width, height: 300)
    self.view.addSubview(picker)
            
    toolBar = UIToolbar.init(frame: CGRect.init(x: 0.0, y: UIScreen.main.bounds.size.height - 300, width: UIScreen.main.bounds.size.width, height: 50))
    toolBar.barStyle = .blackTranslucent
    toolBar.items = [UIBarButtonItem.init(title: "Done", style: .done, target: self, action: #selector(onDoneButtonTapped))]
    self.view.addSubview(toolBar)
}

On Done button you can remove toolBar as well as PickerView.

@objc func onDoneButtonTapped() {
    toolBar.removeFromSuperview()
    picker.removeFromSuperview()
}

Delegate methods of UIPickerView

func numberOfComponents(in pickerView: UIPickerView) -> Int {
    return 1
}
    
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    return YOUR_DATA_ARRAY.COUNT
}
    
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
    return YOUR_DATA_ARRAY[row]
}
    
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
    print(YOUR_DATA_ARRAY[row])
}
like image 81
Kuldeep Avatar answered Oct 01 '22 10:10

Kuldeep