iOS 类似微信,QQ聊天界面的气泡聊天简单实现Demo

以下是YYKit组件的源码分析,高级性能优化相关都在里面可以找到

YYwebImage超细源码分析
YYImage超细源码分析
YYModel源码分析
YYText源码分析

12.27日更新:分析了一个很牛B的聊天UI框架


进阶版高级UI实现


 帅气的我又来了,是不是帅气逼人。。。。。。    


来说说又是早些前,去面试了一些公司,有些喜欢打电话让你说说runtime,runloop什么的,这还好,关键遇到一个吊炸天的公司,我和一个哥们两个人去面试,到那里没都人理你啊,面试题也没有,坐在那发呆,接待我们的人很久才来,正好他们要写什么聊天功能还是干嘛,突然让我们两个快速撸一个聊天功能的界面,我没听错吧???!!!

当时,深井冰啊,尼玛深井冰啊,谁有空帮你们写demo啊,那么问题来了,尼玛就

一台电脑,我看了那个哥们,我果断告诉他我接个电话,,等我回来的时候,哥们已经在写tableView了,这代码风格,一看就不是本地人,赶紧坐在那膜拜。。。。。。这哥们写了很久,反正没写出来,然后那人一来问了他几句,,然后就没有然后了。


鸡汁的我一想,这个界面几秒钟不搞定了么




          


哎呦喂,看官别走啊,咱说点正事,他一看时间已经五点了,就说先这样吧。

喂喂喂!!! 110么,这里有人装逼,我还没操作呢,什么鬼啊???!!!

这什么面试啊,看别人写Demo啊,辣么奇葩的面试官

还告诉我等电话通知哦,亲。。。。。。


有完没完啊你,哎,sb博主,你弱智么,还写不写啊。。。。。。


上图



NOTE:

A: 需要注意键盘的监听高度问题

B:,气泡就这么小的,我们需要根据文本拉伸

stretchableImageWithLeftCapWidth:topCapHeight:  --->拉伸气泡

用它计算文本(boundingRectWithSize:)具体参数看文档吧


C:每次发文字的时候让ScrollView滚动到最后一个cell,用户可见


1.首先Demo这次没用AutoLayout布局了,来看下关键的cell部分以及键盘部分

@property (nonatomic,strong) UIImageView *headImageView; // 用户头像
@property (nonatomic,strong) UIImageView *backView; // 气泡
@property (nonatomic,strong) UILabel *contentLabel; // 气泡内文本- (void)refreshCell:(MKJChatModel *)model; // 安装我们的cell

- (void)refreshCell:(MKJChatModel *)model
{// 首先计算文本宽度和高度CGRect rec = [model.msg boundingRectWithSize:CGSizeMake(200, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:17]} context:nil];// 气泡UIImage *image = nil;// 头像UIImage *headImage = nil;// 模拟左边if (!model.isRight){// 当输入只有一个行的时候高度就是20多一点self.headImageView.frame = CGRectMake(10, rec.size.height - 18, 50, 50);self.backView.frame = CGRectMake(60, 10, rec.size.width + 20, rec.size.height + 20);image = [UIImage imageNamed:@"bubbleSomeone"];headImage = [UIImage imageNamed:@"head.JPG"];}else // 模拟右边{self.headImageView.frame = CGRectMake(375 - 60, rec.size.height - 18, 50, 50);self.backView.frame = CGRectMake(375 - 60 - rec.size.width - 20, 10, rec.size.width + 20, rec.size.height + 20);image = [UIImage imageNamed:@"bubbleMine"];headImage = [UIImage imageNamed:@"naruto@3x"];
//        image.leftCapWidth		}// 拉伸图片 参数1 代表从左侧到指定像素禁止拉伸,该像素之后拉伸,参数2 代表从上面到指定像素禁止拉伸,该像素以下就拉伸image = [image stretchableImageWithLeftCapWidth:image.size.width/2 topCapHeight:image.size.height/2];self.backView.image = image;self.headImageView.image = headImage;// 文本内容的frameself.contentLabel.frame = CGRectMake(model.isRight ? 5 : 13, 5, rec.size.width, rec.size.height);self.contentLabel.text = model.msg;
}

