UITableViewCell中带有多行标签的UIStackView高度不正确

时间:2019-05-16 10:25:52

标签: swift uitableview uistackview uitableviewautomaticdimension

我有一个表格视图,其中每个单元格都显示一个可选标题和多行字幕。我希望该单元格能够自动调整大小(即与字幕一起增长,但尽可能保持紧凑)。为此,我使用tableView.rowHeight = UITableView.automaticDimension

我遇到的问题是,在确实有标题的单元格中,字幕周围有很多垂直间距。

没有标题的单元格被正确压缩。同样,当我重新加载表格视图时,所有布局都变得正确。

预期行为

enter image description here

实际行为

enter image description here

该单元格基本上有一个UIStackView固定到该单元格的contentView

import UIKit

public class TableViewCellSubtitle: UITableViewCell {

    private lazy var labelStack: UIStackView = {
        let labelStack = UIStackView()
        labelStack.alignment = .fill
        labelStack.distribution = .fillProportionally
        labelStack.axis = .vertical
        return labelStack
    }()

    private lazy var titleLabel: UILabel = {
        let titleLabel = UILabel()
        titleLabel.backgroundColor = UIColor.blue.withAlphaComponent(0.3)
        return titleLabel
    }()

    private lazy var subtitleLabel: UILabel = {
        let subtitleLabel = UILabel()
        subtitleLabel.numberOfLines = 0
        subtitleLabel.backgroundColor = UIColor.green.withAlphaComponent(0.3)
        return subtitleLabel
    }()

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

        setupUI()
        setupConstraints()
    }

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

    private func setupUI() {

        contentView.addSubview(labelStack)
        labelStack.translatesAutoresizingMaskIntoConstraints = false
        labelStack.addArrangedSubview(titleLabel)
        labelStack.addArrangedSubview(subtitleLabel)

    }

    private func setupConstraints() {
        NSLayoutConstraint.activate([
                labelStack.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
                labelStack.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 12),
                contentView.bottomAnchor.constraint(equalTo: labelStack.bottomAnchor, constant: 12),
                contentView.trailingAnchor.constraint(equalTo: labelStack.trailingAnchor, constant: 16)
            ])
    }

    public func setup(title: String?, subtitle: String) {
        titleLabel.text = title
        if title == nil {
            labelStack.removeArrangedSubview(titleLabel)
            titleLabel.removeFromSuperview()
        }
        subtitleLabel.text = subtitle
    }
}

我尝试设置字幕的内容

subtitleLabel.setContentHuggingPriority(.required, for: .vertical)

但这会使标题增加:

enter image description here

如果我将两者都设置:

titleLabel.setContentHuggingPriority(.required, for: .vertical)
subtitleLabel.setContentHuggingPriority(.required, for: .vertical)

它变成

enter image description here

在所有情况下,如果我重新加载单元格或表格视图,则布局将变得正确(在此处单击单元格):

enter image description here

我知道我可以在不使用堆栈视图的情况下对单元进行布局,但是我的实际实现要复杂一些

1 个答案:

答案 0 :(得分:0)

  • 尝试填充而不是按比例填充
  • 或者尝试将label.sizeToFit()设置为将标签折叠到其内容大小