iOS即时通讯输入框随字数自适应高度

灰太狼 2022-05-12 06:38 175阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/13210.html][http_www.demodashi.com_demo_13210.html]

### 前言 ###

本人最近在研究socket与聊天界面的UI，在写聊天界面UI的时候是模仿微信的界面其中的文字输入框会随着字数的多少而自适应高度，当然超过某个行数输入框的高度就不会增加了变为可滚动，

### 具体效果 ###

> 运行效果图

![f1Kpa8y5XBLqD8hzajc.gif][]

### 实现过程 ###

我的思路是用约束来实现，输入区域用UITextView来实现；约束可以使用AutoLayout或者是第三方库Masonry来实现，但是他们的实现原理是一样的。为了方便我使用了Xib加AutoLayout来实现的，我是根据UITextView的字数，宽度固定来计算出文字的高度，从而实现UITextView的高度自适应。

我们都知道一般的聊天软件的界面（微信为例）输入框左边是一个按钮切换语音或者文字，输入框右边是表情符号和切换出发送照片等功能；当然本文主要是介绍输入框TextView的自适应，原谅我把其他东西省略了。首先textView需要一个BackVew，我们拖进去一个UIview，让它相对于父视图居左居右为0，居底部也为0，另外还需要给它一个初始高度，一般情况下是textView是一行文字的高度+textView距离它的顶部距离和底部距离。比如，我让textView距离它的backView底部与顶部分别是5，textView的字号是系统17号字，那么textView是一行的时候它的高度就是37，而这时候backView的初始高度就是37+5+5=47。textView居底部与顶部分别是5，距离左右的具体可以根据你们设计给的UI而定。这里的关键是当textView的字数变化时，我们通过计算得到当前字数应该显示的高度，我们得到这个值后适当的调增backView的高度，因为backView是相对于底部约束，增加高度后就会向上增加，而textView是依据backView的顶部与底部来约束的所以就会跟随者backView的高度变化而变化。从而实现textView自适应高度。

完后上面的约束之后，我们需要把backView、textView、backView的高度约束以及backView距离底部的约束都拉到代码中成为属性。

![FhCWN6Y0FuFoF5AEKQ3.png][]

在viewdidload方法里面实现textView的一些设置

self.textView.delegate = self;
    
    self.textView.scrollEnabled = NO;
    
    self.textView.scrollsToTop = NO;
    
    self.textView.layer.borderWidth = 1;
    
    self.textView.layer.cornerRadius = 5;
    
    self.textView.font = [UIFont systemFontOfSize:17];
    
    //当textview的字符串为0时发送（rerurn）键无效
    
    self.textView.enablesReturnKeyAutomatically = YES;
    
    self.textView.keyboardType = UIKeyboardTypeDefault;
    
    //键盘return样式变成发送
    
    self.textView.returnKeyType = UIReturnKeySend;

当键盘升起的时候我们需要调整backView具体底部的距离，防止键盘升起遮挡textView，所以要实现监听键盘高度

//监听键盘
    
    [[NSNotificationCenter defaultCenter] addObserver:self
    
    selector:@selector(keyboardWasShown:)
    
    name:UIKeyboardWillChangeFrameNotification object:nil];

实现当键盘升起或者落下的方法

- (void)keyboardWasShown:(NSNotification*)aNotification {
    
    // 获取键盘弹出时长
    
    CGFloat duration = [aNotification.userInfo[UIKeyboardAnimationDurationUserInfoKey] floatValue];
    
    //键盘高度
    
    CGRect keyBoardFrame = [[[aNotification userInfo] objectForKey:UIKeyboardFrameEndUserInfoKey] CGRectValue];
    
    CGFloat screenH = [UIScreen mainScreen].bounds.size.height;
    
    //调增backView距离父视图底部的距离
    
    _backViewBottomHCons.constant = keyBoardFrame.origin.y != screenH?keyBoardFrame.size.height:0;
    
    [UIView animateWithDuration:duration animations:^{
    
    [self.view layoutIfNeeded];
    
    }];
    
    }

设置textView的最大高度，这个与你设置的最大行数有关

// 计算最大高度 = (每行高度 * 总行数 + 文字上下间距)
    
    _maxTextH = ceil(self.textView.font.lineHeight * 4 + self.textView.textContainerInset.top + self.textView.textContainerInset.bottom);

实现textView的代理方法，下面的代码方法是当textView的text发生改变时会调用，我们可以计算文字的高度，调整backView的高度。

- (void)textViewDidChange:(UITextView *)textView {
    
    NSInteger height = ceilf([self.textView sizeThatFits:CGSizeMake(self.textView.bounds.size.width, MAXFLOAT)].height);
    
    if (_textOldH!=height) {
    
    // 最大高度，可以滚动
    
    self.textView.scrollEnabled = height > _maxTextH && _maxTextH > 0;
    
    if (self.textView.scrollEnabled==NO) {
    
    _backViewHCons.constant = height + 10;//距离上下边框各为5，所以加10
    
    [self.view layoutIfNeeded];
    
    }
    
    _textOldH = height;
    
    }
    
    }

