美文网首页iOS开发ios 开发iOS 砖家纪实录
详细实现微信输入框效果(textView自适应文字高度)

详细实现微信输入框效果(textView自适应文字高度)

作者: 袁峥 | 来源:发表于2016-08-02 18:23 被阅读9949次

前言

最近会不断推出一些轮子,这次写了一个控件,类似微信输入框,评论View,随着文字增加,textView自增长高度
如果喜欢我的文章,可以关注我微博:袁峥Seemygo

Demo效果:

效果图.gif

Demo演示:

1.添加底部View,到最底部

  • 1.1 底部View都是显示到最下面,并且都是固定死的,采用Xib或者storyboard搭建
1.png

2.搭建底部View

2.png 3.png

3.拖线

  • 3.1 获取底部View距离底部的约束,做键盘弹出效果,底部View随着键盘弹出,而往上移动效果
4.png
    // 监听键盘弹出
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillChangeFrame:) name:UIKeyboardWillChangeFrameNotification object:nil];
    
    // 键盘弹出会调用
- (void)keyboardWillChangeFrame:(NSNotification *)note
{
    // 获取键盘frame
    CGRect endFrame = [note.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];
    
    // 获取键盘弹出时长
    CGFloat duration = [note.userInfo[UIKeyboardAnimationDurationUserInfoKey] floatValue];
    
    // 修改底部视图距离底部的间距
    _bottomCons.constant = _bottomCons.constant == 0?endFrame.size.height:0;
    
    // 约束动画
    [UIView animateWithDuration:duration animations:^{
        [self.view layoutIfNeeded];
    }];
}


  • 3.2 获取底部View高度的约束,当文字修改,去修改底部View整体高度
5.png
  • 3.3 获取文本框输入框
6.png

4.监听文本输入框,文字高度改变

  • 修改底部高度约束就好了
    // 监听文本框文字高度改变
    _inputView.yz_textHeightChangeBlock = ^(NSString *text,CGFloat textHeight){
        // 文本框文字高度改变会自动执行这个block,修改底部View的高度
        // 设置底部条的高度 = 文字高度 + textView距离上下间距高度(10 = 上(5)下(5)间距总和)
        _bottomHCons.constant = textHeight + 10;
    };


源码

点击这下载源代码

相关文章

网友评论

  • 032c6843a285:用代码怎么写,
  • iamgaoshuai:点击enter是换行 添加个发送按钮就好了
  • iOSNoteByNiu:老师,demo下载不了,还有其他的地址吗,谢谢
  • Thebloodelves:表格视图里面的输入框,自动变高怎么办呢?主要是要调用表格视图的reloadData,这样就输入框就失去第一响应者了,求指导
    liangdahong:@Thebloodelves iOS8使用自适应可以自动变高,设置uitextview 不可以滚动
  • 蒋昉霖:如果放在tableview上怎么实现tableview跟着动
    蒋昉霖:@蒋昉霖 老师能不能提供一下demo,就是应用在tableview上的
  • 2e536657cfdf:老师。我设置了最大行数,在iOS8上,输入到最大行数后,inputView里的文字不会自动上移,也没有办法拖动,导致看不到新输入的内容。在iOS9以上就不会出现。这是什么情况??
    2e536657cfdf:@爃少 学习了哈,谢谢哈。
    爃少:@Leagan 我这里有解决bug的方法,有兴趣可以看看http://www.jianshu.com/p/e21f9852ae8e
  • bf5d0d15ef66:切换使用了搜狗输入法,逻辑开始混乱,输入框上移和回落刚好相反(输入时回落,退出输入时textview上移)
    袁峥:@Top_Moon ok 回去看看
  • 长空北:输入4行以后再输入,无法滚动,有的时候键盘会挡住输入框,楼主加油
    袁峥:@长空北 你设置最大行数就好了
  • by小杰:怎么在键盘第二次弹出的时候会挡住输入框呢? 感觉有点问题.....期待您的更新
    袁峥:@by小杰 OK 回去看看
  • 老王技术栈:呵呵。跟手动计算貌似没啥区别
    老王技术栈:@峥吖 其实我也是新手。一知半解的理解錒也不知道对不对。
    袁峥:@wowo草民 嗯嗯

本文标题:详细实现微信输入框效果(textView自适应文字高度)

本文链接:https://www.haomeiwen.com/subject/xrzfsttx.html