Swift: Creating a border or a thin line on top of the displaying Keyboard in iOS

Question

as the topic already says, i try to create a small line on top of my UIKeyboard appearance. The reason is, if i pop up the white keyboard while having a white background, it looks just awful.

One idea would be to create a thin 1px line and place it on the bottom, hide it and show it whenever there is the keyboard displayed and align it with auto layout. The disadvantage of this idea is to do it in every view.

Thanks for your ideas.

@LyndseyScott Sounds like overkill: read rob's answer below. — Nicolas Miari, Jul 08 '16 at 06:45
@NicolasMiari The OP said this was "one idea" so I assumed he had many and would possibly want to customize it in some other way -- ex. a different background color. — Lyndsey Scott, Jul 09 '16 at 12:57
One idea to tackle his requirement of **having a one pixel line separating the keyboard from the background**, and nothing else. He just needs a line. No custom keyboards. — Nicolas Miari, Jul 09 '16 at 14:36

score 6 · Accepted Answer · edited May 23 '17 at 10:29

Every UITextField and UITextView has an inputAccessoryView property (inherited from the UIResponder superclass). When one of these views becomes first responder and the system presents the on-screen keyboard, the system automatically displays the inputAccessoryView of the first responder along the top of the keyboard. For example, in this answer, the dark bar with the left and right arrows and the “Done” button is an inputAccessoryView.

So the easiest way for you to get a thin line on top of the keyboard is probably to create a one-point tall view and set it as the inputAccessoryView of your text field or text view. Set the background color of the accessory view to a dark color.

Yep, thats the right thing, os i accept your answer, i just add some code for people to make it easier to follow up. — Fry, Jul 10 '16 at 21:22

score 5 · Answer 2 · answered Feb 24 '17 at 04:39

Easiest way to do this to add an inpustAccessoryView for textFiled when it becomes first responder and the system presents the on-screen keyboard.

Try this out: Swift 3:

func textFieldShouldBeginEditing(_ textField: UITextField) -> Bool {   

        let separatorView = UIView(frame:CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 1))
        separatorView.backgroundColor = UIColor.lightGray
        textField.inputAccessoryView = separatorView

    return true
}

score 2 · Answer 3 · answered Jul 10 '16 at 21:25

So as Rob already wrote, the AccessoryView is the correct and smoothest solution, because Apple solves all animations, displaying and so on, in a correct way so no worry to take care about anything else.

I solved it as an extension. I wanted it to display a small devider on the bottom so i have a closed Numeric keyboard:

Swift 2.0:

extension UITextField {

override public func becomeFirstResponder() -> Bool {
    self.addSeparatorInputAccessoryIfNumericKeyboardOnPhone()
    return super.becomeFirstResponder()
}

func addSeparatorInputAccessoryIfNumericKeyboardOnPhone() {
    guard self.keyboardType == .NumberPad else {
        return
    }

    guard UIDevice.currentDevice().userInterfaceIdiom == .Phone else {
        return
    }

    let view = UIView(frame: CGRectMake(0, 0, 0, 1 / UIScreen.mainScreen().scale))
    view.backgroundColor = UIColor.lightGrayColor()
    self.inputAccessoryView = view
}

}

this worked for me but it creates another problem. the cursor of textfiled becomes invisible after adding this extenssion. and thats critical. — Tushar Korde, Feb 24 '17 at 04:35

Swift: Creating a border or a thin line on top of the displaying Keyboard in iOS

3 Answers3