代码之家  ›  专栏  ›  技术社区  ›  Jan

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

  •  0
  • Jan  · 技术社区  · 5 年前

    我有一个表格视图,每个单元格显示一个可选标题和一个多行字幕。我希望细胞能够自我调整大小(即随着字幕的增长而增长,但尽可能保持紧凑)。为此,我使用 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

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

    0 回复  |  直到 5 年前
        1
  •  2
  •   Chanpreet Singh    5 年前
    • 尝试填充,而不是按比例填充
    • 或者尝试设置标签。sizeToFit()将标签折叠为其内容大小