ios – Structure drawback with UITableViewCell Contraints

I’m making an attempt to construct a UITableViewCell and code the constraints. I’m having issues getting the StackViews I’ve layed out correctly. Under is my code.

What I would like 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 + pictures)
    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(model: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        tremendous.init(model: model, 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 // Diminished spacing between pictures
        imageStackView.alignment = .heart

        // Mix numberLabel and imageStackView into leftGroupStackView
        leftGroupStackView.axis = .horizontal
        leftGroupStackView.alignment = .heart
        leftGroupStackView.spacing = 8 // Diminished 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 knowledge
    func configure(quantity: Int, pictures: [UIImage], topText: String, bottomText: String) {
        numberLabel.textual content = "(quantity)"
        topLabel.textual content = topText
        bottomLabel.textual content = bottomText

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

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