如何基于多个视图配置动态UITableViewCell的高度

时间:2017-04-11 21:55:09

标签: uitableview autolayout

我正在开发一个从服务器提取数据并在UITableView中显示数据的应用程序。数据是动态的,引入来自社交网络的项目。

目前,我正在提供个人资料图片,用户名和社交网络处理。该数据显示在UITableView中,类似于Tweetbot显示其数据的方式。以下是Tweetbot时间轴的参考:

Screenshot of Tweetbot Timeline

如您所见,在最上面的帖子中,正文包含四行。在第二篇文章中,正文中只包含一行。您还可能会注意到,在我的帖子中,单元格的高度不会缩小,导致单元格剪切UIImageView。从图像的底部到单元格的底部,从图像的顶部到单元的顶部看起来存在相等的空间。但是当身体中有多行文本时,单元格的高度会增加。

我通常设置estimatedRowHeight的{​​{1}}和rowHeight属性以通过固定内容来允许动态高度,但我不知道如何配置自动布局以允许动态基于多个视图的单元格高度。

我认为配置此布局的一个想法是检测单元格的高度,并将正文文本固定到单元格的底部,从而创建动态高度。然后,如果单元格的高度大于图像的高度和从图像到单元格的顶部约束的总和乘以2(图像视图和单元格顶部和底部之间的底部和顶部间距),我会删除正文文本底部之间的约束,并将约束添加到图像和单元格的底部。

简而言之,如果一个单元格只包含一行文本,我怎样才能确保单元格尊重图像的尺寸而不剪切图像?

2 个答案:

答案 0 :(得分:0)

我通过创建两个约束解决了这个问题;一个位于图像底部和单元格底部之间,另一个位于标签底部和单元格底部之间。

我在图片和单元格之间设置约束,使其具有constant relation of所需的greaterThanOrEqual,而标签和单元格之间的约束具有所需的constantrelation equal。通过这样做,如果正文文本变大,那么greaterThanOrEqual将允许图像和单元格之间的约束增长但从不允许它变得小于期望的constant并导致单元格剪辑内容。

答案 1 :(得分:0)

我正在回答这个问题,因为听起来你的约束没有正确设置(从你自己对这个问题的回答)。

如果您的约束条件得到满足,您将获得动态高度作为设置的一部分免费计算。

以下是我展示自我调整UITableViewCell的简短示例:

https://github.com/runmad/SelfSizingUITableViewCellExample

这是一个细胞的示例约束:

class TableViewCell: UITableViewCell
{

    let topView = UIView()
    let label = UILabel()
    let bottomView = UIView()

    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        contentView.backgroundColor = UIColor.white

        contentView.addSubview(topView)
        topView.backgroundColor = UIColor.red
        topView.translatesAutoresizingMaskIntoConstraints = false
        topView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10).isActive = true
        topView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10).isActive = true
        topView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10).isActive = true
        topView.heightAnchor.constraint(equalToConstant: 100).isActive = true

        contentView.addSubview(label)
        label.numberOfLines = 0
        label.backgroundColor = UIColor.lightGray
        label.translatesAutoresizingMaskIntoConstraints = false
        label.topAnchor.constraint(equalTo: topView.bottomAnchor, constant: 10).isActive = true
        label.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10).isActive = true
        label.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10).isActive = true

        contentView.addSubview(bottomView)
        bottomView.backgroundColor = UIColor.blue
        bottomView.translatesAutoresizingMaskIntoConstraints = false
        bottomView.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 10).isActive = true
        bottomView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10).isActive = true
        bottomView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -10).isActive = true
        bottomView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10).isActive = true
        bottomView.heightAnchor.constraint(equalToConstant: 20).isActive = true
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    static func reuseIdentifier() -> String
    {
        return String(describing: self)
    }

}

关键外卖(无论单元格中的子视图的数量)是单元格中的子视图必须被约束到单元格的所有边缘,这允许它根据{{的大小调整大小1}}任何观点。如果您有多个子视图,则必须确保子视图之间的约束是正确的。