iOS 上一个相对完善的 Growing TextView（高度自适应输入框）

关于 GrowTextView

关于缘由

现在已经是2019年，App中使用自适应高度的输入框已经很常见了，例如即时通讯的Chat界面、社交应用中的评论功能等都可以看到自适应高度的输入框。但写出一个自适应高度的输入框容易，写好却很难。目前市面上的主流应用的一些输入框仍然存在一些瑕疵，例如：文字被遮挡一部分、粘贴大量文字时出现偏移，具体问题下面将详细分析。

iOS开发已经超过了搭建UI和普通业务功能的初级阶段，App要想赢得用户青睐，除了App的功能、UI设计，交互体验的细节处理至关重要。一般用户只需要能够正常运行输入即可，90%的用户不会注意到输入框的一些细节，但作为开发者应该知道这些细节(bug)并进行处理。

关于主流App的输入框之痛

关于粘贴文本出现文字偏移

严格来说这个问题算是一个bug，因为粘贴操作还是很常见的。

关于挡住部分文字

这个问题对App功能没有影响，但如此多的App都有这个问题，且非常普遍，这让我有些惊讶。测试了多个App后，只有QQ的输入框做得最好，粘贴和一个文字遮挡的问题都不存在。

比较完美的输入框

实现一个自增高的输入框相对简单，基本步骤是给 textView 添加左、右、下/上、高度四个约束，然后监听文字变化的通知，进而调整输入框的高度。接下来我将重点介绍大家可能遇到的一些细节问题。

1、粘贴文本，文字偏移

我的做法是继承 UITextView 并重写 setBounds 方法，重新调整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
        }
    }
}

2、文字离输入框顶部间隙时大时小

正常情况下滚动输入框的文字，文字可以滚动到控件顶部。而 QQ 的输入框，不管怎么滑动文字，文字和输入框顶部都有一段固定间隔。

先了解输入框的一个属性textContainerInset，这个值默认是 (8, 0, 8, 0)，就是说默认情况下文字和输入框顶部有 8pt 的偏移，所以当文字输入较多的时候文字向上滚动，那么文字和控件顶部间隙会减小到 0。

实现 QQ 输入框的效果，我能想到的方案是把textContainerInset全设置为 0（或者 top/bottom 为 0），这样文字就紧挨着输入框，文字和输入框顶部的固定间距就是 0 了。接着要给UITextView添加一个containerView，containerView竖向比UITextView高出一部分，从而实现顶部/底部的固定间距。

3、挡住部分文字

这个问题是因为 单行文字高度 * 最大行数 != 输入框的最大高度，输入框的最大高度可不是随便设置的。首先确定输入框的 font 和最大行数，font.lineHeight * 行数 就是输入框的最大高度。这样就不会出现文字挡住一部分的问题了

GrowTextView

接下来就是我自己编写的自增高输入框了，目前没有发现什么问题，至少没有上面提到的问题。

GrowTextView

[参考]

需求

安装

手册

将JLTextContentView.h/m和JLTextView.h/m添加到您的项目。

Cocoapods. [推荐]

基础库可以通过CocoaPods获取。要安装，只需在Podfile中添加以下行

pod 'GrowTextView', '~> 1.0'

作者

wuzhenli, [email protected]

许可

GrowTextView遵循MIT许可。更多信息请参阅LICENSE文件。

GrowTextView 1.1

GrowTextView 1.1

GrowTextView 1.1

关于 GrowTextView

关于缘由