I made an UIPickerView as an input for a UITextField and implement a UIToolbar with a "Done" button. It works perfectly but when I switch to landscape mode on my iPhone the UIToolbar disappear. Here's my code:
override func viewDidLoad() {
super.viewDidLoad()
thePicker.delegate = self
let toolBar = UIToolbar()
toolBar.barStyle = UIBarStyle.default
toolBar.isTranslucent = true
toolBar.tintColor = UIColor(red: 76/255, green: 100/255, blue: 217/255, alpha: 1)
toolBar.sizeToFit()
let doneButton = UIBarButtonItem(title: "Aceptar", style: UIBarButtonItemStyle.plain, target: self, action: #selector(doneClick))
toolBar.setItems([doneButton], animated: false)
toolBar.isUserInteractionEnabled = true
testTextField.inputView = thePicker
testTextField.inputAccessoryView = toolBar
}
Faced the same problem when I add UIPickerView programmatically and add UIToolBar for the PickerView. Just need to add [.flexibleWidth,.flexibleHeight] for the UIPickerView
self.thePicker.autoresizingMask = [.flexibleWidth,.flexibleHeight]
Related
I added a toolbar with done and cancel buttons and everything was right. Suddenly, the done and cancel text is hidden. The buttons exist and are clickable but with no text. I tried everything but same problem.
This is the code regarding the toolbar:
func createDatePicker(){
//format for datepicker display
datePicker.datePickerMode = .date
datePicker.minimumDate = Date()
datePicker.backgroundColor = UIColor.white
// ToolBar
let toolBar = UIToolbar()
toolBar.barStyle = UIBarStyle.default
toolBar.isTranslucent = true
toolBar.backgroundColor = UIColor(red: 253/255, green: 184/255, blue: 20/35, alpha: 1.0)
//datePicker.tintColor = UIColor.blue
toolBar.tintColor = UIColor.blue
toolBar.sizeToFit()
toolBar.isUserInteractionEnabled = true
//add a done button on this toolbar
let doneButton = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(doneClicked))
let spaceButton = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
let cancelButton = UIBarButtonItem(barButtonSystemItem: .cancel, target: self, action: #selector(cancelClicked))
toolBar.setItems([cancelButton,spaceButton,doneButton], animated: true)
testfield.inputAccessoryView = toolBar
testfield.inputView = datePicker
self.view.addSubview(testfield)
}
And this is the result:
Here is the Code is am using based on your code and it is working perfectly fine for me
import UIKit
class ViewController: UIViewController {
var datePicker = UIDatePicker()
var testfield: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
createDatePicker()
// 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 createDatePicker(){
// TextField
testfield = UITextField(frame: CGRect(x: 20, y: 100, width: 300, height: 40))
testfield.placeholder = "testfiled"
self.view.addSubview(testfield)
//format for datepicker display
datePicker.datePickerMode = .date
datePicker.minimumDate = Date()
datePicker.backgroundColor = UIColor.white
// ToolBar
let toolBar = UIToolbar()
toolBar.barStyle = UIBarStyle.default
toolBar.isTranslucent = true
toolBar.backgroundColor = UIColor(red: 253/255, green: 184/255, blue: 20/35, alpha: 1.0)
//datePicker.tintColor = UIColor.blue
toolBar.tintColor = UIColor.blue
toolBar.sizeToFit()
toolBar.isUserInteractionEnabled = true
//add a done button on this toolbar
let doneButton = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(doneClicked))
let spaceButton = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
let cancelButton = UIBarButtonItem(barButtonSystemItem: .cancel, target: self, action: #selector(cancelClicked))
toolBar.setItems([cancelButton,spaceButton,doneButton], animated: true)
testfield.inputAccessoryView = toolBar
testfield.inputView = datePicker
}
#objc func doneClicked(){
}
#objc func cancelClicked(){
}
}
Please try to test on both Device And Simulator
Or try clean(shift+cmd+k) project before build this helps in most of cases.
Result
I did a WORK AROUND by adding image to the done and cancel button
let DonebuttonIcon = UIImage(named: "done-calender.png")
let doneButton = UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.done, target: self, action: #selector(doneClicked))
doneButton.image = DonebuttonIcon
doneButton.tintColor = UIColor.gray
let spaceButton = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
let CancelbuttonIcon = UIImage(named: "cancel-calender.png")
let cancelButton = UIBarButtonItem(title: "Cancel", style: UIBarButtonItemStyle.done, target: self, action: #selector(cancelClicked))
cancelButton.image = CancelbuttonIcon
cancelButton.tintColor = UIColor.gray
So I have a textfield that uses a pickerview. But for some reason as of iOS 11.x it doesn't seem to show up. I can't seem to figure out why. I have looked at some of the other questions and it seems my implementation is the same, yet the toolbar does not appear on loading the picker view.
Below is the code where I declare and set the toolbar for the pickerview :
let picker: UIPickerView
picker = UIPickerView(frame: CGRect(x: 0, y: 200, width: view.frame.width, height: 300))
picker.showsSelectionIndicator = true
picker.delegate = self
picker.dataSource = self
let toolBar = UIToolbar()
toolBar.barStyle = UIBarStyle.default
toolBar.isTranslucent = false
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: #selector(UploadViewController.donePicker))
let spaceButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: nil, action: nil)
toolBar.setItems([spaceButton, doneButton], animated: false)
toolBar.isUserInteractionEnabled = true
requestTextField.inputView = picker
requestTextField.inputAccessoryView = toolBar
You need to make sure that you declare translatesAutoresizingMaskIntoConstraints = false or else any constraints you set won't work.
Also it doesn't look like you have any constraints. But before you can add constraints to the view make sure that the view is added to the parent - if this is not done either through storyboards or using view.addSubView(picker) the constraints will cause your app to crash.
Use this example to add constraints to your view.
picker.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor)
In addition, use view.leadingAnchor for the left constraint and view.trailingAnchor for the right instead of view.frame.width for the width of your UIPicker
Here is my code:
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
let keyBoardToolBar = UIToolbar(frame: CGRectMake(0, 0, self.view.frame.size.width, 44))
keyBoardToolBar.barStyle = .Default
let flexSpaceKeyboardBarButtonItem = UIBarButtonItem(barButtonSystemItem: .FlexibleSpace, target: nil, action: nil)
let doneKeyboardBarButtonItem = UIBarButtonItem(title: "Done", style: .Done, target: self, action: nil)
let wordKeyboardBarButtonItem = UIBarButtonItem(title: "Button 1", style: .Plain, target: self, action: nil)
var barItems: [UIBarButtonItem] = []
barItems.append(wordKeyboardBarButtonItem)
barItems.append(flexSpaceKeyboardBarButtonItem)
barItems.append(doneKeyboardBarButtonItem)
keyBoardToolBar.setItems(barItems, animated: true)
self.myTV.inputAccessoryView = keyBoardToolBar
}
And when I am turning the device, the UIToolBar become black: (click to see this GIF again)
So is there anyway to fix it? Thanks!
BTW: In Simulator I cannot see UIToolBar turning black.
Fixed by adding: (still unclear about the reason causing it though)
keyBoardToolBar.isTranslucent = false
keyBoardToolBar.barTintColor = UIColor(colorLiteralRed: (247/255), green: (247/255), blue: (247/255), alpha: 1)
(UIColor(colorLiteralRed: (247/255), green: (247/255), blue: (247/255), alpha: 1) is the default background color of the UIToolBar from here)
In my app when user clicks on UITextField he should be able to pick up a value from UIPickerView OR enter his own value using keyboard.
What's the best way of doing it in terms of user experience and ease of implementation?
UIPickerView with toolbar is already implemented.
I'd appreciate both advice on best way of doing it and example code of switching keyboard <-> pickerview.
I've tried adding a button "Show keyboard" on pickerview's toolbar and adding the following code:
func showKeyboard() {
selectedTextField.inputView = nil
}
But clicking this button doesn't do anything. Also I'm not sure it's a good way in terms of UX.
Here's the solution:
var useKeyboard:Bool = true
func showKeyboard() {
if useKeyboard {
useKeyboard = false
selectedTextField.inputView = nil
selectedTextField.reloadInputViews()
selectedTextField.keyboardAppearance = UIKeyboardAppearance.Default
selectedTextField.keyboardType = UIKeyboardType.Default
} else {
useKeyboard = true
selectedTextField.inputView = nil
selectedTextField.reloadInputViews()
createPicker(selectedTextField)
selectedTextField.resignFirstResponder()
selectedTextField.becomeFirstResponder()
}
}
// That's my custom picker - adjust whatever you need
func createPicker(sender: UITextField){
selectedTextField = sender
// Create picker view
var newPickerView: UIPickerView
newPickerView = UIPickerView(frame: CGRectMake(0, 200, view.frame.width, 300))
newPickerView.backgroundColor = .whiteColor()
// Only for UIPickerView
newPickerView.showsSelectionIndicator = true
newPickerView.delegate = self
newPickerView.dataSource = self
// Create toolbar
var 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()
// Create buttons
var doneButton = UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.Plain, target: self, action: "donePicker")
var spaceButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil)
var cancelButton = UIBarButtonItem(title: "Cancel", style: UIBarButtonItemStyle.Plain, target: self, action: "cancelPicker")
var customButton = UIBarButtonItem(title: "Keyboard", style: UIBarButtonItemStyle.Plain, target: self, action: "showKeyboard")
// Assign buttons to toolbar
toolBar.setItems([cancelButton, spaceButton, customButton, doneButton], animated: false)
toolBar.userInteractionEnabled = true
// Add pickerview and toolbar to textfield
sender.inputView = newPickerView
sender.inputAccessoryView = toolBar
}
func donePicker() {
useKeyboard = true
selectedTextField.resignFirstResponder()
}
func cancelPicker() {
useKeyboard = true
selectedTextField.resignFirstResponder()
}
I have a UIPickerView and I am adding a UIToolBar with 2 UIBarButtonItems to it.
var toolBar = UIToolbar()
toolBar.frame.origin.y = -40
toolBar.barStyle = UIBarStyle.Default
toolBar.translucent = true
toolBar.tintColor = UIColor(red: 76/255, green: 217/255, blue: 100/255, alpha: 1)
toolBar.sizeToFit()
var doneButton = UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.Bordered, target: self, action: "donePicker")
var spaceButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil)
var cancelButton = UIBarButtonItem(title: "Cancel", style: UIBarButtonItemStyle.Bordered, target: self, action: "canclePicker")
toolBar.setItems([cancelButton, spaceButton, doneButton], animated: false)
toolBar.userInteractionEnabled = true
pickerView.addSubview(toolBar)
pickerView.bringSubviewToFront(toolBar)
view.bringSubviewToFront(toolBar)
The problem is, that when I try to click on the the UIBarButtonItem, it doesn't fire, it doesn't even recognize it, it just clicks the cell beneath it.
Can you try this codes.
var textField = UITextField(frame: CGRectMake(20, 50, view.width - 40, 30))
textField.backgroundColor = UIColor.redColor()
view.addSubview(textField)
var pickerView = UIPickerView(frame: CGRectMake(0, 200, view.width, 300))
pickerView.backgroundColor = UIColor.whiteColor()
pickerView.showsSelectionIndicator = true
var 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()
var doneButton = UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.Bordered, target: self, action: "donePicker")
var spaceButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil)
var cancelButton = UIBarButtonItem(title: "Cancel", style: UIBarButtonItemStyle.Bordered, target: self, action: "canclePicker")
toolBar.setItems([cancelButton, spaceButton, doneButton], animated: false)
toolBar.userInteractionEnabled = true
textField.inputView = pickerView
textField.inputAccessoryView = toolBar
I believe that you need to raise the picker and toolbar using the standard UIResponder mechanism or cheat by using a hidden UITextField to get the same result.
See my updated answer to your original question:
Add buttons to UIPickerView - Swift 1.2