IOS a relatively perfect Growing TextView

The article why

Now that it’s 2019, it’s pretty common for apps to use autoheight boxes, from the Chat interface of instant messaging to the comment function of social apps. But writing a heightening input box is easier than writing it well. At present, there are still some defects in the input box of some mainstream apps on the market. For example, the text blocks part of the text and the deviation occurs when pasting a large number of words. The specific problems will be analyzed in detail below.

Now iOS development has gone through the initial stage of building UI and common business functions. In order to win the favor of users, in addition to App functions and UI design, details of interactive experience are crucial. General users can input normally as long as they use the input box, 90% of users will not be aware of some details of the input box, but developers should know these details (bugs) and deal with them.

The pain of input boxes in mainstream apps

Text offset appears in pasted text

This is technically a bug, since pasting is a very common operation.

Block some text

An input field can display either N lines of text or N + 1 lines, but N + 0.5 lines is a bit weird. This problem doesn’t have any effect on App functionality, but I didn’t expect it to be so common and pervasive in so many apps. After testing several apps, only QQ’s input box did the best, and problems such as pasting and blocking text did not exist at all.

Perfect input box

It is relatively easy to write a heightening input box. The general process is to add four constraints to the textView: left, right, down/up, and height. Then listen for notification of text changes and modify the height of the input box. If you want to write it well, you need to spend time polishing it. I’m going to focus on some of the details that you might encounter.

1, paste text, text offset

What I did was inherit UITextView and rewrite the setBounds method, retuning contentOffset

- (void)setBounds:(CGRect)bounds
{
    [super setBounds:bounds];
    //    NSLog(@"bounds:%@", NSStringFromCGRect(bounds));
    if (self.contentSize.height <= self.bounds.size.height + 1){
        self.contentOffset = CGPointZero; // Fix wrong contentOfset
    } else if(! self.tracking) { CGPoint offset = self.contentOffset;if (offset.y  > self.contentSize.height - bounds.size.height) {
            offset.y = self.contentSize.height - bounds.size.height;
            if(! self.decelerating && ! self.tracking && ! self.dragging) { self.contentOffset = offset; } // Fix wrong contentOfset when paster huge text } } }Copy the code

2. The gap between the text and the top of the input box is larger and smaller

Normally scroll the text of the input box, and the text can be scrolled to the top of the control. And QQ input box, no matter how to slide text, text and input box top have a fixed interval.

TextContainerInset (8, 0, 8, 0) is the default value. This means that by default the text and the input field have an 8pt offset at the top, so when there is a lot of text to scroll up, the gap between the text and the top of the control is reduced to 0.

The only solution I can think of is to set the textContainerInset to all 0 (or top/bottom to 0) so that the text is next to the input box and the fixed space between the text and the top of the input box is 0. Then I’m going to add a containerView to the UITextView, which is a bit taller than the UITextView, so that there’s a constant spacing between the top and bottom.

3. Block some text

This problem is caused by the single line height * maximum number of lines! Font. LineHeight * number of lines is the maximum height of the input box. This will not have the problem of blocking part of the text

GrowTextView

Next is my own writing since the height of the input box, so far did not find any problems, at least not the above mentioned problems.

  • GrowTextView

[Reference]

  • JSQMessagesViewController
  • Yuan Zheng -textView adaptive text height