手把手教你实现微信聊天框随文本升高

当当当当,我胡汉三又回来了。今天介绍实现聊天的聊天框随文本升高,效果图如下

接下来让我们一步一步实现这个功能吧

Part1 实现textView自动升高

1.创建一个UITextView的分类 UITextView+AutoRise

@interface UITextView (AutoRise)

@property (nonatomic, assign) CGFloat defaultHeight;
@property (nonatomic, assign) CGFloat maxHeight;
@property (nonatomic, copy) void (^handler)(CGFloat expectHeight);

- (void)addAutoRiseHandlerWithdefaultHeight:(CGFloat)defaultHeight maxHeight:(CGFloat)maxHeight handler:(void (^)(CGFloat expectHeight))handler;

@end

接下来实现
- (void)addAutoRiseHandlerWithdefaultHeight:maxHeight:handler:方法

- (void)addAutoRiseHandlerWithdefaultHeight:(CGFloat)defaultHeight maxHeight:(CGFloat)maxHeight handler:(void (^)(CGFloat))handler
{

    self.defaultHeight = defaultHeight;
    self.maxHeight = maxHeight;
    self.handler = handler;

    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(textChange:) name:UITextViewTextDidChangeNotification object:nil];
}

因为是在分类中添加属性,所以需要使用runtime的关联对象(AssociatedObject)来添加。

- (CGFloat)maxHeight
{
    return [objc_getAssociatedObject(self, UITextRiseMaxHeight) floatValue];
}

- (CGFloat)defaultHeight
{
    return  [objc_getAssociatedObject(self, UITextRiseDefaultHeight) floatValue];
}

- (void (^)(CGFloat))handler
{
    return objc_getAssociatedObject(self, UITextRiseHandler);
}

-(void)setDefaultHeight:(CGFloat)defaultHeight
{
    objc_setAssociatedObject(self, UITextRiseDefaultHeight, @(defaultHeight), OBJC_ASSOCIATION_RETAIN);

}

- (void)setMaxHeight:(CGFloat)maxHeight
{
    objc_setAssociatedObject(self, UITextRiseMaxHeight, @(maxHeight), OBJC_ASSOCIATION_RETAIN);
}

- (void)setHandler:(void (^)(CGFloat))handler
{
    objc_setAssociatedObject(self, UITextRiseHandler, handler, OBJC_ASSOCIATION_COPY_NONATOMIC);
}

现在我们来实现textChange:方法

- (void)textChange:(NSNotification *)noti
{
    UITextView *inputTextView = noti.object;

    if (inputTextView != self) {
        return;
    }
    CGFloat expectHeight = 0.f;
    CGSize contentSize = inputTextView.contentSize;

    if(contentSize.height <= self.defaultHeight){

        expectHeight = self.defaultHeight;

    }else{
        expectHeight = contentSize.height;
        expectHeight = expectHeight > self.maxHeight ? self.maxHeight : expectHeight;

        if (expectHeight < self.maxHeight) {
            [inputTextView setContentOffset:CGPointMake(0, 0) animated:NO];
        }
    }

    if (self.handler) {
        self.handler(expectHeight);
    }
}

2.在StoryBoard中添加一个TextView,并设置好约束

将高度约束关联到控制器

3.在ViewDidLoad:中根据自己的需求设置自动升高

- (void)viewDidLoad {
    [super viewDidLoad];

    [_textView addAutoRiseHandlerWithdefaultHeight:_textViewHeightConstraint.constant maxHeight:100 handler:^(CGFloat expectHeight) {
        _textViewHeightConstraint.constant = expectHeight;
        [_textView layoutIfNeeded];
    }];
}

至此自动升高就完成了。

Part2 聊天中的聊天框实现

1.在StoryBoard中创建一个控制器(省略)
2.在控制器中添加一个view作为聊天的背景框 bottomBackgroundView
为背景设置一个背景色,并且设置好约束,见图

3.在bottomBackgroundView中添加一个textView

为textView添加好约束,见图

4.将添加的控件与控制器关联

5.在控制器中设置处理代码

- (void)viewDidLoad {
    [super viewDidLoad];

    __weak typeof(self)weakSelf = self;

    CGFloat defaultHeight = _bottomBackgroundViewHeightConstraint.constant - 8 * 2;//默认高度

    [_textView addAutoRiseHandlerWithdefaultHeight:defaultHeight maxHeight:100.f handler:^(CGFloat expectHeight) {
        __strong typeof(weakSelf) strongSelf = weakSelf;
        strongSelf.bottomBackgroundViewHeightConstraint.constant = expectHeight + 8 * 2;
        [strongSelf.bottomBackgroundView layoutIfNeeded];
    }];
}

效果如下:

你可以从这里下载[demo]

时间: 2024-10-29 03:14:12

手把手教你实现微信聊天框随文本升高的相关文章

(转)手把手教你自制微信公众号流量监控系统

手把手教你自制微信公众号流量监控系统 一.首先是使用的工具: 基于搜狗微信搜索的微信公众号爬虫接口.Flask.ZUI框架. 第一个接口也是我开发的,欢迎star哈~ 二.获取数据 使用第一个接口获取公众号数据~ 可以看到,公众号的一般信息已经拿到手. 现在,将其集成到我们的网站上: (嗯,UI比较简单....) 三.监控 还是使用第一个接口监控数据: 这里做了一个嵌套排序,可以按照阅读量排序. 集成到网站上:四.具体的文章流量 继承到网站: 如上图所示,既可以监控微信号“NUAA_1952”的

