IOS高仿手机QQ聊天对话界面(文字、语音、图片)

大家好，最近刚好做一个类似与手机QQ聊天的项目，要实现跟QQ类似效果，特做了一个Demo，和大家一起分享

下载地址：

http://download.csdn.net/detail/yinxiufeng/8737441

效果图如下

：             

 

主要代码实现：

 

通过plist 文件加载数据

#pragma mark 初始化数据

-(void)initData

{

    NSString *path = [[NSBundle mainBundle] pathForResource:@"messages" ofType:@"plist"];

    

    NSArray *array = [NSArray arrayWithContentsOfFile:path];

    

    self.array =[NSMutableArray array];

    

    mMessage *tempModel ;

    

    for (int i = 0; i <  array.count; i ++ ) {

        

        mMessage *model = [[mMessage alloc]initDictionary:array[i]];

        

        if([model.dateTime isEqualToString: tempModel.dateTime])

        {

            model.hiddenDateTime = YES;

        }

        

        //添加语音消息

        mMessageVoice *modelVoice = [[mMessageVoice alloc]initDictionary:array[i][@"messageVoice"]];

        model.messageVoice = modelVoice;

        

        //添加图片消息

        mMessageImage *modelImage = [[mMessageImage alloc]initDictionary:array[i][@"messageImage"]];

        model.messageImage = modelImage;

        

        mMessageFrame *frameModel = [[mMessageFrame alloc]init];

        frameModel.messageModel = model;

        

        [self.array addObject:frameModel];

        

        tempModel = model;

    }

   

}

 

 

#pragma mark 计算文字高度

-(void)countMessage

{

    

    //计算文字内容的宽度 和 高度

    CGSize msgSize = [_messageModel.msg sizeWithMaxSize:CGSizeMake(220, MAXFLOAT) fontSize:14.0f];

    

    

    //重新计算内容的宽度 和 高度 ： 内容宽度 ＝ 文字宽度 + 左右两边的间隙

    CGSize contentSize = CGSizeMake(msgSize.width + ContentMargin * 2, msgSize.height + ContentMargin * 2) ;

    

    //计算文字消息frame

    CGFloat msgX = 0;

    CGFloat msgY = self.portraitFrame.origin.y;

    

    if(_messageModel.sendType == Send) //表示是用户主动发送的消息

    {

        //计算 ： 屏幕宽度 - 右边间隙 - 用户头像宽度 - 头像左边间隙 - 内容宽度

        //       mainScreen.size.width - Margin - portraitW - Margin - contentSize.width

        msgX = self.mainScreen.size.width - self.portraitFrame.size.width - 2*Margin - contentSize.width;

    }

    else //表示是用户接受消息

    {

        //计算 ：左边间隙 + 用户左边头像 + 间隙

        msgX =  PortraitWidth + 2* Margin;

        

    }

       //计算文字消息frame

    self.contentFrame =  CGRectMake(msgX, msgY , contentSize.width, contentSize.height);

    

    

   

}

 

#pragma mark 计算图片高度

-(void)countImage

{

 

    CGSize imageSize;

    

    //计算图片宽度

    if(_messageModel.messageImage.width > 150)

    {

        CGFloat scale = _messageModel.messageImage.width / 150;

        //设置图片宽度和高度

        imageSize = CGSizeMake(150,_messageModel.messageImage.height/scale);

    }

    else

    {

        //设置图片宽度和高度

        imageSize = CGSizeMake(_messageModel.messageImage.width,_messageModel.messageImage.height);

        

    }

    

    //重新计算图片的宽度 和 高度 ： 内容宽度 ＝ 图片宽度 + 左右两边的间隙

    CGSize contentSize = CGSizeMake(imageSize.width + ContentMargin * 2, imageSize.height + ContentMargin * 2) ;

    

    //计算图片消息frame

    CGFloat imageX = 0;

    CGFloat imageY = self.portraitFrame.origin.y;

    

    if(_messageModel.sendType == Send) //表示是用户主动发送的消息

    {

        //计算 ： 屏幕宽度 - 右边间隙 - 用户头像宽度 - 头像左边间隙 - 图片宽度

        //       mainScreen.size.width - Margin - portraitW - Margin - contentSize.width

        imageX = self.mainScreen.size.width - self.portraitFrame.size.width - 2*Margin - contentSize.width;

    }

    else //表示是用户接受消息

    {

        //计算 ：左边间隙 + 用户左边头像 + 间隙

        imageX =  PortraitWidth + 2* Margin;

        

    }

    //计算图片frame

    self.contentFrame =  CGRectMake(imageX, imageY , contentSize.width, contentSize.height);

 

}

#pragma mark 计算语音

-(void)countVoice

{

    

    CGSize voiceSize;

    

    //计算语音的长度

    if(_messageModel.messageVoice.timeLength <= 1)

    {

        voiceSize = CGSizeMake(VoiceMin,17.0);

    }

    else

    {

        //大于60秒 都是最大的宽度

        if (_messageModel.messageVoice.timeLength > 60) {

            voiceSize = CGSizeMake(VoiceMax,17.0);

        }

        else

        {

            //根据语音时长设置内容长度

            voiceSize = CGSizeMake(VoiceMin + _messageModel.messageVoice.timeLength * 2.6,17.0);

        }

    }

    

    //重新计算语音内容的宽度 和 高度 ： 内容宽度 ＝ 文字宽度 + 左右两边的间隙

    CGSize contentSize = CGSizeMake(voiceSize.width + ContentMargin * 2, voiceSize.height + ContentMargin * 2) ;

    

    //计算语言消息frame

    CGFloat voiceX = 0;

    CGFloat voiceY = self.portraitFrame.origin.y;

    

    if(_messageModel.sendType == Send) //表示是用户主动发送的消息

    {

        //计算 ： 屏幕宽度 - 右边间隙 - 用户头像宽度 - 头像左边间隙 - 内容宽度

        //       mainScreen.size.width - Margin - portraitW - Margin - contentSize.width

        voiceX = self.mainScreen.size.width - self.portraitFrame.size.width - 2*Margin - contentSize.width;

    }

    else //表示是用户接受消息

    {

        //计算 ：左边间隙 + 用户左边头像 + 间隙

        voiceX =  PortraitWidth + 2* Margin;

        

    }

    //计算语音消息frame

    self.contentFrame =  CGRectMake(voiceX, voiceY , contentSize.width, contentSize.height);

 

}

 

把计算 文字消息、语音消息、图片消息的方法写上来，如果需要更详细的 可以下载源码看看