IOS详解TableView——对话聊天布局的实现

文章来源：http://blog.csdn.net/cocoarannie/article/details/11183067

上篇博客介绍了如何使用UITableView实现类似QQ的好友界面布局。这篇讲述如何利用自定义单元格来实现聊天界面的布局。

借助单元格实现聊天布局难度不大，主要要解决的问题有两个：

1.自己和其他人说话头像和气泡图像在不同的位置。

找了些类似的例子，有根据不同情况设置不同的自定义类的。这里使用根据说话人的属性来设置不同的位置，在一个单一的单元格类中。

2.像微博等根据说话的内容长短对说话图片进行拉伸，以及单元格自适应高度。

实现步骤：

搭建界面

数据属性字典

读取数据

[cpp]  view plain copy

1. - (void)loadData  
2. {  
3.     const NSString *RMsgKey = @"msg";  
4.     const NSString *RMineKey = @"ismine";  
5.       
6.     NSString *path = [[NSBundle mainBundle] pathForResource:@"messages" ofType:@"plist"];  
7.     NSArray *dataArray = [NSArray arrayWithContentsOfFile:path];  
8.     if (!dataArray)  
9.     {  
10.         MyLog(@"读取文件失败");  
11.         return;  
12.     }  
13.       
14.     _msgList = [NSMutableArray arrayWithCapacity:dataArray.count];  
15.     [dataArray enumerateObjectsUsingBlock:^(NSDictionary *dict, NSUInteger idx, BOOL *stop) {  
16.         Message *message = [[Message alloc] init];  
17.         message.msg = dict[RMsgKey];  
18.         message.mine = [dict[RMineKey] boolValue];  
19.         [_msgList addObject:message];  
20.     }];  
21. }  

将数据指定给Message类，存到一个数组中方便以后绑定到自定义单元格中

这次使用的是用NIB文件建的自定义，而非像前两篇博客使用手绘的方式。

awakeFromNib和layoutSubviews方法

[cpp]  view plain copy

1. - (void)awakeFromNib  
2. {  
3.     _msgButton.titleLabel.numberOfLines = 0;  
4.     _msgButton.titleLabel.font = [UIFont systemFontOfSize:RChatFontSize];  
5. }  
6.   
7. - (void)layoutSubviews  
8. {  
9.     [super layoutSubviews];  
10.       
11.     CGRect rect = _msgButton.frame;  
12.     rect.size.height = self.bounds.size.height - 2*RMarginSize;  
13.     _msgButton.frame = rect;  
14. }  

然后是数据绑定方法，根据传入的数据，安排头像和会话按钮的位置

[cpp]  view plain copy

1. - (void)bindMessage:(Message *)message  
2. {  
3.     UIImage *headerImage;  
4.     UIImage *normalImage;  
5.     UIImage *highlightedImage;  
6.       
7.     CGRect iconRect = _headerView.frame;  
8.     CGRect btnRect = _msgButton.frame;  
9.       
10.     UIEdgeInsets insets;  
11.       
12.     if (message.isMine)  
13.     {  
14.         headerImage = [UIImage imageNamed:@"me"];  
15.         normalImage = [UIImage imageNamed:@"mychat_normal"];  
16.         highlightedImage = [UIImage imageNamed:@"mychat_focused"];  
17.           
18.         iconRect.origin.x = RMarginSize;  
19.         btnRect.origin.x = RBtnX;  
20.           
21.         insets = UIEdgeInsetsMake(0, 20, 0, 30);  
22.     }  
23.     else  
24.     {  
25.         headerImage = [UIImage imageNamed:@"other"];  
26.         normalImage = [UIImage imageNamed:@"other_normal"];  
27.         highlightedImage = [UIImage imageNamed:@"other_focused"];  
28.           
29.         iconRect.origin.x = self.bounds.size.width - RMarginSize - RIconSide;  
30.         btnRect.origin.x = self.bounds.size.width - iconRect.origin.x - RMarginSize;  
31.           
32.         insets = UIEdgeInsetsMake(0, 30, 0, 30);  
33.     }  
34.     _headerView.frame = iconRect;  
35.     _headerView.image = headerImage;  
36.       
37.     //拉伸图片  
38.     normalImage = [normalImage stretchableImageWithLeftCapWidth:normalImage.size.width*0.5 topCapHeight:normalImage.size.height*0.6];  
39.     highlightedImage = [highlightedImage stretchableImageWithLeftCapWidth:highlightedImage.size.width*0.5 topCapHeight:highlightedImage.size.height*0.6];  
40.       
41.     [_msgButton setContentEdgeInsets:insets];  
42.     _msgButton.frame = btnRect;  
43.     [_msgButton setBackgroundImage:normalImage forState:UIControlStateNormal];  
44.     [_msgButton setBackgroundImage:highlightedImage forState:UIControlStateHighlighted];  
45.     [_msgButton setTitle:message.msg forState:UIControlStateNormal];  
46. }  

关于上面拉伸图片的方法，在IOS6以后可以使用另一个方法，resizableImageWithCapInsets:<#(UIEdgeInsets)#> resizingMode:<#(UIImageResizingMode)#>

传入一个Edgeinsets和一个拉伸模式就可以对图片完成编辑。

下面在tableview的代理方法中设置自适应高度的行高

[cpp]  view plain copy

1. - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath  
2. {  
3.     Message *msg = _msgList[indexPath.row];  
4.     UIFont *font = [UIFont systemFontOfSize:RChatFontSize];  
5.     CGFloat height = [msg.msg sizeWithFont:font constrainedToSize:CGSizeMake(150, 10000)].height;  
6.     CGFloat lineHeight = [font lineHeight];  
7.       
8.     return RCellHeight + height - lineHeight;  
9. }  

根据内容和字体设置合适的高度

最后绑定数据就可以完成显示了

[cpp]  view plain copy

1. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath  
2. {  
3.     HRChatCell *cell = [tableView dequeueReusableCellWithIdentifier:RCellIdentifier];  
4.     [cell bindMessage:_msgList[indexPath.row]];  
5.     return cell;  
6. }  

完成效果

Demo源码：点击打开链接

以上为本篇博客全部内容，欢迎指正和交流。转载请注明出处~