UIView atop the Keyboard similar to iMessage App UIView atop the Keyboard similar to iMessage App ios ios

UIView atop the Keyboard similar to iMessage App


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.

MessageComposerView

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!


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.


Here's a UITextView subclass that is working properly on iOS 9.3.1 and 8.3.1. It takes care of growing and shrinking with limits, while keeping the caret always in the right place and animating smoothly.

Sticking the view over the keyboard is trivial, with many solutions to be found easily, so it's not covered...

I could not find any made-solutions that were production ready so I ended up working on this from scratch. I had to work out a lot of little problems along the way.

Code comments should give you an idea of what's going on.

I have shared this on my Github, Contributions greatly appreciated.

Notes

  • Not tested to support landscape
  • Not tested on i6+

Demo

enter image description here

(after max height element becomes scrollable. Forgot to drag the demo, but this is working as expected as well... )

Subclass

class ruuiDynamicTextView: UITextView {    var dynamicDelegate: ruuiDynamicTextViewDelegate?    var minHeight: CGFloat!    var maxHeight: CGFloat?    private var contentOffsetCenterY: CGFloat!    init(frame: CGRect, offset: CGFloat = 0.0) {        super.init(frame: frame, textContainer: nil)        minHeight = frame.size.height        //center first line        let size = self.sizeThatFits(CGSizeMake(self.bounds.size.width, CGFloat.max))        contentOffsetCenterY = (-(frame.size.height - size.height * self.zoomScale) / 2.0) + offset        //listen for text changes        NSNotificationCenter.defaultCenter().addObserver(self, selector: #selector(textChanged), name: UITextViewTextDidChangeNotification, object: nil)        //update offsets        layoutSubviews()    }    required init?(coder aDecoder: NSCoder) {        fatalError("init(coder:) has not been implemented")    }    override func layoutSubviews() {        super.layoutSubviews()        //Use content size if more than min size, compensate for Y offset        var height = max(self.contentSize.height - (contentOffsetCenterY * 2.0), minHeight)        var updateContentOffsetY: CGFloat?        //Max Height        if maxHeight != nil && height > maxHeight {            //Cap at maxHeight            height = maxHeight!        } else {            //constrain Y to prevent odd skip and center content to view.            updateContentOffsetY = contentOffsetCenterY        }        //update frame if needed & notify delegate        if self.frame.size.height != height {            self.frame.size.height = height            dynamicDelegate?.dynamicTextViewDidResizeHeight(self, height: height)        }        //constrain Y must be done after setting frame        if updateContentOffsetY != nil {            self.contentOffset.y = updateContentOffsetY!        }    }    func textChanged() {        let caretRect = self.caretRectForPosition(self.selectedTextRange!.start)        let overflow = caretRect.size.height + caretRect.origin.y - (self.contentOffset.y + self.bounds.size.height - self.contentInset.bottom - self.contentInset.top)        if overflow > 0 {            //Fix wrong offset when cursor jumps to next line un explisitly            let seekEndY = self.contentSize.height - self.bounds.size.height            if self.contentOffset.y != seekEndY {                self.contentOffset.y = seekEndY            }        }    }}protocol ruuiDynamicTextViewDelegate {    func dynamicTextViewDidResizeHeight(textview: ruuiDynamicTextView, height: CGFloat)}


matomo