关闭

仿微信.QQ聊天界面

标签: 微信聊天界面
1716人阅读 评论(0) 收藏 举报

仿微信.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格式). >> 发送 (获取音频的长度) >> 接收



四、视频















 


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:14143次
    • 积分:357
    • 等级:
    • 排名:千里之外
    • 原创:20篇
    • 转载:3篇
    • 译文:0篇
    • 评论:25条
    文章分类
    最新评论