我们上面讲键盘的return键设置了样式是send，所以当用户再点击return键时不应该是换行而是实现send的业务逻辑，所以需要实现下面的代理。

- (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text{
    
    if (textView==self.textView && [text isEqualToString:@"\n"]){ //判断输入的字是否是回车，即按下return
    
    //在这里做你响应return键的代码
    
    textView.text = nil;
    
    [self textViewDidChange:textView];
    
    return NO; //这里返回NO，就代表return键值失效，即页面上按下return，不会出现换行，如果为yes，则输入页面会换行
    
    }
    
    return YES;
    
    }

总结一下，这里的关键是当textView的字数变化时，我们通过计算得到当前字数应该显示的高度，我们得到这个值后适当的调增backView的高度，因为backView是相对于底部约束，增加高度后就会向上增加，而textView是依据backView的顶部与底部来约束的所以就会跟随者backView的高度变化而变化。从而实现textView自适应高度。

### 补充 ###

暂时没有

iOS即时通讯输入框随字数自适应高度

> 代码地址如下：  
> [http://www.demodashi.com/demo/13210.html][http_www.demodashi.com_demo_13210.html]
> 
> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_13210.html]: http://www.demodashi.com/demo/13210.html
[f1Kpa8y5XBLqD8hzajc.gif]: /images/20220512/7dd17bac4e6341f88a30cf5a68eb34f1.png
[FhCWN6Y0FuFoF5AEKQ3.png]: /images/20220512/b876002279e646019c2f0af800f27dae.png

发表评论取消回复

表情：

评论列表（有 0 条评论，175人围观）

还没有评论，来说两句吧...

相关阅读

相关 ios开发-确定/自适应textView的高度

昨天在做学院客户端的时候,随手clean了下项目。不过xcode又闹脾气了，textview里面的字体大小居然在真机运行的时候普遍小了2号.. 这下蛋疼了。应该

布满荆棘的人生/ 2022年09月17日 10:24/ 0 赞/ 461 阅读

相关总结iframe高度自适应，自适应子页面高度

在网上找了很多iframe的高度自适应，发现很多兼容性都不是很好，于是自己总结了一下。页面html节点上要有 <!DOCTYPE html PUBLIC "-//W3C

怼烎@/ 2022年07月24日 10:07/ 0 赞/ 311 阅读

相关 IOS-UILabel自适应高度

NSString oldInfoStrTmp=@“akldjfkajfkldajkfljaskljfkldsajfk”; UILabel oldInfo=[[

妖狐艹你老母/ 2022年06月13日 00:16/ 0 赞/ 181 阅读

相关 input输入框的宽度自适应

场景：在写H5移动端的时候，常常会遇到再顶部有搜索框的情况，如下图： ![这里写图片描述][SouthEast] 因为要适应不同的移动设备的屏幕宽度，若将所有的元素宽度

矫情吗；*/ 2022年06月07日 00:25/ 0 赞/ 711 阅读

相关 iOS即时通讯输入框随字数自适应高度

> 代码地址如下： > [http://www.demodashi.com/demo/13210.html][http_www.demodashi.com_demo_132

灰太狼/ 2022年05月12日 06:38/ 0 赞/ 176 阅读

相关 div或img图片高度随宽度自适应（实用）

原文出处：[https://blog.csdn.net/zh\_rey/article/details/69666232][https_blog.csdn.net_zh_rey

缺乏、安全感/ 2022年05月11日 04:50/ 0 赞/ 331 阅读

相关 iframe自适应高度

<iframeοnlοad="this.height=this.document.documentElement.scrollHeight"name="reportsFrame

柔光的暖阳◎/ 2022年04月14日 05:20/ 0 赞/ 342 阅读

相关多行文本框随字数增加，高度增加

我查了N种方法，试了N次用textarea添加属性或者用js都不管用，只能用div模仿div文本框（文本框高度自适应） <div contenteditable="true"

- 日理万妓/ 2022年03月31日 05:40/ 0 赞/ 244 阅读

相关 textarea文本框根据输入内容自适应高度

![20190523113938550.png][] <textarea oninput="autoTextAreaHeight(this)" ></textar

素颜马尾好姑娘i/ 2022年01月28日 05:27/ 0 赞/ 362 阅读

相关高度自适应

开发中遇到一个问题，要求不管在多高的屏幕下，图片(什么都行)到底部的距离都应该和psd一致，flash里面的问题 ![70][] //定义宽度 var psdWidth

约定不等于承诺〃/ 2021年09月16日 06:40/ 0 赞/ 511 阅读