[How to] 动态布局可变高度的cell的应用

1.简介

代码：https://github.com/xufeng79x/DynamicChangeableCell

微博界面，微信和QQ聊天界面，这些界面的布局大都不确定，且每一条消息的高度也不一样。在TableView的代理UITableViewDelegate的heightForRowAtIndexPath中可以动态的定义每一行的高度，但是我们需要得到cell的内容后才能最终确认当前的cell到底需要多少高度，而得到cell的方法是代理UITableViewDataSource的cellForRowAtIndexPath方法，从断点debug手段来看，系统都是先调用heightForRowAtIndexPath方法然后在调用cellForRowAtIndexPath方法，所以从调用顺序来看，在heightForRowAtIndexPath之前就需要将高度信息计算出来。

2.目标

代码：https://github.com/xufeng79x/DynamicChangeableCell

如下图模拟了一个简单的微博界面，此界面极大简化了复杂度，只包含一个头像和文本内容。但是对一个demo用于解释此场景已经足够了。

3.实现

对于很多变化多样的cell来说，固定布局的xib活着直接storyborad已经无法满足要求，cell中高度，cell中各个控件的布局或者是否显示等是可变的。因此我们我们唯有使用代码去

创建控件并根据具体条件去设置他们。

关键步骤讲解：

1.创建自定义cell：

重用cell，并且重写构造方法，在构造方法中去创建各个控件，但是其并不包含frame信息。在微博或者qq等场景中控件的frame都不是固定的。

所以我们不能通过xib那样的方式去实现而只能使用代码的动态创建来完成。

/**
 *  创建cell
 *
 *  @param tableView 宿主table
 *
 *  @return cell
 */
+(instancetype) webCellWithTableView:(UITableView *)tableView
{
    // 根据可ID进行cell的可重用查找
    static NSString *reuseId = @"webcell";
    XFWebTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseId];

    if (!cell) {
        cell = [[self alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseId];
    }

    return cell;

}

/**
 *  重写父类的方法
 *
 *  @param style           重写父类初始化方法并创建子类的控件
 *  @param reuseIdentifier 重用ID
 *
 *  @return cell
 */
-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        // 开始创建子控件
        // 头像
        UIImageView *picView = [[UIImageView alloc] init];
        [self.contentView addSubview:picView];
        self.picView = picView;

        // 内容
        UILabel *textView = [[UILabel alloc] init];
        textView.font = [UIFont systemFontOfSize:XF_TEXT_FONT];
        textView.numberOfLines = ;
        [self.contentView addSubview:textView];
        self.textView = textView;
    }

    return self;
}

2.创建含有frame信息的模型类，其中根据数据模型对象来创建各个控件的frame信息

#import <UIKit/UIKit.h>

// 字体大小设定
#define XF_TEXT_FONT 15

@class XFWebModel;

/**
 *  微博cell的布局信息和数据信息集合
 */
@interface XFWebFrame : NSObject

// 当前cell的数据
@property(nonatomic, strong) XFWebModel *webInfo;

 // 当前cell所需要的高度
@property(nonatomic,assign,readonly) NSInteger cellHight;

// 头像空间的frame
@property(nonatomic,assign,readonly) CGRect picFrame;

// 正文控件frame
@property(nonatomic, assign,readonly) CGRect textFrame;

/**
 *  类构造方法，用于返回每一行微博数据和布局列表
 *
 *  @return 布局信息和微博信息
 */
+(NSMutableArray *)webFrames;

@end

3.在Controller中起plist中加载数据的时候就直接创建了含有frame信息的对象列表：

/**
 *  懒加载web数据
 *
 *  @return 微博数据
 */
- (NSMutableArray *)webFrames
{
    if (!_webFrames) {
        _webFrames = [XFWebFrame webFrames];
    }

    return _webFrames;
}

4.在上述加载过程中，我们需要计算每一条微博的cell的布局信息：

/**
 *  记载数据并计算布局
 *
 *  @param webInfo 记载数据并计算布局
 */
-(void) setWebInfo:(XFWebModel *)webInfo{
    // 数据设定
    _webInfo = webInfo;

    // 开始计算布局
    [self calculateFrameWithInfo:webInfo];
}

/**
 *  计算布局
 *
 *  @param webInfo 计算每一行微博的布局
 */
- (void)calculateFrameWithInfo:(XFWebModel *)webInfo
{
    CGFloat margin = ;

    // 头像
    CGFloat picW = ;
    CGFloat picH = ;
    CGFloat picX = margin;
    CGFloat picY = margin;
    _picFrame = CGRectMake(picX, picY, picW, picH);

    // 正文
    CGSize textSize = [self sizeWithText:self.webInfo.content maxSize:CGSizeMake(, MAXFLOAT) fontSize:XF_TEXT_FONT];
    CGFloat textX = picX;
    CGFloat textY = CGRectGetMaxY(self.picFrame) + margin;
    _textFrame = CGRectMake(textX, textY, textSize.width, textSize.height);

    // 计算行高
    _cellHight = CGRectGetMaxY(self.textFrame) + margin;

}

5.在Controller中每一条微博的cell布局和内容信息都直接传递给自定义cell对象，而高度已经在上述懒加载过程都已经计算出来直接使用即可。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    // 将微博信息与其布局信息传递至自定义cell
    XFWebTableViewCell *cell = [XFWebTableViewCell webCellWithTableView:tableView];
    cell.webFrame = self.webFrames[indexPath.row];
    return cell;
}

- (CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //高度已经计算完成，直接使用
    XFWebFrame *frame = self.webFrames[indexPath.row];
    return frame.cellHight;
}

6.在自定义cell中根据Controller传入的frame对象信息在将各个控件的frame进行调整并将微博内容

// 接受微博信息和布局信息
- (void)setWebFrame:(XFWebFrame *)webFrame
{
    _webFrame = webFrame;

    // 设置内容
    self.picView.image = [UIImage imageNamed:webFrame.webInfo.photo];
    self.textView.text = webFrame.webInfo.content;

    // 设置布局
    self.picView.frame = webFrame.picFrame;
    self.textView.frame = webFrame.textFrame;
}

　　

4.总结:

本文主要说明对于动态cell（高度，控件内容，frame每一个cell都不一致）需要我们在得到数据后在直接将布局高度等信息计算出来，在加载cell中将这些信息传入自定义cell中设定相应的frame。