码迷，mamicode.com
首页 > 移动开发 > 详细

IOS聊天对话界面

时间：2015-09-14 15:31:39      阅读：371      评论：0      收藏：0      [点我收藏+]

标签：

大家好，百忙之中，抽出点空，写个微博，话说好久没写。

最近项目中有碰到写类似微信聊天界面上的效果，特整理了一下，写了一个小的Demo，希望给没头绪的同学们一个参考！

下载地址：http://files.cnblogs.com/ios8/WeixinDeom.zip

Demo下载地址：http://download.csdn.net/detail/rhljiayou/6524347

先看一下效果图：左图为截取微信的，右图是本demo的效果

技术分享     技术分享

 

再看一下主要代码实现：

  1. @implementation ViewController  
  2.   
  3. - (void)viewDidLoad  
  4. {  
  5.     [super viewDidLoad];  
  6.       
  7.     NSDictionary *dict = [NSDictionary dictionaryWithObjectsAndKeys:@"weixin",@"name",@"微信团队欢迎你。很高兴你开启了微信生活，期待能为你和朋友们带来愉快的沟通体检。",@"content", nil];  
  8.     NSDictionary *dict1 = [NSDictionary dictionaryWithObjectsAndKeys:@"rhl",@"name",@"hello",@"content", nil];  
  9.     NSDictionary *dict2 = [NSDictionary dictionaryWithObjectsAndKeys:@"rhl",@"name",@"0",@"content", nil];  
  10.     NSDictionary *dict3 = [NSDictionary dictionaryWithObjectsAndKeys:@"weixin",@"name",@"谢谢反馈，已收录。",@"content", nil];  
  11.     NSDictionary *dict4 = [NSDictionary dictionaryWithObjectsAndKeys:@"rhl",@"name",@"0",@"content", nil];  
  12.     NSDictionary *dict5 = [NSDictionary dictionaryWithObjectsAndKeys:@"weixin",@"name",@"谢谢反馈，已收录。",@"content", nil];  
  13.     NSDictionary *dict6 = [NSDictionary dictionaryWithObjectsAndKeys:@"rhl",@"name",@"大数据测试，长数据测试，大数据测试，长数据测试，大数据测试，长数据测试，大数据测试，长数据测试，大数据测试，长数据测试，大数据测试，长数据测试。",@"content", nil];  
  14.       
  15.     _resultArray = [NSMutableArray arrayWithObjects:dict,dict1,dict2,dict3,dict4,dict5,dict6, nil];  
  16.       
  17.   
  18. }  
  19.   
  20. - (void)didReceiveMemoryWarning  
  21. {  
  22.     [super didReceiveMemoryWarning];  
  23.     // Dispose of any resources that can be recreated.  
  24. }  
  25.   
  26. //泡泡文本  
  27. - (UIView *)bubbleView:(NSString *)text from:(BOOL)fromSelf withPosition:(int)position{  
  28.       
  29.     //计算大小  
  30.     UIFont *font = [UIFont systemFontOfSize:14];  
  31.     CGSize size = [text sizeWithFont:font constrainedToSize:CGSizeMake(180.0f, 20000.0f) lineBreakMode:NSLineBreakByWordWrapping];  
  32.       
  33.     // build single chat bubble cell with given text  
  34.     UIView *returnView = [[UIView alloc] initWithFrame:CGRectZero];  
  35.     returnView.backgroundColor = [UIColor clearColor];  
  36.       
  37.     //背影图片  
  38.     UIImage *bubble = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:fromSelf?@"SenderAppNodeBkg_HL":@"ReceiverTextNodeBkg" ofType:@"png"]];  
  39.       
  40.     UIImageView *bubbleImageView = [[UIImageView alloc] initWithImage:[bubble stretchableImageWithLeftCapWidth:floorf(bubble.size.width/2) topCapHeight:floorf(bubble.size.height/2)]];  
  41.     NSLog(@"%f,%f",size.width,size.height);  
  42.       
  43.       
  44.     //添加文本信息  
  45.     UILabel *bubbleText = [[UILabel alloc] initWithFrame:CGRectMake(fromSelf?15.0f:22.0f, 20.0f, size.width+10, size.height+10)];  
  46.     bubbleText.backgroundColor = [UIColor clearColor];  
  47.     bubbleText.font = font;  
  48.     bubbleText.numberOfLines = 0;  
  49.     bubbleText.lineBreakMode = NSLineBreakByWordWrapping;  
  50.     bubbleText.text = text;  
  51.       
  52.     bubbleImageView.frame = CGRectMake(0.0f, 14.0f, bubbleText.frame.size.width+30.0f, bubbleText.frame.size.height+20.0f);  
  53.       
  54.     if(fromSelf)  
  55.         returnView.frame = CGRectMake(320-position-(bubbleText.frame.size.width+30.0f), 0.0f, bubbleText.frame.size.width+30.0f, bubbleText.frame.size.height+30.0f);  
  56.     else  
  57.         returnView.frame = CGRectMake(position, 0.0f, bubbleText.frame.size.width+30.0f, bubbleText.frame.size.height+30.0f);  
  58.       
  59.     [returnView addSubview:bubbleImageView];  
  60.     [returnView addSubview:bubbleText];  
  61.       
  62.     return returnView;  
  63. }  
  64.   
  65. //泡泡语音  
  66. - (UIView *)yuyinView:(NSInteger)logntime from:(BOOL)fromSelf withIndexRow:(NSInteger)indexRow  withPosition:(int)position{  
  67.       
  68.     //根据语音长度  
  69.     int yuyinwidth = 66+fromSelf;  
  70.       
  71.     UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];  
  72.     button.tag = indexRow;  
  73.     if(fromSelf)  
  74.         button.frame =CGRectMake(320-position-yuyinwidth, 10, yuyinwidth, 54);  
  75.     else  
  76.         button.frame =CGRectMake(position, 10, yuyinwidth, 54);  
  77.       
  78.     //image偏移量  
  79.     UIEdgeInsets imageInsert;  
  80.     imageInsert.top = -10;  
  81.     imageInsert.left = fromSelf?button.frame.size.width/3:-button.frame.size.width/3;  
  82.     button.imageEdgeInsets = imageInsert;  
  83.       
  84.     [button setImage:[UIImage imageNamed:fromSelf?@"SenderVoiceNodePlaying":@"ReceiverVoiceNodePlaying"] forState:UIControlStateNormal];  
  85.     UIImage *backgroundImage = [UIImage imageNamed:fromSelf?@"SenderVoiceNodeDownloading":@"ReceiverVoiceNodeDownloading"];  
  86.     backgroundImage = [backgroundImage stretchableImageWithLeftCapWidth:20 topCapHeight:0];  
  87.     [button setBackgroundImage:backgroundImage forState:UIControlStateNormal];  
  88.       
  89.     UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(fromSelf?-30:button.frame.size.width, 0, 30, button.frame.size.height)];  
  90.     label.text = [NSString stringWithFormat:@"%d‘‘",logntime];  
  91.     label.textColor = [UIColor grayColor];  
  92.     label.font = [UIFont systemFontOfSize:13];  
  93.     label.textAlignment = NSTextAlignmentCenter;  
  94.     label.backgroundColor = [UIColor clearColor];  
  95.     [button addSubview:label];  
  96.       
  97.     return button;  
  98. }  
  99.   
  100. #pragma UITableView  
  101.   
  102. - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView  
  103. {  
  104.     return 1;  
  105. }  
  106.   
  107. -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section  
  108. {  
  109.     return _resultArray.count;  
  110. }  
  111.   
  112. -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath  
  113. {  
  114.     NSDictionary *dict = [_resultArray objectAtIndex:indexPath.row];  
  115.     UIFont *font = [UIFont systemFontOfSize:14];  
  116.     CGSize size = [[dict objectForKey:@"content"] sizeWithFont:font constrainedToSize:CGSizeMake(180.0f, 20000.0f) lineBreakMode:NSLineBreakByWordWrapping];  
  117.       
  118.     return size.height+44;  
  119. }  
  120.   
  121. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath  
  122. {  
  123.       
  124.     static NSString *CellIdentifier = @"Cell";  
  125.     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];  
  126.     if (cell == nil) {  
  127.         cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];  
  128.         cell.selectionStyle = UITableViewCellSelectionStyleNone;  
  129.           
  130.     }else{  
  131.         for (UIView *cellView in cell.subviews){  
  132.             [cellView removeFromSuperview];  
  133.         }  
  134.     }  
  135.       
  136.     NSDictionary *dict = [_resultArray objectAtIndex:indexPath.row];  
  137.       
  138.     //创建头像  
  139.     UIImageView *photo ;  
  140.     if ([[dict objectForKey:@"name"]isEqualToString:@"rhl"]) {  
  141.         photo = [[UIImageView alloc]initWithFrame:CGRectMake(320-60, 10, 50, 50)];  
  142.         [cell addSubview:photo];  
  143.         photo.image = [UIImage imageNamed:@"photo1"];  
  144.           
  145.         if ([[dict objectForKey:@"content"] isEqualToString:@"0"]) {  
  146.             [cell addSubview:[self yuyinView:1 from:YES withIndexRow:indexPath.row withPosition:65]];  
  147.                
  148.               
  149.         }else{  
  150.             [cell addSubview:[self bubbleView:[dict objectForKey:@"content"] from:YES withPosition:65]];  
  151.         }  
  152.           
  153.     }else{  
  154.         photo = [[UIImageView alloc]initWithFrame:CGRectMake(10, 10, 50, 50)];  
  155.         [cell addSubview:photo];  
  156.         photo.image = [UIImage imageNamed:@"photo"];  
  157.           
  158.         if ([[dict objectForKey:@"content"] isEqualToString:@"0"]) {  
  159.             [cell addSubview:[self yuyinView:1 from:NO withIndexRow:indexPath.row withPosition:65]];  
  160.         }else{  
  161.             [cell addSubview:[self bubbleView:[dict objectForKey:@"content"] from:NO withPosition:65]];  
  162.         }  
  163.     }  
  164.       
  165.     return cell;  
  166.       
  167. }  
  168.   
  169. - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath  
  170. {  
  171.       
  172. }  
  173.   
  174. @end  


其实很简单，主要说一下两个知识点，重要的两个知识点就能写出完美的泡泡对话聊天！

 

第一个是NSString中的一个方法：

 

- (CGSize)sizeWithFont:(UIFont *)font constrainedToSize:(CGSize)size lineBreakMode:(NSLineBreakMode)lineBreakMode;

根据文本内容，算出所需要的大小CGSize；

第二个是UIImage中的一个方法：

 

- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;

这里有几遍文章供大家参考这个方法的使用：
http://blog.csdn.net/lixing333/article/details/7589281

http://blog.csdn.net/w122079514/article/details/7848980

http://www.cnblogs.com/bandy/archive/2012/04/25/2469369.html

 

ok！完美，perfect！

IOS聊天对话界面

标签：

原文地址：http://www.cnblogs.com/worldtraveler/p/4807150.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！