上篇我们已经封装好了键盘，接下来就来实现信息流界面。很容易看出，信息流界面是一个tableView，里面的每条消息则是一个个cell；因为消息分纯文本、图片、视频、语音、文件等几类，怎么实现这些cell；笔者在网上查看了一些优秀的实现，分别为以下几种：
1、使用CoreText来绘制cell，有VVeboTableView
2、使用Autolayout自动计算高度，有FDTemplateLayoutCell
笔者参考了大神ibireme的iOS 保持界面流畅的技巧中的思想，为每种消息创建一个cellLayout用来计算相关控件的frame，并且这些cellLayout继承于相同的父类LXChatLayout，该父类包含了头像、名字、发送中、背景、发送失败等控件的frame和message的值。为每种消息创建一个tableViewCell，这些cell继承于父类LXChatCell。该父类有layout、头像、名字、发送中、发送失败、cell的背景等属性，还有处理相关事件的功能。通过先获取数据，然后计算相关控件的布局并缓存到内存中，再显示到tableView上，使用YYFPSLabel来检测拖动tableView时的Fps基本在50以上。
talk is cheap，show code
//LXChatLayout.h
@interface LXChatLayout : NSObject {
UIEdgeInsets rightBubbleInset; // 右边cell背景的间距
UIEdgeInsets leftBubbleInset; // 左边cell背景的间距
CGFloat hInset; // 头像与tableView的间距
CGFloat marginHead; // 名字与头像的间距
CGFloat topInset; // cell的顶部间距
}
@property (nonatomic, strong) LXMessage *message;
@property (nonatomic, assign) CGRect headRect;
@property (nonatomic, assign) CGRect nameRect;
@property (nonatomic, assign) CGRect indicatorRect;
@property (nonatomic, assign) CGRect bgImgRect;
@property (nonatomic, assign) CGRect failRect;
@property (nonatomic, assign) CGFloat cacheHeight;
+ (instancetype)layoutWithMessage:(LXMessage *)msg;
- (BOOL)isMedia;
#pragma mark - rewrite methods
- (void)computeMineBy:(LXMessage *)message;
- (void)computeOtherBy:(LXMessage *)message;
@end
// LXChatCell.h
typedef void(^LXChatTapContentHandle)(LXChatLayout *layout, CGRect fileRect);
@interface LXChatCell : UITableViewCell
@property (nonatomic, strong) LXChatLayout *layout;
@property (nonatomic, strong) UIImageView *headImgView;
@property (nonatomic, strong) UILabel *nameLabel;
@property (nonatomic, strong) UIActivityIndicatorView *indicatorView;
@property (nonatomic, strong) UIImageView *failImgView;
@property (nonatomic, strong) UIImageView *bgImgView;
@property (nonatomic, copy) LXChatTapContentHandle tapHandle;
- (void)tapContent:(UITapGestureRecognizer *)gesture;
@end
以上是父类的声明，下面将以纯文本消息为例来实现一个纯文本消息的cell及其cellLayout，其它的消息则参照这种方式即可实现。其关键代码如下
// LXChatTextLayout.h
@interface LXChatTextLayout : LXChatLayout
@property (nonatomic, assign) CGRect textRect;
@property (nonatomic, strong) NSMutableAttributedString *attribute;
@property (nonatomic, strong) YYTextLayout *textLayout;
@end
@implementation LXChatTextLayout
- (void)setMessage:(LXMessage *)message {
[super setMessage:message];
// 计算attributeString
....
}
- (void)computeMineBy:(LXMessage *)message {
[super computeMineBy:message];
....
// 计算出文本、背景气泡的frame以及 cell的高度
_textRect = CGRectMake(bgX + contentInset.left, bgY + insetTop, textWidth, textHeight);
self.bgImgRect = CGRectMake(bgX, bgY, textWidth + contentInset.left + contentInset.right, bgHeight);
self.cacheHeight += CGRectGetMaxY(self.bgImgRect);
}
- (void)computeOtherBy:(LXMessage *)message {
[super computeOtherBy:message];
....
// 计算出文本、背景气泡的frame以及 cell的高度
_textRect = CGRectMake(bgX + contentInset.left, bgY + insetTop, textWidth, textHeight);
self.bgImgRect = CGRectMake(bgX, bgY, textWidth + contentInset.left + contentInset.right, bgHeight);
self.cacheHeight += CGRectGetMaxY(self.bgImgRect);
}
// LXChatTextCell.h
@interface LXChatTextCell : LXChatCell
@property (nonatomic, strong) YYLabel *contentLabel;
@end
@implementation LXChatTextCell
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
_contentLabel = [[YYLabel alloc] init];
//_contentLabel.backgroundColor = [UIColor orangeColor];
[self.contentView addSubview:_contentLabel];
}
return self;
}
- (void)setLayout:(LXChatLayout *)layout {
[super setLayout:layout];
LXChatTextLayout *tLayout = (LXChatTextLayout *)layout;
self.contentLabel.textLayout = tLayout.textLayout;
[CATransaction begin]; // 关闭更改frame的隐式动画
[CATransaction setDisableActions:true];
self.contentLabel.frame = tLayout.textRect;
[CATransaction commit];
}
@end
在这里显示纯文本使用的是YYLabel，是YYText库中的一部分，功能非常强大，也支持异步绘制。在测试的过程中发现，如果快速拖动tableView，更改控件的frame时，会看到有一个动画的过程，这种体验很差；后来查找资料说是因为更改layer的frame产生隐式动画导致的，使用以下方法可以关闭该隐式动画。
[CATransaction begin];
[CATransaction setDisableActions:true];
// 更改frame
....
[CATransaction commit];
完成后效果如下
chat5.gif
