仿微信.QQ聊天界面

原创 2016年08月30日 10:27:50

仿微信.QQ聊天界面,气泡图 自适应箭头图片

  最近做了一个IM的项目.关于实现IM有很多方法.毕竟协议就那么几种.开源的可以用XMPPFramework等, 第三方有融云、环信等.若只是实现临时通信还可以用WebSocket.
这些技术网上实现的demo多的一笔.但是只是实现了功能.作为客户端很多UI实现的细节并没有做到.  现在把聊天界面实现的细节记录一下.


我用的是XMPPFramework,这里关于协议和里面的方法全部忽略,只是抽出实现UI的几个方法.

一、文本

    聊天最常用的就是发送文本了,

如图1.1:

                        

  文本聊天是 用button( 也可以用其他控件 ) 显示聊天的内容, 主要就是控制显示内容的 内边距 和 自适应 高度.

设置titleContent内边距 和 自适应高度这个没什么难度

<span style="color:#FF6666;"><span style="color:#000000;">自适应高度:根据聊天内容获取size</span></span>
[chat.contentText boundingRectWithSize:CGSizeMake(contentMaxW, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:kContentTextFont} context:nil].size;

<span style="color:#FF6666;"><span style="color:#000000;">设置聊天信息 在button中的内边距</span></span>
 UIEdgeInsetsMake(kContentTextTop, kContentTextLet, kContentTextBottom , kContentTextRight);
button.titleEdgeInsets = edgeInsert;
内边距要和size 相加才是聊天button的真实frame

这里要注意的一个细节是  背景图片的那个箭头一直指向发送人.不能因为内容自适应高度而改变位置.

这里使用的图片的一个拉伸方法,方法具体效果试下就知道.也可以自行谷歌

   该方法返回一个经过拉伸的图片 选择图片的某一点进行拉伸 参数width改点距离左边的距离 参数Height改点距离右边的距离
        [image stretchableImageWithLeftCapWidth:<#(NSInteger)#> topCapHeight:<#(NSInteger)#>];
这个方法就是取出那个点位置的像素,将image按照你设置的frame进行拉伸,而除这个点其他所有点的结构不变.这样就能保证箭头不会随着自适应高度而改变位置了.

测试代码:

    self.bubbleImageView = [[UIImageView alloc]initWithFrame:CGRectMake(30, 200, 200, 200)];
    UIImage *image = [UIImage imageNamed:@"pikaqiu"];
    self.bubbleImageView.image = [image stretchableImageWithLeftCapWidth:50 topCapHeight:50];
    [self.view addSubview:self.bubbleImageView];

原图: 

效果:



二、图片

 发送图片和文本差不多, 根据图片的size 调整 客户端显示的大小,发送的图片一样有一个指向发送者的箭头,这里一样用到了图片拉伸. 但是这个拉伸是将图片延伸,不是像之前那样去一个像素点进行拉伸.那个箭头也是显示图片的一部分.

发送图片主要是CALayer 和 image的延伸方法

微信原图;



测试代码:


//    创建带箭头的背景  只要是为了抓取带箭头的Layer
    UIImageView *imageVB = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];
    //带箭头的背景图片
    UIImage *image  = [UIImage imageNamed:@"weChatBubble_Receiving_icon@2x.png"];
    imageVB.image = [image resizableImageWithCapInsets:UIEdgeInsetsMake(30, 28, 85, 28) resizingMode:(UIImageResizingModeStretch)];
    
//    这是我们要发送的图片
    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 00, 200, 200)];
    imageView.image = [UIImage imageNamed:@"1111.jpeg"];
    UIView *view = [[UIView alloc]initWithFrame:CGRectMake(40, 200, 200, 200)];
    

    [view addSubview:imageVB];
    [view addSubview:imageView];
    
//    获取我们需要的Layer
    view.layer.mask = imageVB.layer;


    [self.view addSubview:view];
效果图:



这里对图片延伸的方法     [image resizableImageWithCapInsets:<#(UIEdgeInsets)#> resizingMode:<#(UIImageResizingMode)#>];

具体介绍参考方法介绍 别人写的简书,介绍的很详细.  关于CALayer的介绍,这里就不说了

三、语音

关于语音发送 就是先录音 >> 保存在本地 >> 转码 (因为录制的格式是.wav的,安卓不能识别,需要先转成和安卓通用的.caf格式). >> 发送 (获取音频的长度) >> 接收



四、视频















 


版权声明:本文为博主原创文章,未经博主允许不得转载。

一个简化版的仿微信聊天界面UI

简化了原web微信的页面结构,纯粹前端页面,上图:

IOS 仿微信聊天界面

本来没有打算写这篇日志的,但是的确没有一个网友写的仿微信争气,大部分是过度封装,别人无法复用或在其基础上改动,那么这个就尴尬了。。。大神都把B装了,但是让我们理解大神的想法,额,这个有难度。。。 一气...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

模仿微信界面之聊天界面

模仿微信聊天界面 运行界面 1建立布局ui_top.xml显示界面上标题栏

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

又是早些前,面试了一些公司,有些喜欢打电话让你说说runtime,runloop什么的,这还好,关键遇到一个吊炸天的公司,我和一个哥们两个人去面试,到哪里没人理你啊,面试题也没有,坐在那发呆,接待我们...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

仿微信聊天界面——键盘与面板的切换

如果认真留意的话会发现,正常情况下,安卓版本的微信打开表情面板的高度总是能保持和键盘的高度一致(IOS的好像不一致),这样用户在进行键盘和面板的切换时能得到较好的用户体验。此外,微信也做了一定的处理,...

iOS微信QQ聊天界面的UI框架以及Socket简单实现群聊功能

2.2日更新,socket简易群聊通信,之前实现的是静态本地聊天模拟 最新版本Demo传送门1.需要的先下载下来,先开启SocketSeverce 2 这个服务器代码,已经封装好了Socket建立和...

iOS生成四位随机数

1、获取一个随机整数范围在:[0,100)包括0,不包括100 int x = arc4random() % 100; 2、  获取一个随机数范围在:[500,1000),包括500,不包...

ios 生成字母加数字的随机数

近期项目第三方登录之后默认创建账号和密码,就用随机数生产,这里只需要传入你需要几位的随机数即可,例如你需要得到8位的随机数,num就传入8 好了,废话少说,简单Demo如下: - (NSStr...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:仿微信.QQ聊天界面
举报原因:
原因补充:

(最多只允许输入30个字)