以編程方式在垂直堆棧視圖內添加多個水平堆棧視圖

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的位置上。 而且只有一條線，那里的一切看起來都很擁擠。

知道我在做什么錯嗎？

這是一行的外觀：

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

編輯：

用addSubView替換addSubView addArrangedSubview ：

編輯2：

截斷的右側部分也固定。 我變了：

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

至

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

Answer 1

將新的子視圖添加到UIStackView時，應使用addArrangedSubview方法。

堆棧視圖可確保rangingSubviews數組始終是其子視圖數組的子集。 此方法自動將提供的視圖添加為堆棧視圖的子視圖（如果尚未添加）。 如果視圖已經是子視圖，則此操作不會更改子視圖的順序。