写好一个IM会话cell
写不好的原因
1、太多cell
一个聊天的界面可能有很多不同的cell，基础的可能就有
- 文字
- 图片
- 语音
- 视频
- 地理位置
- 视频
- 时间
跟业务绑定的就更多了，红包、系统提示语、分享链接等等。
2、cell高度计算
这个问题其实是第一个问题衍生出来的，也是tableview的通病。展示cell前需要先得到cell高度。处理不好就是各种hard code、重复计算、卡顿等。
3、 相同cell左右两侧的异同
相同的cell会出现在聊天页的左右两侧，也会产生不同的UI布局。特别是气泡cell的边距。
4、 带进度cell的刷新
有些cell需要显示进度，如图片发送、视频发送、语音播放等，cell的复用机制会让这些问题变得复杂。
5、上手成本
如果项目中来的新人，需要做一个cell，还得先去看底层源码，了解各种magic word 的由来，那这是不合理的。做一个cell只应该关注新建的cell类，不会去修改其他的代码。
解决问题
1、所有的cell都由cellFactory来管理。
@implementation CellFactory
NSMutableDictionary const *MessageCellMessageTypeDict = nil;
+ (void)registerCustomMessageCell:(Class )cellClass type:(NSString *)type {
if (!MessageCellMessageTypeDict) {
MessageCellMessageTypeDict = [[NSMutableDictionary alloc] init];
}
[MessageCellMessageTypeDict setObject:cellClass forKey:type];
}
+ (Class)getCellClassType:(NSString *)type{
return MessageCellMessageTypeDict[type];
}
+ (Class)getCellViewModelClassType:(NSString *)type{
Class CellClass = [self getCellClassType:type];
Class viewModelClass = [CellClass getModelClass];
return Class;
}
@end
代码不太严谨，供参考。
每个cell都注册到Factory中，type是唯一的，对应cell，也用作cell复用的标识。
2、 cell基类
image.png
大致的结构如上图，分为blankcell 和 bubblecell（带气泡背景）。
baseCell
+ (CGFloat)cellHeight:(CellViewModel*)vm;
- (void)configListCellViewModel:(CellViewModel *)model;
+ (Class)getModelClass; //viewmodel获取
bubbleCell
//因为有气泡，需要制定宽度，这里返回的高度，加上气泡头像的高度通过重写cellHeight：方法返回。
+ (CGFloat)contentViewHeight:(BubbleCellViewModel *)message width:(CGFloat)width
//重写
+ (CGFloat)cellHeight:(CellViewModel*)vm{
//这里只需要加上 用户名高度（如果有）、消息底部间隙、
//时间、已读标识
CGFloat height = 0;
height += [self groupChatUserNameHeight:message];
//消息间隙
height += CTIMBottomSpace;
UIEdgeInsets bubbleInset = [self bubbleEdgeInsetMessage:message];
height += bubbleInset.top + bubbleInset.bottom;
CGFloat contentW = ChatTextWidth() - bubbleInset.left - bubbleInset.right;
height += [self contentViewHeight:message width:contentW];
return height;
}
/**
气泡内容相对于气泡背景的inset，默认保证不会遮挡，注意气泡在左右的区分
-------------------
messageContentView
top
---------
left| sub | right
| view |
---------
bottom
-------------------
@param message
@return
*/
+ (UIEdgeInsets)bubbleEdgeInsetMessage:(BubbleCellViewModel *)message;
BlankContentCell 简单一点
+ (CGFloat)contentViewHeight:(BlankCellViewModel *)message
+ (CGFloat)cellHeight:(BlankCellViewModel *)message {
//底层会加上时间高度，这里不需要关心
CGFloat height = 0;
height += [[self class] contentViewHeight:message];
//需要加上最底部的消息间隙
height += CTIMBottomSpace;
return height;
}
这三个都是不可直接使用的父类。根据具体需求继承来使用。重写需要的方法。
3、 cell 和 cellModel 的一一对应。
数据驱动UI，重绘代替修改
每个cell必须有一个cellModel来做数据支持。
message->cellModel->cell的一个流程。
+ (instancetype)buildWithTalking:(Message *)message {
CellFactory 中通过type获取
}
- (void)configTalking:(Message *)message;
这里可以做很多事。cell高度计算、异步绘制、数据处理等等
{
self.avatarNode.rect = CGRectMake(AvatarLeftMargin, AvatarTopMargin, 54, 54);
if (self.isMine) {
self.avatarNode.right = Main_Screen_Width - AvatarLeftMargin;
}
CGFloat lastY = self.avatarNode.top + 10;
if (self.isGroupChat && !self.isMine) {
//显示名字
self.nameNode.text = self.isMine ? talking.nickname : talking.mNickname;
self.nameNode.rect = CGRectMake(BubbleLeftMargin, lastY, Main_Screen_Width - 2 * BubbleLeftMargin, 20);
self.nameNode.hidden = NO;
lastY = self.nameNode.bottom;
} else {
self.nameNode.hidden = YES;
}
self.bubbleIVNode.top = lastY;
}
简单的异步绘制node
@interface PDLabelNode : PDViewNode
@property (nonatomic, strong) NSString *text;
@property (nonatomic, strong) UIFont *font;
@end
4、 VC中数据初始化流程
0、在tableview初始化时，registerMap获取注册cell信息。
1、数据库或者网络中取数据。message类
2、转化cellModel
这里可以在后台线程来做，异步计算出cell的高度，缓存到vm中
dispatch_async(self.configCellVMQueue, ^{
CellViewModel *timeVM = [[CellViewModel alloc] initWithType:];
[timeVM config:message];
[chatMArr addObject:timeVM];
}
3 、datasource获取cell
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.viewModel.chatDataArr.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
CellViewModel *vm = self.viewModel.chatDataArr[indexPath.row];
Cell *cell = [tableView dequeueReusableCellWithIdentifier:vm.cellIdentifier forIndexPath:indexPath];
cell.delegate = self;
[cell configListCellViewModel:vm];
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return self.viewModel.chatDataArr[indexPath.row].cellHeight;
}
有了cellModel后cell的很多数据变化都可以通过改变cellmodel来操作。
新增
以后无论再有什么新增cell，就不需要关注很多东西，专心写cell类就好了。
讨论
1、 把时间当做一个cell
有些人喜欢把时间放在cell上，这样会导致cell的高度经常变化，我觉得单独提取出来会是一种更好的方式。可能在cell新增、删除等操作上需要更加精细的处理。
