UITableViewCell约束布局问题：StackView排版异常求助

我正在自定义UITableViewCell并编写约束代码，但无法正确设置StackView的布局。我期望imageStackView中的UIImageView与numberLabel相邻，且整体在单元格左边缘和垂直分隔线之间居中，一直搞不懂Auto Layout约束怎么用。以下是我的代码：

class CustomTableViewCell: UITableViewCell {
    // Left Section (number label + images)
    let numberLabel = UILabel()
    let imageStackView = UIStackView()
    let leftGroupStackView = UIStackView() // Combines numberLabel and imageStackView

    // Middle Line
    let verticalLine = UIView()

    // Right Section (stacked labels with separator)
    let topLabel = UILabel()
    let bottomLabel = UILabel()
    let horizontalLine = UIView()

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

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupViews()
        setupConstraints()
    }

    private func setupViews() {
        // Configure numberLabel
        numberLabel.font = .systemFont(ofSize: 16, weight: .bold)
        numberLabel.textAlignment = .center

        // Configure imageStackView
        imageStackView.axis = .horizontal
        imageStackView.spacing = 8 // Reduced spacing between images
        imageStackView.alignment = .center

        // Combine numberLabel and imageStackView into leftGroupStackView
        leftGroupStackView.axis = .horizontal
        leftGroupStackView.alignment = .center
        leftGroupStackView.spacing = 8 // Reduced spacing between numberLabel and images
        leftGroupStackView.addArrangedSubview(numberLabel)
        leftGroupStackView.addArrangedSubview(imageStackView)
        contentView.addSubview(leftGroupStackView)

        // Configure verticalLine
        verticalLine.backgroundColor = .lightGray
        contentView.addSubview(verticalLine)

        // Configure topLabel
        topLabel.font = .systemFont(ofSize: 14)
        topLabel.textAlignment = .right
        contentView.addSubview(topLabel)

        // Configure bottomLabel
        bottomLabel.font = .systemFont(ofSize: 14)
        bottomLabel.textAlignment = .right
        contentView.addSubview(bottomLabel)

        // Configure horizontalLine
        horizontalLine.backgroundColor = .lightGray
        contentView.addSubview(horizontalLine)
    }

    private func setupConstraints() {
        // Disable autoresizing masks
        [leftGroupStackView, verticalLine, topLabel, bottomLabel, horizontalLine].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
        }

        // Center the leftGroupStackView horizontally and ensure proper spacing
        NSLayoutConstraint.activate([
            leftGroupStackView.centerYAnchor.constraint(equalTo: contentView.centerYAnchor), // Center vertically
            leftGroupStackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            leftGroupStackView.trailingAnchor.constraint(lessThanOrEqualTo: verticalLine.leadingAnchor, constant: -16)
        ])

        // Vertical line constraints
        NSLayoutConstraint.activate([
            verticalLine.leadingAnchor.constraint(equalTo: leftGroupStackView.trailingAnchor, constant: 16),
            verticalLine.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
            verticalLine.widthAnchor.constraint(equalToConstant: 1),
            verticalLine.heightAnchor.constraint(equalTo: contentView.heightAnchor, multiplier: 0.8)
        ])

        // Top label constraints
        NSLayoutConstraint.activate([
            topLabel.leadingAnchor.constraint(equalTo: verticalLine.trailingAnchor, constant: 16),
            topLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            topLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 16)
        ])

        // Horizontal line constraints
        NSLayoutConstraint.activate([
            horizontalLine.leadingAnchor.constraint(equalTo: topLabel.leadingAnchor),
            horizontalLine.trailingAnchor.constraint(equalTo: topLabel.trailingAnchor),
            horizontalLine.topAnchor.constraint(equalTo: topLabel.bottomAnchor, constant: 4),
            horizontalLine.heightAnchor.constraint(equalToConstant: 1)
        ])

        // Bottom label constraints
        NSLayoutConstraint.activate([
            bottomLabel.leadingAnchor.constraint(equalTo: topLabel.leadingAnchor),
            bottomLabel.trailingAnchor.constraint(equalTo: topLabel.trailingAnchor),
            bottomLabel.topAnchor.constraint(equalTo: horizontalLine.bottomAnchor, constant: 4),
            bottomLabel.bottomAnchor.constraint(lessThanOrEqualTo: contentView.bottomAnchor, constant: -16)
        ])
    }

    // Update the cell with data
    func configure(number: Int, images: [UIImage], topText: String, bottomText: String) {
        numberLabel.text = "\(number)"
        topLabel.text = topText
        bottomLabel.text = bottomText

        // Remove existing image views
        imageStackView.arrangedSubviews.forEach { $0.removeFromSuperview() }

        // Add new image views with larger size
        for image in images {
            let imageView = UIImageView(image: image)
            imageView.contentMode = .scaleAspectFit
            imageView.widthAnchor.constraint(equalToConstant: 36).isActive = true // Slightly larger size
            imageView.heightAnchor.constraint(equalToConstant: 36).isActive = true // Slightly larger size
            imageStackView.addArrangedSubview(imageView)
        }
    }
}

问题修复方案 #

