ios php 聊天_iOS开发之微信聊天页面实现

聊天界面的效果图如下：在下面的聊天界面中中用到了3类cell,一类是显示文字和表情的，一类是显示录音的，一类是显示图片的。当点击图片时会跳转到另一个Controller中来进行图片显示，在图片显示页面中添加了一个捏合的手势。点击播放按钮，会播放录制的音频，cell的大学会根据内容的多少来调整，而cell中textView的高度是通过约束来设置的。

一，定义我们要用的cell,代码如下：

1，显示表情和text的cell,代码如下，需要根据NSMutableAttributedString求出bound,然后改变cell上的ImageView和TextView的宽度的约束值，动态的调整气泡的大小，具体代码如下：#import "TextCell.h"

@interface TextCell()

@property (strong, nonatomic) IBOutlet UIImageView *headImageView;

@property (strong, nonatomic) IBOutlet UIImageView *chatBgImageView;

@property (strong, nonatomic) IBOutlet UITextView *chatTextView;

@property (strong, nonatomic) IBOutlet NSLayoutConstraint *chatBgImageWidthConstraint;

@property (strong, nonatomic) IBOutlet NSLayoutConstraint *chatTextWidthConstaint;

@property (strong, nonatomic) NSMutableAttributedString *attrString;

@end

@implementation TextCell

-(void)setCellValue:(NSMutableAttributedString *)str

{

//移除约束

[self removeConstraint:_chatBgImageWidthConstraint];

[self removeConstraint:_chatTextWidthConstaint];

self.attrString = str;

NSLog(@"%@",self.attrString);

//由text计算出text的宽高

CGRect bound = [self.attrString boundingRectWithSize:CGSizeMake(150, 1000) options:NSStringDrawingUsesLineFragmentOrigin context:nil];

//根据text的宽高来重新设置新的约束

//背景的宽

NSString *widthImageString;

NSArray *tempArray;

widthImageString = [NSString stringWithFormat:@"H:[_chatBgImageView(%f)]", bound.size.width+45];

tempArray = [NSLayoutConstraint constraintsWithVisualFormat:widthImageString options:0 metrics:0 views:NSDictionaryOfVariableBindings(_chatBgImageView)];

_chatBgImageWidthConstraint = tempArray[0];

[self addConstraint:self.chatBgImageWidthConstraint];

widthImageString = [NSString stringWithFormat:@"H:[_chatTextView(%f)]", bound.size.width+20];

tempArray = [NSLayoutConstraint constraintsWithVisualFormat:widthImageString options:0 metrics:0 views:NSDictionaryOfVariableBindings(_chatTextView)];

_chatBgImageWidthConstraint = tempArray[0];

[self addConstraint:self.chatBgImageWidthConstraint];

//设置图片

UIImage *image = [UIImage imageNamed:@"chatfrom_bg_normal.png"];

image = [image resizableImageWithCapInsets:(UIEdgeInsetsMake(image.size.height * 0.6, image.size.width * 0.4, image.size.height * 0.3, image.size.width * 0.4))];

//image = [image stretchableImageWithLeftCapWidth:image.size.width * 0.5 topCapHeight:image.size.height * 0.5];

[self.chatBgImageView setImage:image];

self.chatTextView.attributedText = str;

}

@end

2.显示图片的cell,通过block回调把图片传到Controller中，用于放大图片使用。#import "MyImageCell.h"

@interface MyImageCell()

@property (strong, nonatomic) IBOutlet UIImageView *bgImageView;

@property (strong, nonatomic) IBOutlet UIButton *imageButton;

@property (strong, nonatomic) ButtonImageBlock imageBlock;

@property (strong, nonatomic) UIImage *buttonImage;

@end

@implementation MyImageCell

-(void)setCellValue:(UIImage *)sendImage

{

self.buttonImage = sendImage;

UIImage *image = [UIImage imageNamed:@"chatto_bg_normal.png"];

image = [image resizableImageWithCapInsets:(UIEdgeInsetsMake(image.size.height * 0.6, image.size.width * 0.4, image.size.height * 0