UITableView-FDTemplateLayoutCell + 自动布局让 Cell 高度自适应

前提

• 本文以Swift 作为讲解，OC 类似，不作赘述
• 我们这里讨论的是纯代码方式的布局，所以XIB 和 Storyboard 的使用方式不在本文的讨论范畴。

问题描述

通常情况下，我们都是通过

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return 50
}

提前告知每个Cell的高度。

当 UITableViewCell 中的内容出现图文混排时，每个的Cell高度不尽相同。比较笨的做法，是使用 String 的自动计算文本的高度(实际上是宽高都计算了，也就是size)

下面是根据字体大小计算系统默认字体的 字符串 所占的宽度

// MARK: 计算字符锁占的宽度
func calculateStringWidth(sourceString: String?, fontSize: CGFloat) -> CGFloat {
    guard let _ = sourceString else {
        return 0
    }

    let size: CGSize = CGSize(width: CGFloat(MAXFLOAT), height: CGFloat(MAXFLOAT))
    let rect: CGRect = sourceString!.boundingRect(with: size, options: NSStringDrawingOptions.usesFontLeading, attributes: [kCTFontAttributeName as NSAttributedStringKey: UIFont.systemFont(ofSize: fontSize)], context: nil);
    return rect.width
}

事实上，就图文混排的UITableViewCell 而言，特别需要高度的自适应。

解决的第三方库

使用的第三方库 UITableView-FDTemplateLayoutCell

解决思路

这里的思路是利用 autoLayout(实际上就是OC中的Masonry，Swift中的SnapKit) 写好约束布局，在tableViewDelegate的高度和cell实现中作充数据填充（我这里叫render渲染），自动把高度撑开的过程。

---

实例代码：

TableView 中的代理

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return tableView.fd_heightForCell(withIdentifier: titleWithRightImageCellID, configuration: { (cell) in
            let currentCell = cell as! ArticleTitlWithRightImageCell
            currentCell.renderCell(with: self.testDataSource[indexPath.row])
        })
        
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        cell = (tableView.dequeueReusableCell(withIdentifier: titleWithRightImageCellID,
                                                  for: indexPath)) as! ArticleTitlWithRightImageCell
        cell.renderCell(with: testDataSource[indexPath.row])
        return cell
    }

可以看到，在两个代理中调用了同一个渲染。渲染的实质是让其中的UILabel和UIImage之类的数据重赋值。涉及之前有提到过的复用机制，这了不赘述。除此之外，渲染还做了一些约束的重置，因为一些情况下，cell model 对应的那个数据并不存在，需要隐藏

另外，实际上 UITableView-FDTemplateLayoutCell 在 fd_heightForCell 中提供的方法不只是 fd_heightForCell一种，还有其他带缓存的方法，因为没有深入研究，这里不做展开了。

Cell 中的约束示例

private func setupConstrains() {
    titleLabel.snp.makeConstraints { (make) in
        make.top.equalTo(contentView.snp.top).offset(16).priority(.high)
        make.leading.equalTo(11)
        make.trailing.equalTo(-11)
    }
    
    imageViewContainer.snp.makeConstraints { (make) in
        make.left.right.equalTo(contentView)
        make.top.equalTo(contentLabel.snp.bottom).offset(10)
        make.height.equalTo(imageHeight)
    }
    
    footerView.snp.makeConstraints { (make) in
        make.height.equalTo(46)
        make.left.right.equalTo(contentView)
        make.bottom.equalTo(contentView.snp.bottom).priority(.high)
        make.top.equalTo(imageViewContainer.snp.bottom)
    }
}

约束中，务必注意以下几点，否则约束一旦出错，就有可能无法撑开高度。

• Cell需要使用tableView的registerNib或者registerClass的方法进行注册，否则会报异常。
• 添加控件必须使用 self.contentView.addSubView
  • 所有的控件，必须添加到cell.contentView中去！
  • 所有的控件，约束也必须依赖于cell.contentView 而非 cell，否则会出错
• 顶部和底部的约束必须写好
  • 最上面的控件，要写针对contentView.snp.top 的依赖，并设置最高权限 priority(.high)
  • 最下面的控件，要写针对contentView.snp.bottom 的依赖，并设置最高权限 priority(.high)

如果不添加最高权限，你会发现，我们的布局其实是正确的，但是一直会报一个类似 的约束冲突。实际测试发现，是因为 heightForCell 默认是一个44高度，我们在回调中使用了约束渲染把他撑开，他还是会报错

解决方案就是在顶部和底部添加最高约束权限。github issues 参考链接