原布局的核心问题是约束循环和高度计算歧义，导致左侧组无法正确居中。以下是针对性修改：

1. 消除垂直分隔线的约束循环：
   移除垂直分隔线对leftGroupStackView的依赖，改为和右侧标签联动，避免双向约束冲突。
2. 固定左侧组的间距规则：
   将leftGroupStackView的trailingAnchor从lessThanOrEqualTo改为equalTo，确保它在左边缘和分隔线之间的区域内严格对齐。
3. 明确单元格高度计算逻辑：
   让bottomLabel的bottomAnchor直接绑定contentView的底部，保证单元格高度被正确撑开，左侧组的垂直居中才会生效。

修改后的完整代码 #

class CustomTableViewCell: UITableViewCell {
    // Left Section (number label + images)
    let numberLabel = UILabel()
    let imageStackView = UIStackView()
    let leftGroupStackView = UIStackView() // Combines numberLabel and imageStackView

    // Middle Line
    let verticalLine = UIView()

    // Right Section (stacked labels with separator)
    let topLabel = UILabel()
    let bottomLabel = UILabel()
    let horizontalLine = UIView()

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

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupViews()
        setupConstraints()
    }

    private func setupViews() {
        // Configure numberLabel
        numberLabel.font = .systemFont(ofSize: 16, weight: .bold)
        numberLabel.textAlignment = .center

        // Configure imageStackView
        imageStackView.axis = .horizontal
        imageStackView.spacing = 8
        imageStackView.alignment = .center

        // Combine numberLabel and imageStackView into leftGroupStackView
        leftGroupStackView.axis = .horizontal
        leftGroupStackView.alignment = .center
        leftGroupStackView.spacing = 8
        leftGroupStackView.addArrangedSubview(numberLabel)
        leftGroupStackView.addArrangedSubview(imageStackView)
        contentView.addSubview(leftGroupStackView)

        // Configure verticalLine
        verticalLine.backgroundColor = .lightGray
        contentView.addSubview(verticalLine)

        // Configure topLabel
        topLabel.font = .systemFont(ofSize: 14)
        topLabel.textAlignment = .right
        contentView.addSubview(topLabel)

        // Configure bottomLabel
        bottomLabel.font = .systemFont(ofSize: 14)
        bottomLabel.textAlignment = .right
        contentView.addSubview(bottomLabel)

        // Configure horizontalLine
        horizontalLine.backgroundColor = .lightGray
        contentView.addSubview(horizontalLine)
    }

    private func setupConstraints() {
        // Disable autoresizing masks
        [leftGroupStackView, verticalLine, topLabel, bottomLabel, horizontalLine].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
        }

        // Left group constraints - 垂直居中，左右固定间距
        NSLayoutConstraint.activate([
            leftGroupStackView.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
            leftGroupStackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            leftGroupStackView.trailingAnchor.constraint(equalTo: verticalLine.leadingAnchor, constant: -16)
        ])

        // Vertical line constraints - 固定宽度，垂直居中，高度占单元格80%
        NSLayoutConstraint.activate([
            verticalLine.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
            verticalLine.widthAnchor.constraint(equalToConstant: 1),
            verticalLine.heightAnchor.constraint(equalTo: contentView.heightAnchor, multiplier: 0.8),
            verticalLine.trailingAnchor.constraint(equalTo: topLabel.leadingAnchor, constant: -16)
        ])

        // Top label constraints
        NSLayoutConstraint.activate([
            topLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            topLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 16)
        ])

        // Horizontal line constraints
        NSLayoutConstraint.activate([
            horizontalLine.leadingAnchor.constraint(equalTo: topLabel.leadingAnchor),
            horizontalLine.trailingAnchor.constraint(equalTo: topLabel.trailingAnchor),
            horizontalLine.topAnchor.constraint(equalTo: topLabel.bottomAnchor, constant: 4),
            horizontalLine.heightAnchor.constraint(equalToConstant: 1)
        ])

        // Bottom label constraints - 明确bottom锚点，撑开单元格高度
        NSLayoutConstraint.activate([
            bottomLabel.leadingAnchor.constraint(equalTo: topLabel.leadingAnchor),
            bottomLabel.trailingAnchor.constraint(equalTo: topLabel.trailingAnchor),
            bottomLabel.topAnchor.constraint(equalTo: horizontalLine.bottomAnchor, constant: 4),
            bottomLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -16)
        ])
    }

    // Update the cell with data
    func configure(number: Int, images: [UIImage], topText: String, bottomText: String) {
        numberLabel.text = "\(number)"
        topLabel.text = topText
        bottomLabel.text = bottomText

        // Remove existing image views
        imageStackView.arrangedSubviews.forEach { $0.removeFromSuperview() }

        // Add new image views with larger size
        for image in images {
            let imageView = UIImageView(image: image)
            imageView.contentMode = .scaleAspectFit
            imageView.widthAnchor.constraint(equalToConstant: 36).isActive = true
            imageView.heightAnchor.constraint(equalToConstant: 36).isActive = true
            imageStackView.addArrangedSubview(imageView)
        }
    }
}

内容的提问来源于stack exchange，提问作者Micheal