UIView atop the Keyboard similar to iMessage App

Question

currently I'm attempting to basically implement and exact copy of Apples iMessage App.

That means I need a UITextView that is docked at the bottom of the screen, and moves up when it becomes firstResponder. - That's pretty easy actually. There's a bazillion ways to do that and two of the most common are of course animating the view upwards or downwards if a notification was received. The other is to do it via the inputAccessoryView. Sadly some of the features the one has, the other doesn't. And they seem to be mutually exclusive.

The big problem is rotation.

I've digged through roughly at least seven different github projects, all of them re-implementing the same functionality/behavior, that I'm trying to achieve, but literally all of them failing miserably.

HPGrowingTextView for instance, which the official Facebook/FacebookMessenger/(and possibly WhatsApp) Apps makes use of, is one big piece of junk-code. Take your iDevice, open the Facebook App, go the the Chat, pop the keyboard and rotate your device. If you pay attention you'll notice the input-bar jumping slightly and leaving some blank space between the keyboard's frame and its own. Then take a look at Apples implementation in iMessage when the keyboard is shown. It's perfect.

Other than that the contentOffset and EdgeInset-hacking that the HPGrowingTextView library makes use of gives me nightmares.

So I wanted to do it myself and start from scratch.

Right now I've got a very slick, elegant and hack-less implementation of a growing UITextView, but one part is missing.

Elegant rotation.

When I simply adjust the frames to their respective new positions in the willRotateToInterfaceOrientation:duration: method, everything ends up working perfectly BUT I have the same problem that HPGrowingTextView(see Facebook App) has. A litte bit of space between the inputview and the keyboard while the rotation takes place.

I found out that when rotating the device to landscape, the portrait keyboard which is currently shown does not "morph" but rather disappears (sends the 'willHide' notification) and a landscape version reappears (sending the 'willShow' notification). The transition is a very subtle fade and possibly some resizing.

I re-implemented my project using the inputAccessoryView to see what happens then and I was pleasantly surprised. The inputAccessoryView rotates in perfect sync with the keyboard. There's no space/gap between the two.

Sadly I have yet to come up with an idea how to have the inputAccessoryView dock to the bottom of the screen and NOT disappear/move out of it alongside the keyboard...

What I don't want are hack-y solutions like,..."lowering the frame slightly in the toInterfaceOrientation's CoordinateSystem and then moving it back up when the didRotateFrom... was called."

I know of one other app that has managed to implement such behavior and it's the "Kik Messenger".

Does anyone have an idea, advice or a link that I haven't seen yet covering that topic?

Thanks a bunch!

Note: Once this problem is solved I will open source the project for everyone to profit because almost every implementation I was able to find over the course of the past few days, is a mess.

Answer 1

I recently ran into the same problem, and had to build out a custom solution as I wasn't entirely happy with the available 3rd party libraries. I've split out this implementation into it's own GitHub project:

MessageComposerView

From some simple testing on iOS 6.1 7 & 8 simulators the rotations seem to properly follow the keyboard. The view will also grow with text and resize automatically on rotation.

You can use a very basic init function like so to create it with screen width and default height e.g.:

self.messageComposerView = [[MessageComposerView alloc] init];
self.messageComposerView.delegate = self;
[self.view addSubview:self.messageComposerView];

There are several other initializers that are also available to allow you to customize the frame, keyboard offset and textview max height. See readme for more!

Answer 2

I have been successful at solving the problem in quite an elegant manner (I think,...).

The code will be released on Github next week and linked to in this answer.

--

How it's done: I made the rotation work by choosing the inputAccessoryView-way of doing it.

Nomenclature:

1. 'MessageInputView' is a UIView containing my 'GrowingUITextView' (it also contains a "Send" Button and the background image).
2. 'ChatView' is the view that belongs to the ChatViewController that displays all the Chatbubbles and has my 'MessageInputView' docked at the bottom.
3. 'keyboardAccessoryView' is an empty UIView sized: CGRect(0,0,0,0).

I needed to figure out how to have the MessageInputView stick around on the screen when the keyboard was dismissed. That was the tricky part. I did this by creating another view (keyboardAccessoryView) and had my GrowingUITextView use it as its inputAccessoryView. I retained the keyboardAccessoryView because I'd need the reference to it later on.

Then I remembered some of the stuff I did in my other attempt (animating the MessageInputView's frames around the screen whenever a keyboard notification arrived).

I added my MessageInputView as a subview to my ChatView (at the very bottom). Whenever it is activated and the willShow: methods is called by a keyboard notification, I manually animate the MessageInputView's frame to it's designated position up top. When the animation finishes and the completion block executes I remove the subview from the ChatView and add it to the keyboardAccessoryView. This causes another notification to be fired off because the keyboard is re-loaded EVERY time the inputAccessoryView's frame/bounds are changed!. You need to be aware of that and handle it appropriately!

When the keyboard is about to dismissed, I convert my MessageInputView's frame to my ChatView's coordinate system and add it as a subview. Thus it is removed from my keyboardAccessoryView. I then resize the keyboardAccessoryView's frame back to CGRect(0,0,0,0) because otherwise the UIViewAnimationDuration will not match! Then I allow the keyboard to be dismissed and I have my MessageInputView follow it from above and eventually dock at the bottom of the screen.

This is quite a lot of work for very little gain though.

--

Take care.

PS: If someone figures out an easier way to do it (perfectly) let me know.