一旦手把手教你开发微信公众平台

一旦手把手教你开发微信公众平台 目录 一旦手把手教你开发微信公众平台 目录 1 初步认识微信公众平台 2 如何申请微信公众平台测试号 3 接口配置信息 4 环境搭建以及验证消息真实性 1: 初步认识微信公众平台 微信公众平台,简称weChat.曾命名为"官号平台"和"媒体平台",最终定位为"公众平台",无疑让我们看到一个微信对后续更大的期望.和新浪微博早期从明星战略着手不同,微信此时已经有了亿级的用户,挖掘自己用户的价值,为这个新的平台增加更优质

手把手教你做蓝牙聊天应用(五)-界面使用ConnectionManager

第5节 界面使用ConnectionManager ConnectionManager已经设计完成了,它的价值需要在ChatActivity中体现出来. 5.1 监听ConnectionManager 实现对ConnectionManager各个状态的监听,当ConnectionManager的状态有变化.收到发送的数据时,需要让ChatActivity知道,它才能将各种变化反应到用户界面上. 5.1.1 创建监听器 ConnectionManager定义了ConnectionListener接

手把手教你做蓝牙聊天应用(一)-设计方案

前言 通过"计算器"和"视频播放器"我们已经能够开始开发一些比较像样的应用了. 今天,我们将开始制作一个"蓝牙聊天"应用.这个应用其实很简单,没有炫酷的界面,就是一对一.通过蓝牙连接两台设备,让两个人互相发送信息. 可别觉得它太无聊.没有什么实用性,其实我们正是想通过它让你开始接触网络编程(蓝牙和wifi都是无线连接技术,它们的程序设计方法和思路非常的相似). 另外,学会了使用蓝牙,就为大家打开了技术开发的另一扇大门-物联网,现在很多物联网硬件都

[iOS]手把手教你实现微信小视频

本文个人原创,转载请注明出处,谢谢. 前段时间项目要求需要在聊天模块中加入类似微信的小视频功能,这边博客主要是为了总结遇到的问题和解决方法,希望能够对有同样需求的朋友有所帮助. 效果预览: 这里先罗列遇到的主要问题: 视频剪裁  微信的小视频只是取了摄像头获取的一部分画面 滚动预览的卡顿问题  AVPlayer播放视频在滚动中会出现很卡的问题 接下来让我们一步步来实现. Part 1 实现视频录制 1.录制类WKMovieRecorder实现 创建一个录制类WKMovieRecorder,负责视

手把手教你做Android聊天机器人

我相信大家应该知道有款应用叫小黄鸡吧! 如果不知道,那你见过那种可以秒回复的聊天应用么? 如果仍然没看到!那你总见过可以迅速回复你的微信公共账吧! 如果仍然....亲出门左拐 好,不多说. 首先大家都应该了解程序,程序就是由人为的设定搭建起来的一套系统, 这里的机器人也是,简单的原理就是当你输入关键字后,通过一套算法, 在数据库中找到与之最为匹配的内容在返回给你.这个已经有人实现,我们这节教程就用别人 已经实现好的东西去做一??个应用来玩耍~~ (当然如果你非要想知道如何去做,给我留言.看情况我

手把手教你建立微信公众平台

1.用电脑登录微信公众平台的官网:https://mp.weixin.qq.com/ 2.然后点击"注册"链接,注册一个帐号,点击后跳转到注册的页面: https://mp.weixin.qq.com/cgi-bin/readtemplate?t=register/step1_tmpl&lang=zh_CN 3.注册必须通过邮箱注册,而且,每个邮箱仅能申请一个帐号 4.注册后通过邮箱激活 5.然后,需要选择帐号类型!类型有订阅号.服务号.企业号三种.个人的话只能申请订阅号.区别

手把手教你刷微信运动的步数

1. 进入公众号[日行千里],回复任意数字,如图: 2.回复你的手机号,只是手机号,不带密码,这时你会收到一条短信: 3.将短信中的验证码回复到公众号: 4.回复步数,提示绑定微信,点击"绑定微信",如图: 5.长按跳转到新页面中的二维码,这时会弹出菜单,点击""识别图中的二维码" 6.这时跳转到新的页面,点击绑定设备: 7.返回[日行千里]公众号,回复步数,刷步完成,如图:

手把手教你做蓝牙聊天应用(六)-界面优化

第6节 应用的美化与完善 现在,我们还可以为聊天应用加上多国语言的支持和关于界面,把使用到的颜色和尺寸定义到资源文件当中,这样一来,安豆的蓝牙聊天应用就算是比较完整的完成了. 这两部分在以前"计算器"章节中,已经介绍过了,大家就自己动手吧. 这一节,我们将重点介绍聊天文字的背景图片是如何制作的. 6.1 9Patch图片的原理 观察一下安卓系统中需要经常用到的图片,可以发现: 很多要使用透明效果的地方在转角处: 很多图片不同的地方只在靠近边缘的地方,内部区域几乎都是一样的: 为此安卓系