Open keyboard with a textField on top of it on press of a button

Question

I am new to swift and am trying to implement a screen. I have a button named openKeyboard. I want to show the system keyboard along with a view (having a textfield and Send button) on top of it. I searched for it but couldn't find any resources around it. Can anyone help me with the same.

Thanks

Steps to do this -> 1.On tap of a button present a new view controller or push a new view controller(whatever your setup is). 2. In that View controller add a text field, and a button. 3. When you tap on the text field, the keyboard should show up. -- If you google each step you should find the process to do it. — AjinkyaSharma, Jun 29 '21 at 02:13

score 3 · Accepted Answer · answered Jun 29 '21 at 07:22

In iOS to open a keyboard you need to use a control that accepts input. In your case as you said, you can use a text field UITextField. Since the field is at beginning hidden, you should pin it to the bottom of your screen so that it is beneath it or you should position it somewhere on the screen and set its property isHidden to true.

To programmatically show the keyboard you need to put your text field in focus. You simply call textField.becomeFirstResponder() to do so.

You should probably try and use interface builder (storyboard) to put all your views in but for sake of seeing things I will place it in code:

lazy var textField: UITextField = {
    let field = UITextField(frame: CGRect(x: 0.0, y: self.view.bounds.height, width: self.view.bounds.width, height: 50.0))
    self.view.addSubview(field)
    return field
}()

@IBAction private func showKeyboardPressed() {
    textField.becomeFirstResponder()
}

assuming that you managed to connect showKeyboardPressed to your button then this should already show a keyboard. Your text field however is still out of screen bounds and you can not see it. A "send" button is also missing. And the text field would be better off with constraints.

So to make things a bit better. Again, you are probably better of doing this in storyboard but I will demonstrate it in code...

@IBOutlet private var textFieldBottomConstraint: NSLayoutConstraint?

lazy var textFieldPanel: UIView = {
    let view = UIView(frame: CGRect(x: 0.0, y: self.view.bounds.height, width: self.view.bounds.width, height: 50.0))
    self.view.addSubview(view)
    view.backgroundColor = UIColor.gray
    
    let fieldBottomConstraint = NSLayoutConstraint(item: view, attribute: .bottom, relatedBy: .equal, toItem: self.view, attribute: .bottom, multiplier: 1.0, constant: 0.0)
    textFieldBottomConstraint = fieldBottomConstraint
    
    view.translatesAutoresizingMaskIntoConstraints = false
    self.view.addConstraint(.init(item: view, attribute: .left, relatedBy: .equal, toItem: self.view, attribute: .left, multiplier: 1.0, constant: 0.0))
    self.view.addConstraint(.init(item: view, attribute: .right, relatedBy: .equal, toItem: self.view, attribute: .right, multiplier: 1.0, constant: 0.0))
    self.view.addConstraint(fieldBottomConstraint)
    self.view.addConstraint(.init(item: view, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 50.0))
    
    return view
}()

lazy var textField: UITextField = {
    let field = UITextField(frame: CGRect(x: 0.0, y: 0.0, width: self.view.bounds.width, height: 50.0))
    textFieldPanel.addSubview(field)
    
    field.translatesAutoresizingMaskIntoConstraints = false
    self.view.addConstraint(.init(item: field, attribute: .left, relatedBy: .equal, toItem: textFieldPanel, attribute: .left, multiplier: 1.0, constant: 8.0))
    self.view.addConstraint(.init(item: field, attribute: .right, relatedBy: .equal, toItem: textFieldPanel, attribute: .right, multiplier: 1.0, constant: 8.0))
    self.view.addConstraint(.init(item: field, attribute: .top, relatedBy: .equal, toItem: textFieldPanel, attribute: .top, multiplier: 1.0, constant: 2.0))
    self.view.addConstraint(.init(item: field, attribute: .bottom, relatedBy: .equal, toItem: textFieldPanel, attribute: .bottom, multiplier: 1.0, constant: 2.0))
    
    return field
}()

@IBAction private func showKeyboardPressed() {
    textField.becomeFirstResponder()
    textFieldBottomConstraint?.constant = -360.0
}

Now there is view as a panel which holds your text field. There is an outlet made to bottom constraint which is pretty important so that you may move your text field panel around.

It is not animated or in any way nice. But it should be enough to demonstrate how things may be setup and used. To go a step further check this post to see how to correctly place your panel above the keyboard.

As for adding a button next to text field I expect you should have no problems since you appear to already have a working button.

Open keyboard with a textField on top of it on press of a button

1 Answers1