iOS开发之微信聊天页面实现

515 查看

　　在上篇博客（iOS开发之微信聊天工具栏的封装）中对微信聊天页面下方的工具栏进行了封装，本篇博客中就使用之前封装的工具栏来进行聊天页面的编写。在聊天页面中主要用到了TableView的知识，还有如何在俩天中显示我们发送的表情，具体请参考之前的博客：IOS开发之显示微博表情，在这儿就不做赘述啦。在聊天页面用到了三对，六种Cell,不过cell的复杂度要比之前的新浪微博（IOS开发之新浪围脖）简单的多。废话少说吧，还是先来几张效果图，在给出实现代码吧。

聊天界面的效果图如下：在下面的聊天界面中中用到了3类cell,一类是显示文字和表情的，一类是显示录音的，一类是显示图片的。当点击图片时会跳转到另一个Controller中来进行图片显示，在图片显示页面中添加了一个捏合的手势（关于手势，请参考：iOS开发之手势识别）。点击播放按钮，会播放录制的音频，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.3, image.size.width * 0.4))];

[self.bgImageView setImage:image];

[self.imageButton setImage:sendImage forState:UIControlStateNormal];

}

-(void)setButtonImageBlock:(ButtonImageBlock)block

{

self.imageBlock = block;

}

- (IBAction)tapImageButton:(id)sender {

self.imageBlock(self.buttonImage);

}

@end

3.显示录音的cell,点击cell上的button,播放对应的录音，代码如下：

#import "VoiceCellTableViewCell.h"

@interface VoiceCellTableViewCell()

@property (strong, nonatomic) NSURL *playURL;

@property (strong, nonatomic) AVAudioPlayer *audioPlayer;

@end

@implementation VoiceCellTableViewCell

-(void)setCellValue:(NSDictionary *)dic

{

_playURL = dic[@"body"][@"content"];

}

- (IBAction)tapVoiceButton:(id)sender {

NSError *error = nil;

AVAudioPlayer *player = [[AVAudioPlayer alloc]initWithContentsOfURL:_playURL error:&error];

if (error) {

NSLog(@"播放错误：%@",[error description]);

}

self.audioPlayer = player;

[self.audioPlayer play];

}

@end

　　二，cell搞定后要实现我们的ChatController部分　

1.ChatController.m中的延展和枚举代码如下：