Swift: FB Messenger - Handling the Keyboard Showing (Ep 7)

Today, I'll show you guys how to properly handle the UI when the keyboard shows itself. We do this by add a text input component into our ChatLogController and animating this view above the keyboard frame. We do all of this by modifying a simple bottom constraint via Auto Layout.

Lastly, we also handle the case where the keyboard is dismissed by reanimating the text input view back down to the bottom of the screen.

Previous Lessons:
How to create Chat Bubbles (Part 1):
Chat Bubble with Tails (Part 2):

Completed source code available here:

[cfrasier]

Still using this in 2020. Thank you for all of your clear explanations.

[mpwr]

If you'd like to dismiss the keyboard if the user taps anywhere (not only on the bubbles), I suggest adding a tap gesture recognizer directly on the controller referring to a method calling endEditing on your message field. Eg. self, action: directly in viewDidLoad() of your controller and implementing the in a method called dismissKeyboard() in this example

[NoaWitte]

Your videos are great. I really enjoy them! I've seen a lot of Swift videos, both free and paid curses, and you're definitely one the best at teaching. Keep it up!

[mobilizeskating]

hey guys. I spent a long time figuring this out in swift 3. But his userInfo.. keyboard frame doesn't work in swift 3, and the suggestions to cast the UIKeyboardFrameEndUserInfoKey as AnyObject doesn't work either.

what i did that worked was..

let keyboardFrame = as! NSValue).cgRectValue
bottomConstraint?.constant = -keyboardFrame.height + 48 (now that its force casted as an NS value, it doesnt need to be force unwrapped anymore)

Hope this helps!

[sameersafwanwadud]

hey guys if you're still having trouble with the messages partially hiding behind the textfield then try this
collectionView?.contentInset = UIEdgeInsetsMake(10, 0, 55, 0)

[imaginsa]

I know this video is kind of old, but maybe you'll assist me anyway. How would I change the UITextField to be multiline and expand the height to about 6 lines while the user is typing, similar to what Whatsapp does? I have tried replacing the UITextField with a UITextView, but this removes the placeholder feature and causes the text to be two lines from the start which makes it look a lot different from your example.

[MohammadHasanSaffari]

you're great man ! thanks for all free videos. saved me :-*

[widden_]

this is what i needed, thank you man. subscribed

[emiliebellier]

Once again, you saved my day ! Thanks !! Please, keep on! ;)

[codeelsewhere]

as always, fantastic tutorial. thanks.

[mpvg]

Thanks for this set of videos. It's my first experience of not using storyboards to build a UI and it's certainly much quicker this way. I had a question about the home indicator on iPhone X and others. How do you adjust the text entry box and keyboard to allow for space for that at the bottom of the screen? Thanks.

[GREATVOVA]

Totally like this video! I finally fixed that chatting app!

[anselmCallie]

Great post again man! Now I wonder why neither FB messenger nor Whatapps don't move the text up when the keyboard show up ...

[SachinGupta-ugou]

Very very nice video. Just a quick question though on which I am still scratching my head. When the message bar goes up, how come the message list is resizing so that it stays flush to the beginning of the keyboard in order to make the last item scrollable to the top instead of getting hidden by the keyboard? I didn't notice anything that resized the frame of the message list!

[gothops]

I was following along with just building the stuff I'm trying to do, so I didn't start with a tab bar at the bottom. But now this results in the last message being hidden underneath the messageInputViewContainer. How could I adjust the collection view so that it thinks the bottom of the view is the top of messageInputViewContainer, as opposed to the bottom of the screen, which is currently what it's doing?


I'm also noticing when you press on a text bubble with the keyboard up it starts to edit the bubble. I managed to fix this with `textView.editable = false` when making `messageTextView`. But it doesn't hide the keyboard when I click on the bubble/text. I'll be looking up answers on my own but I'd love to hear your solutions!


This series has been incredible! Will definitely be looking into the others after I'm done with this. Thanks for all the work you put into these videos, very much appreciated!!! (sorry not sure why YT won't let me break this wall of text up into paragraphs)

[serjagopian]

Great tutorials! You are a master! I just have one question about the layout constraints. We never handled the layout changes that should be made when orientation is shifted. I found a couple of things on stack overflow, but I was wondering you as a professional how would you reset the auto layout constraints so that it would fit the landscape view. Thank you very much! Again great tutorials!

[ChashmeetSingh]

Really awesome series must say. Can you add a feature by which the input message view resizes when input content goes off the length of the view or if we hit enter. Like content shifts to the next line and so does the text view resizes ?
Thanks Brian!!

[ff]

awesome Video Brian! I have a question, how would you deal with swipe to delete if your using a collection view to look like a tableview? or how would you deal with any type of deletion on a collection view?

[mpasum]

Learned a lot from this tutorial. I have small request. Can you show how to add multiline text view instead of single line text. The "messages" app in iOS has the multi line text may be similar to that one.

[fcervantes]

How would you do this with keyboardDismissMode set to interactive? In other words having the keyboard gradually shift down when scrolling past a certain point, like in Messages