ios – Structure drawback with UITableViewCell Contraints

I’m attempting to construct a UITableViewCell and code the constraints. I’m having issues getting the StackViews I’ve layed out correctly. Beneath is my code.

What I need is the imagesViews within the imageStackView to be adjoining to the numberLabel. Then centered in between the left fringe of the cell and the vertical separator. I’ve at all times struggled to grasp the constraints.

class CustomTableViewCell: UITableViewCell {
    // Left Part (quantity label + photographs)
    let numberLabel = UILabel()
    let imageStackView = UIStackView()
    let leftGroupStackView = UIStackView() // Combines numberLabel and imageStackView

    // Center Line
    let verticalLine = UIView()

    // Proper Part (stacked labels with separator)
    let topLabel = UILabel()
    let bottomLabel = UILabel()
    let horizontalLine = UIView()

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

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

    personal func setupViews() {
        // Configure numberLabel
        numberLabel.font = .systemFont(ofSize: 16, weight: .daring)
        numberLabel.textAlignment = .heart

        // Configure imageStackView
        imageStackView.axis = .horizontal
        imageStackView.spacing = 8 // Decreased spacing between photographs
        imageStackView.alignment = .heart

        // Mix numberLabel and imageStackView into leftGroupStackView
        leftGroupStackView.axis = .horizontal
        leftGroupStackView.alignment = .heart
        leftGroupStackView.spacing = 8 // Decreased spacing between numberLabel and pictures
        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 = .proper
        contentView.addSubview(topLabel)

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

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

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

        // Middle the leftGroupStackView horizontally and guarantee correct 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)
        ])

        // Prime 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)
        ])

        // Backside 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)
        ])
    }



    
    
    // Replace the cell with information
    func configure(quantity: Int, photographs: [UIImage], topText: String, bottomText: String) {
        numberLabel.textual content = "(quantity)"
        topLabel.textual content = topText
        bottomLabel.textual content = bottomText

        // Take away current picture views
        imageStackView.arrangedSubviews.forEach { $0.removeFromSuperview() }

        // Add new picture views with bigger dimension
        for picture in photographs {
            let imageView = UIImageView(picture: picture)
            imageView.contentMode = .scaleAspectFit
            imageView.widthAnchor.constraint(equalToConstant: 36).isActive = true // Barely bigger dimension
            imageView.heightAnchor.constraint(equalToConstant: 36).isActive = true // Barely bigger dimension
            imageStackView.addArrangedSubview(imageView)
        }
    }
}