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
Related
I am trying to add two bar buttons to toolbar in iOS [Cancel] & [Save] on right and left side accordingly.
I used a third bar button [Spacer] and set it to be [.flexiblewidth] Otherwise, when adding it only the left button appears [Cancel] and the [Spacer] & and [Save] which have to be next disappearing ?
the screen shot is in the link:
https://ibb.co/cZsaVV
let pickerView = UIPickerView()
override func viewDidLoad() {
pickerView.addSubview(self.setToolBar())
}
func setToolBar() -> UIToolbar {
let toolBar = UIToolbar()
toolBar.isTranslucent = true
toolBar.backgroundColor = UIColor.clear
let barButtonAttr = [NSAttributedString.Key.font : UIFont.systemFont(ofSize: 15),
NSAttributedString.Key.foregroundColor : UIColor.black]
// [Save] BarButtonItem
let saveBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.save, target: self, action: nil)
saveBarButtonItem.setTitleTextAttributes(barButtonAttr, for: .normal)
// [Cancel] BarButtonItem
let cancelBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.cancel, target: self, action: nil)
cancelBarButtonItem.setTitleTextAttributes(barButtonAttr, for: .normal)
let spacerBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.flexibleSpace ,
target: self, action: nil)
spacerBarButtonItem.setTitleTextAttributes(barButtonAttr, for: .normal)
// add BarButtonItems to toolBar
toolBar.items = [cancelBarButtonItem,spacerBarButtonItem,saveBarButtonItem]
toolBar.sizeToFit()
return toolBar
}
func createAccessoryViewWithTarget(_ target: AnyObject, width: CGFloat) -> UIView {
// Previous button
let previousButton = UIBarButtonItem(title: "Previous", style: .plain, target: target, action: #selector(self.moveToPreviousTextField))
previousButton.tintColor = UIColor.white
//Next button
let nextButton = UIBarButtonItem(title: "Next", style: .plain, target: target, action: #selector(self.moveToNextTextField))
nextButton.tintColor = UIColor.white
// Dismiss/close/done button
let doneButton = UIBarButtonItem(title: "Done", style: .done, target: target, action: #selector(self.keyboardDoneButtonTapped))
doneButton.tintColor = UIColor.white
let keyboardToolbar: UIToolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: width, height: 44))
keyboardToolbar.barStyle = .black
let flexSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
let fixedSpace = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
var itemsArray = [UIBarButtonItem]()
itemsArray.append(previousButton)
itemsArray.append(fixedSpace)
itemsArray.append(nextButton)
itemsArray.append(flexSpace)
itemsArray.append(doneButton)
keyboardToolbar.items = itemsArray
keyboardToolbar.sizeToFit()
return keyboardToolbar
}
This one is old code may be swift3 I guess. Here Im adding 3 buttons previous next and done button. flexible space and fixed space are used for spaces between buttons. Important to note here is the order that you adding your barbutton items. In your case use flexible space to place your 2 buttons on right and left end in the order of left end button, flexible space, right end button.
I've got the solution finally.
I am adding the ToolBar to the PickerView and then calling UIToolBar.SizeToFit() which is must in all cases.
the issue was I had to change the picker view size later in this case the size of subview ToolBar is not adapting with the new size coordination of pickerView. So the solution simply to call again ToolBar.SizeToFit() after any modification of parent view. here's snap of the code:
// popupView is custom UIPickerView
popupView.frame = CGRect(x:0, y:0, width:100, height:100)
// toolBar is an object of UIToolBar of the custom UIPickerView AddCurrencyPicker
(popupView as! AddCurrencyPicker).toolBar.sizeToFit()
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]
I'd like to create a UIToolbar with a right-aligned done button and a left-aligned title/label.
My current solution works fine for short labels but overlaps with long ones
With autolayout I'd set the horizontal spacing to 0 and make sure my done text has higher compression resistance than the title text. But using the UIToolbar api I'm unsure how to accomplish this.
Here's the code that generates this:
lazy var pickerToolbar: UIToolbar = {
let toolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: 0, height: 33))
let leftTitle = UIBarButtonItem(title: "One and only one with lots of choices", style: UIBarButtonItemStyle.Plain, target: nil, action: nil)
leftTitle.tintColor = UIColor.blackColor()
let space = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil)
let closeBtn = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.Done, target: self, action: "onTapClose")
toolbar.setItems([
leftTitle,
space,
closeBtn
], animated: false)
return toolbar
}()
// ...later
textField.inputAccessoryView = pickerToolbar
Following is my code for adding an inputAccessoryView (with a Done button on it) to my textView:
let keyboardButtonView = UIToolbar()
keyboardButtonView.sizeToFit()
let doneButton = UIBarButtonItem(image: nil, style: .Done, target: self, action: "closeMessageViewKeyboard")
doneButton.possibleTitles = ["Done"]
var toolbarButtons = NSMutableArray()
toolbarButtons.addObject(doneButton)
keyboardButtonView.items = toolbarButtons as [AnyObject]
messageView.inputAccessoryView = keyboardButtonView
The Done button never appears. All I get is a white accessory bar. Am I missing anything here?
For me I create the accessory view using UINavigationBar like this:
let navBar = UINavigationBar(frame: CGRectMake(0, 0, viewWidth, 44))
navBar.barStyle = UIBarStyle.BlackTranslucent;
navBar.backgroundColor = UIColor.blackColor();
navBar.alpha = 0.9;
//replace viewWidth with view controller width
let navItem = UINavigationItem()
let doneButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.Done, target: self, action: "closeMessageViewKeyboard")
navItem.rightBarButtonItem = doneButton
navBar.pushNavigationItem(navItem, animated: false)
messageView.inputAccessoryView = navBar
1) Add self?
self.messageView.inputAccessoryView = keyboardButtonView
2) You should be able to remove this line:
doneButton.possibleTitles = ["Done"]
and add (title: "done",...) to the line above it.
3) I have similar code and it probably doesn't matter, but, you might add:
keyboardButtonView.barStyle = UIBarStyle.Default
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()
}