如何自动调整表格视图高度堆栈视图的大小

Question

我正在尝试实现这个功能:

在表视图的每个单元格中显示标题、说明和图像。但是，图像可能为零。要求是：

1. 当image为nil时，自动展开标签以适应整个单元格
2. Tableview单元格高度应根据描述标签自动调整。
3. 需要使用stackView

我以编程方式做到了这一点：

>

设置此为tableview：

 tableView.rowHeight = UITableView.automaticDimension
 tableView.estimatedRowHeight = 200

创建2个堆栈视图：一个用于标签，一个用于标签图像：

    let contentStack: UIStackView = {
        var view = UIStackView()
        view.axis = .horizontal
        view.spacing = 16
        view.distribution = .equalSpacing
        view.translatesAutoresizingMaskIntoConstraints  = false
        return view }()
    
    let labelStack: UIStackView = {
        var view = UIStackView()
        view.axis = .vertical
        view.spacing = 5
        view.translatesAutoresizingMaskIntoConstraints = false
        view.distribution = .fillProportionally
        return view }()

func setupUI() {
        contentView.addSubview(contentStack)
        labelStack.addArrangedSubview(titleLabel)
        labelStack.addArrangedSubview(descriptionLable)
        contentStack.addArrangedSubview(labelStack)
        contentStack.addArrangedSubview(iconView)
        
        NSLayoutConstraint.activate([

            iconView.heightAnchor.constraint(equalToConstant: 80),
            iconView.widthAnchor.constraint(equalToConstant: 80),

            contentStack.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 16),
            contentStack.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            contentStack.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            contentStack.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -16)
        ])
        layoutIfNeeded()
    }

然而，这段代码不会自动调整tableview单元格的高度，您可以从屏幕截图中看到，单元格不会根据标签的长度展开。

使用堆栈视图执行此操作的最佳方法是什么？

Answer 1

一些变化...

现在，您的80-pt Height图像视图将content Stack高度限制为80点，因此在您的content Stack设置中，使用以下任一选项：

view.alignment = .top

// or

view.alignment = .center

将labelStack设置更改为：

view.distribution = .fill   // NOT .fillProportionally

确保您设置了:

titleLabel.setContentCompressionResistancePriority(.required, for: .vertical)
descriptionLabel.setContentCompressionResistancePriority(.required, for: .vertical)

编辑

这就是它如何通过长短描述以及有/没有图像的外观。标签具有青色背景，图像视图具有黄色背景，因此您可以看到框架...

如果留下太多顶部和底部“填充”，则需要调整顶部和底部约束常量。