以编程方式在垂直堆栈视图中添加多个水平堆栈视图

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),
            ])
    }

这是我得到的：

它应该出现在 "Productivity Chart" 标题下，但它出现在单元格内容视图 x:0 y: 0 位置。而且只有一条线，一切看起来都很拥挤。

知道我做错了什么吗？

一行应该是这样的：

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

编辑：

将addSubView替换为addArrangedSubview后：

编辑 2：

右边被截掉的部分也修复了。我改变了：

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

到

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

Answer 1

当您向 UIStackView 添加新的子视图时，您应该使用 addArrangedSubview 方法。

The stack view ensures that the arrangedSubviews array is always a subset of its subviews array. This method automatically adds the provided view as a subview of the stack view, if it is not already. If the view is already a subview, this operation does not alter the subview ordering.

以编程方式在垂直堆栈视图中添加多个水平堆栈视图

Programatically add multiple horizontally stack views inside vertical stack view

ios

swift

uistackview