Программно добавлять несколько горизонтальных стеков внутри вертикального стека

Question

Это макет, которого я хочу достичь

Label1 UIView Label2 <- horizontally stack view
Label1 UIView Label2
Label1 UIView Label2
Label1 UIView Label2
Label1 UIView Label2

Каждый горизонтальный вид стека содержит метку, вид и другую метку.После этого горизонтальный вид стека добавляется к вертикальному.

Так что весь этот макет представляет собой вертикальный вид стека.

Я хочу добиться этого внутри UITableViewCell.Вот мой код:

let verticalStackView: UIStackView = {
        let hsv = UIStackView()
        hsv.axis = .vertical
        hsv.alignment = .fill
        hsv.distribution = .fill
        hsv.spacing = 10
        hsv.translatesAutoresizingMaskIntoConstraints = false

        return hsv
    }()

    override func awakeFromNib() {
        super.awakeFromNib()

        for i in 1..<10 {
            let dayLbl: UILabel = {
                let l = UILabel()
                l.text = "Day " + String(i)
                l.font = UIFont.preferredFont(forTextStyle: .caption1)
                l.translatesAutoresizingMaskIntoConstraints = false

                return l;
            }()

            let progressBar: ProgressBar = {
               let pb = ProgressBar(frame: CGRect(x: 0, y: 0, width: 200, height: 12))
                pb.translatesAutoresizingMaskIntoConstraints = false

                return pb;
            }()

            let gradeLbl: UILabel = {
                let l = UILabel()
                l.text = String(i)
                l.font = UIFont.preferredFont(forTextStyle: .headline)
                l.translatesAutoresizingMaskIntoConstraints = false

                return l;
            }()

            let horizontalStackView: UIStackView = {
               let hsv = UIStackView()
                hsv.axis = .horizontal
                hsv.alignment = .fill
                hsv.distribution = .fill
                hsv.spacing = 5
                hsv.translatesAutoresizingMaskIntoConstraints = false

                return hsv
            }()

            horizontalStackView.addSubview(dayLbl)
            horizontalStackView.addSubview(progressBar)
            horizontalStackView.addSubview(gradeLbl)

            NSLayoutConstraint.activate([
                horizontalStackView.heightAnchor.constraint(equalToConstant: 12)
            ])

            verticalStackView.addSubview(horizontalStackView)
        }

        contentView.addSubview(verticalStackView)

        NSLayoutConstraint.activate([
            verticalStackView.topAnchor.constraint(equalTo: vcTitle.bottomAnchor, constant: 30),
            verticalStackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20),
            verticalStackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: 20),
            verticalStackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: 30),
            ])
    }

Вот что я получаю:

Он должен был появиться в разделе «ПроизводительностьДиаграмма "заголовок, но она отображается в представлении содержимого ячейки x: 0 y: 0 location.И там только одна линия, и там все выглядит тесно.

Есть идеи, что я делаю неправильно?

Так должна выглядеть одна строка:

Day 1 ----------------- 7   
(where ----- is the view).

edit:

После замены addSubViewс addArrangedSubview:

edit 2:

Правая часть также обрезана и исправлена.Я изменил:

verticalStackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: 20)

на

contentView.trailingAnchor.constraint(equalTo: verticalStackView.trailingAnchor, constant: 20)

Answer 1

Когда вы добавляете новые подпредставления в UIStackView, вы должны использовать метод addArrangedSubview .

Представление в стеке гарантирует, что массивограмма layoutSubviews всегда является подмножеством его массива подпредставлений,Этот метод автоматически добавляет предоставленное представление как подпредставление стекового представления, если это еще не сделано.Если представление уже является подпредставлением, эта операция не изменяет порядок подпредставления.