IOS聊天对话界面

时间：2024-03-21 19:37:32

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

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

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

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

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

IOS聊天对话界面     IOS聊天对话界面

再看一下主要代码实现：

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

相关文章