iOS 聊天界面

聊天界面一般包含：文字、语音、图片三大部分。

整体的我用的是UITableView，具体聊天的展示是用的cell，把所有视图都放到cell上用到的显示用不到的隐藏。

项目的的编写采用了MVC 模式。所有的界面布局都是在CSMessageModel中完成。先上效果图。

文字排版 语音排版 图片排版

简单来说，我们要根据接收到的数据类型的不同来展示不同的东西。所以我们需要事先和服务器定义好接口协议并把他封装成一个Model。另外还要有时间，以及自己和他人的区别。这些也要一起定义。我的Model类型如下，大家可以根据自己的需要进行添加和删除。

@property (nonatomic, assign) MessageType         messageType;//消息类型
@property (nonatomic, assign) MessageSenderType   messageSenderType;//自己还是他人
/*
 是否显示小时的时间
 */
@property (nonatomic, assign) BOOL   showMessageTime;

/*
 消息时间  2017-09-11 11:11
 */
@property (nonatomic, retain) NSString    *messageTime;


/*
 图像url
 */
@property (nonatomic, retain) NSString    *logoUrl;

/*
 消息文本内容
 */
@property (nonatomic, retain) NSString    *messageText;


/*
 音频时间
 */

@property (nonatomic, assign) NSInteger   duringTime;
/*
 消息音频url
 */
@property (nonatomic, retain) NSString    *voiceUrl;


/*
 图片文件
 */
@property (nonatomic, retain) NSString    *imageUrl;

/*
 图片文件
 */
@property (nonatomic, retain) UIImage    *imageSmall;

然后就是根据上面的类型去定义各自的frame，根据自己的需要进行添加和删除。

- (CGRect)timeFrame;
- (CGRect)logoFrame;
- (CGRect)messageFrame;
- (CGRect)voiceFrame;
- (CGRect)voiceAnimationFrame;
- (CGRect)bubbleFrame;
- (CGRect)imageFrame;
- (CGFloat)cellHeight;

CSMessageModel.m 中实现Frame初始化。举例如下，具体的可以查看demo。

- (CGRect)timeFrame
{
    CGRect rect  = CGRectZero;
    if (self.showMessageTime)//判断要不要展示时间
    {
        CGSize size = [self labelAutoCalculateRectWith:self.messageTime Font:[UIFont fontWithName:FONT_REGULAR size:10] MaxSize:CGSizeMake(MAXFLOAT, 17)];
        rect = CGRectMake((ScreenWidth - size.width)/2, 0, size.width + 10, 17);
    }

    return rect;
}

- (CGRect)logoFrame
{
    
    CGRect timeRect = [self timeFrame];
   
    CGRect rect = CGRectZero;
    if (self.messageSenderType == MessageSenderTypeMe)//判断是自己还是别人
    {
        rect = CGRectMake(ScreenWidth - 50,timeRect.size.height + 10, 40, 40);
    }
    else
    {
        rect = CGRectMake(10, timeRect.size.height + 10, 40, 40);
    }
    return rect;
}

然后就是自定义cell
直接传Model进来

+(instancetype)cellWithTableView:(UITableView *)tableView messageModel:(CSMessageModel *)model;

重点在要根据Model去计算布局

- (void)setMessageModel:(CSMessageModel *)messageModel {
    _messageModel = messageModel;

    
    _timeLabel.hidden = !messageModel.showMessageTime;
    _timeLabel.frame = [messageModel timeFrame];
    _timeLabel.text = messageModel.messageTime;
    
    
    
    _logoImageView.hidden = NO;
    _logoImageView.frame = [messageModel logoFrame];
   
    _bubbleImageView.hidden = NO;
    _bubbleImageView.frame = [messageModel bubbleFrame];
    
    if (messageModel.messageSenderType == MessageSenderTypeMe)
    {
        _logoImageView.image = [UIImage imageNamed:@"w"];
        _bubbleImageView.image = [[UIImage imageNamed:@"me"] stretchableImageWithLeftCapWidth:20 topCapHeight:40];
    }
    else
    {
        _logoImageView.image = [UIImage imageNamed:@"m"];
        _bubbleImageView.image = [[UIImage imageNamed:@"other"] stretchableImageWithLeftCapWidth:20 topCapHeight:40];
    }
    
    
    switch (messageModel.messageType)
    {
        case MessageTypeText:
            _messageLabel.hidden = NO;
            _messageLabel.frame = [messageModel messageFrame];
            _messageLabel.text = messageModel.messageText;
             _messageLabel.textAlignment = NSTextAlignmentLeft;
            
            break;
        case MessageTypeVoice:
            _voiceImageView.hidden = NO;
            _voiceImageView.frame = [messageModel voiceFrame];
            _messageLabel.hidden = NO;
            _messageLabel.frame = [messageModel voiceFrame];
            _messageLabel.textAlignment = messageModel.messageSenderType == MessageSenderTypeMe ? NSTextAlignmentLeft:NSTextAlignmentRight;
            _messageLabel.text = [NSString stringWithFormat:@"%ld''",(long)messageModel.duringTime];
            _voiceAnimationImageView.hidden = NO;
            _voiceAnimationImageView.frame = [messageModel voiceAnimationFrame];
            _voiceAnimationImageView.image=[UIImage imageNamed:@"wechatvoice3"];
            _voiceAnimationImageView.animationImages = [NSArray arrayWithObjects:[UIImage imageNamed:@"wechatvoice3"],[UIImage imageNamed:@"wechatvoice3_1"],[UIImage imageNamed:@"wechatvoice3_0"],[UIImage imageNamed:@"wechatvoice3_1"],[UIImage imageNamed:@"wechatvoice3"],nil];
            
            _voiceAnimationImageView.animationDuration = 1;
            _voiceAnimationImageView.transform =messageModel.messageSenderType == MessageSenderTypeMe ?  CGAffineTransformMakeRotation(M_PI) : CGAffineTransformMakeRotation(0);
            _voiceAnimationImageView.animationRepeatCount = -1;
            break;
        case MessageTypeImage:
            _imageImageView.hidden = NO;
            _imageImageView.frame = [messageModel imageFrame];
            _imageImageView.image = messageModel.imageSmall;
            CGSize imageSize = [messageModel.imageSmall imageShowSize];
            UIImageView *imageViewMask = [[UIImageView alloc] initWithImage:[[UIImage imageNamed:_messageModel.messageSenderType == MessageSenderTypeMe ? @"me" :@"other"] stretchableImageWithLeftCapWidth:20 topCapHeight:40]];
            imageViewMask.frame = CGRectMake(0, 0, imageSize.width, imageSize.height);
            _imageImageView.layer.mask = imageViewMask.layer;
            
            break;
//        default:
//            break;
    }

}

最后在调用

    model = [[CSMessageModel alloc] init];
    model.showMessageTime=YES;
    model.messageSenderType = MessageSenderTypeOther;
    model.messageType = MessageTypeText;
    model.messageText = @"我们都一样";
    model.messageTime = @"16:40";
    [_dataArray addObject:model];

至此聊天界面完成。

另外添加了表情和语音。
注：发送图片和语音的时候，服务器我们这里用了base64进行的加密。转换成了二进制流。图片和语音要问清楚服务器支持多大的。要进行压缩。

demo