2.控制器注册两个监听


// 注册键盘的通知hide or show[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyBoardShow:) name:UIKeyboardWillShowNotification object:nil];[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardHide:) name:UIKeyboardWillHideNotification object:nil];

// 监听键盘弹出
- (void)keyBoardShow:(NSNotification *)noti
{// 获取到的Noti信息是这样的
//    NSConcreteNotification 0x7fde0a598bd0 {name = UIKeyboardWillShowNotification; userInfo = {
//        UIKeyboardAnimationCurveUserInfoKey = 7;
//        UIKeyboardAnimationDurationUserInfoKey = "0.25";
//        UIKeyboardBoundsUserInfoKey = "NSRect: {{0, 0}, {375, 258}}";
//        UIKeyboardCenterBeginUserInfoKey = "NSPoint: {187.5, 796}";
//        UIKeyboardCenterEndUserInfoKey = "NSPoint: {187.5, 538}";
//        UIKeyboardFrameBeginUserInfoKey = "NSRect: {{0, 667}, {375, 258}}";
//        UIKeyboardFrameEndUserInfoKey = "NSRect: {{0, 409}, {375, 258}}";      就是他
//        UIKeyboardIsLocalUserInfoKey = 1;
//    }}// 咱们取自己需要的就好了CGRect rec = [noti.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];NSLog(@"%@",NSStringFromCGRect(rec));// 小于,说明覆盖了输入框if ([UIScreen mainScreen].bounds.size.height - rec.size.height < self.inputView.frame.origin.y + self.inputView.frame.size.height){// 把我们整体的View往上移动CGRect tempRec = self.view.frame;tempRec.origin.y = - (rec.size.height);self.view.frame = tempRec;}// 由于可见的界面缩小了,TableView也要跟着变化Frameself.tableView.frame = CGRectMake(0, rec.size.height+64, 375, 667 - 64 - rec.size.height - 30);if (self.dataSouce.count != 0){[self.tableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:self.dataSouce.count - 1 inSection:0] atScrollPosition:UITableViewScrollPositionBottom animated:YES];}}
// 监听键盘隐藏
- (void)keyboardHide:(NSNotification *)noti
{self.view.frame = CGRectMake(0, 0, 375, 667);self.tableView.frame = CGRectMake(0, 64, 375, 667 - 64 - 30);
}

3.这里的数据是模拟的,大致如下


- (void)clickSengMsg:(UIButton *)btn
{if (![self.inputView.textField.text isEqualToString:@""]){MKJChatModel *chatModel = [[MKJChatModel alloc] init];chatModel.msg = self.inputView.textField.text;chatModel.isRight = arc4random() % 2; // 0 or 1[self.dataSouce addObject:chatModel];}[self.tableView reloadData];// 滚到底部  scroll so row of interest is completely visible at top/center/bottom of viewif (self.dataSouce.count != 0) {[self.tableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:self.dataSouce.count - 1 inSection:0] atScrollPosition:UITableViewScrollPositionBottom animated:YES];}
}

关键的就这么多,一个简单的Demo就完成了,抛砖引玉,各位需要完善的自己再完 善,需要跑起来试试的,记得用iphone6的屏幕跑哦,没做适配。。。。。。

Demo请戳:https://github.com/DeftMKJ/Chat

TableViewCell入门版高度自适应传送门:http://blog.csdn.net/deft_mkjing/article/details/51569605

微信朋友圈纯Autolayout高度自适应:点击打开链接




本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/31371.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QT 登录界面 主界面 切换 仿TIM

QT 登录界面 主界面 切换 一 环境搭建 平台是vs2012 Qt5.2.1 属于QWidget窗口 在项目里又添加了QMainwindow窗口 二 编写代码 QWidget的窗口名是loginwindow&#xff0c;QMainwindow的窗口名是mainwidow&#xff08;发现window少打一个n 尴尬&#xff09; loginw…

环信聊天列表不刷新数据

还原问题&#xff1a; 如图主Ui是activity&#xff0c;下侧的围观区是Fragment,根据环信的demo&#xff0c;上面聊天区可以正常刷新UI。 但是围观区数据源变化&#xff0c;但是不能刷新UI。 思路&#xff1a; 研究一个下午&#xff0c;理了好久逻辑。发现我的问题是&#x…

环信实现聊天功能

目录 1、即时通信1.1 什么是即时通信&#xff1f;1.2 功能说明 2 技术方案3 环信3.1 开发简介3.2 环信Console 4 用户体系集成4.1 Appkey 数据结构4.2 环信 ID 数据结构4.3 环信 ID 使用规则4.4 获取管理员权限4.4.1 配置4.4.2 获取token4.5 注册环信用户4.6 测试4.7 查询环信用…

Android泡泡聊天界面的实现

昨天写了个界面&#xff0c;实现了Android泡泡聊天界面。运行结果如下&#xff0c;点击发送按钮&#xff0c;屏幕就显示Text的内容。 我也是在网上的一份源码的基础上更改的&#xff0c;整个泡泡界面的实现要点&#xff1a; &#xff08;1&#xff09;主界面其实就是一个List V…

【开源免费】使用Spring Boot和Html实现ChatGPT,1:亿还原,将就看。

简介 关注我&#xff1a;GPT4.0 JAVA SDK近期更新 前段时间写了一个Chatgpt的Java版SDK开源地址&#xff1a;chatgpt-java欢迎使用。但由于原来OpenAI 并没有支持官网的chatgpt模型&#xff0c;所以使用起来相对没有官网那么智能完善&#xff0c;所以就没有写出一个demo项目&a…

Fdog系列(五):使用Qt模仿QQ实现登录界面到主界面,功能篇。

文章目录 一. 前言同时完整项目代码已上传github&#xff1a;[Fdog即时通讯软件](https://github.com/HuaGouFdog/FdogInstantMessaging) 求星星&#xff01;二. 正文1. 如何保存第一次登录数据2. 如何获取已经登录过的账号信息,并完成自定义下列框3. 从下拉列表框删除账号4. 文…

可换皮肤的Qt登录界面

⭐️我叫忆_恒心,一名喜欢书写博客的在读研究生👨‍🎓。 如果觉得本文能帮到您,麻烦点个赞👍呗! 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧,喜欢的小伙伴给个三连支持一下呗。👍⭐️❤️ 可换皮肤的Qt登录界面 QSS的学习笔记 快…

chatgpt赋能python:Python如何去除停用词

Python 如何去除停用词 介绍 在进行自然语言处理时&#xff0c;停用词是常见的障碍。停用词是指在文本中频繁出现但没有实际意义的词语。例如&#xff0c;“the”、“is”、“a” 等单词通常被认为是停用词&#xff0c;因为它们在具有意义的文本中出现得非常频繁&#xff0c;…

使用关联规则分析股票数据--数据来自tushare大数据社区

使用关联规则分析股票数据--数据来自tushare大数据社区 一、开发环境二、目标三、关联规则&#xff08;之前了解过直接跳到第四步&#xff09;1.关联规则的定义2.啤酒尿布的例子2.1 支持度2.2置信度2.3 提升度2.4 关联规则2.5 啤酒和尿布 四、股票关联规则分析1.使用的库2.获取…

Twitter部分源代码泄漏、疑遭离职员工报复:马斯克要求GitHub交出所有上传、下载人员名单...

点击“开发者技术前线”&#xff0c;选择“星标” 让一部分开发者看到未来 作者 &#xff5c; Tina 来自&#xff1a;AI前线 最近的法律文件显示&#xff0c;Twitter 的部分源代码已经在网上泄露。这是一次罕见的、严重的知识产权泄露事件。为防止该事件对其服务产生潜在的破坏…

马斯克刚说要开源,没几天Twitter源代码就泄漏了...

出品 | OSC开源社区&#xff08;ID&#xff1a;oschina2013) 根据《纽约时报》的报道&#xff0c;一份法律文件显示&#xff0c;Twitter 称其部分源代码在网上被泄露&#xff0c;该公司已于上周五采取行动&#xff0c;它通过向托管代码的 GitHub 发送版权侵权通知&#xff0c;删…

文心一言员工跳槽工资翻倍, AI 人才备受追捧;推特称其部分源代码遭泄露;Docker 撤回受争议的收费方案|极客头条...

「极客头条」—— 技术人员的新闻圈&#xff01; CSDN 的读者朋友们早上好哇&#xff0c;「极客头条」来啦&#xff0c;快来看今天都有哪些值得我们技术人关注的重要新闻吧。 整理 | 梦依丹 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 一分钟速览新闻点&#…

有道智云翻译API + retrofit实现在线翻译Android app

目录 1.进入有道智云主页&#xff0c;注册自己的账号(手机号验证码)&#xff0c;完善信息随意填 2.登录进来后&#xff0c;创建应用。根据需要选择语言翻译服务。 3. 打开Android Studio&#xff0c;新建空的Activity项目 1. 新建项目&#xff0c;在build.gradle(app)添加re…

STRAIGHT声码器详解

转载请注明出处。 STRAIGHT自适应加权谱内插的语音转换与重构 STRAIGHT&#xff08; Speech Transformation and Representation using Adaptive Interpolation of weighted spectrum)算法&#xff08;Kawahara,1998&#xff09;&#xff0c;是一种语音信号分析、合成、修改的…

chatgpt赋能python:如何用Python挣钱:从小白到大佬的必备指南

如何用Python挣钱&#xff1a;从小白到大佬的必备指南 作为一名有10年Python编程经验的工程师&#xff0c;我深知Python的应用范围非常广泛&#xff0c;它可以为各种行业带来巨大的价值。当然&#xff0c;对于许多人来说&#xff0c;如果你是一名SEO从业者&#xff0c;也完全可…

chatgpt赋能python:如何利用Python在网上赚钱:一份SEO指南

如何利用Python在网上赚钱&#xff1a;一份SEO指南 随着互联网的快速发展和Python成为一种越来越受欢迎的编程语言&#xff0c;越来越多的人开始利用Python在网上赚取额外的收入。本篇文章将介绍一些Python工具和技术&#xff0c;以及SEO最佳实践&#xff0c;帮助你利用Python…

PHP短信验证功能

PHP阿里大鱼短信验证 第一步 登陆阿里大于注册账号&#xff0c;在用户管理中心创建应用&#xff0c;确定AppKEY和App Secret还有配置签名 第二步 在应用管理中选择SDK下载&#xff0c;或者直接点击http://download.csdn.net/detail/s371795639/9695983下载&#xff0c;免费的…

发送短信验证码 API数据接口

1.前言 此接口发送短信验证码 短信模板 参数说明: 1449978 验证码为&#xff1a;{1}为您的登录验证码&#xff0c;请于{2}分钟内填写&#xff0c;如非本人操作&#xff0c;请忽略本短信。 1449979 验证码为&#xff1a;{1}&#xff0c;您正在登录&#xff0c;若非本人操作&…

为何语言学家乔姆斯基对ChatGPT持否定态度?

本文比较了乔姆斯基关于语言知识的本质、来源和使用的理论与 GPT 的不同&#xff0c; 说明了GPT没有可解释性。 2023年3月8日著名语言学家乔姆斯基与罗伯茨&#xff08;Ian Roberts&#xff09;、瓦图穆尔&#xff08;Jeffrey Watmull&#xff09;共同在《纽约时报》发表了题为…

如何更换您的Gmail地址

在许多情况下&#xff0c;您可能需要更改您的 Gmail 地址&#xff1a;您换了工作、结婚并改了名字&#xff0c;或者您在 2003 年设置的电子邮件地址突然看起来有点累了。无论出于何种原因&#xff0c;以下是更改 Gmail 地址并确保您在此过程中不会丢失任何重要数据的方法。 创…