以编程方式将子视图添加到 UIStackView

Question

我正在尝试实现一个 table 视图单元格，该视图单元格显示一系列代表家庭便利设施（例如毛巾、wifi、洗衣等）的图标。该单元格可能会显示大量便利设施（取决于房屋的数量），因此我将最多显示三个，并表示如果超过三个，您可以通过单击单元格查看更多。它应该是这样的（来自 Airbnb 的应用程序）：

我试图通过将 UIImageViews 动态添加到 table 视图单元格中的 UIStackView 来做到这一点。我正在使用对齐设置为 "Fill" 且分布设置为 "Equal spacing" 的 UIStackView，其想法是无论我添加多少个图标，堆栈视图都会均匀地 space 显示图标。

我在 Storyboard 中设置了堆栈视图。它对其内容视图的顶部、底部、左侧和右侧边距有限制，因此它会填充 table 视图单元格，直到边距。

这是我用来尝试将 UIImageView 动态添加到单元格的代码。注意 amenities 是一个字符串数组，等于我的图像资源文件夹中图标的名称：

        cell.stackView.backgroundColor = UIColor.greenColor()
        var i = 0
        while (i < amenities.count && i < 4) {
            if (i < 3) {
                let imageView = UIImageView(image: UIImage(named: amenities[i]))
                imageView.contentMode = .ScaleAspectFit
                imageView.translatesAutoresizingMaskIntoConstraints = false
                imageView.backgroundColor = UIColor.blueColor()

                // Add size constraints to the image view
                let widthCst = NSLayoutConstraint(item: imageView, attribute: NSLayoutAttribute.Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: 50)
                imageView.addConstraint(widthCst)

                // Add image view to stack view
                cell.stackView.addSubview(imageView)
            } else {
                // Add a label to the stack view if there are more than three amenities
                let label = UILabel()
                label.text = "\(amens.count - i) more"
                label.textAlignment = NSTextAlignment.Left
                cell.stackView.addSubview(label)
            }
            i++
        }

图像视图的背景为蓝色，堆栈视图的背景色为绿色。以下是结果，对于房子具有三个便利设施的情况：

看起来所有图像视图都被推到屏幕左侧。它们还从上到下填充单元格的内容视图，即使堆栈视图被固定到内容视图边距。看不到绿色，因此堆栈视图似乎没有固定在单元格的边缘。

知道这里出了什么问题吗？

Answer 1

正如丹在评论中所说，使用addArrangedSubview添加一个子视图，该子视图将由 UIStackView 自动布局。

但是请注意：如果您从 UIStackView 上的 arrangedSubviews 数组中删除一个视图，它仍然是一个子视图。来自 UIStackView 文档：

The stack view ensures that its arrangedSubviews property is always a subset of its subviews property. Specifically, the stack view enforces the following rules:

• When the stack view adds a view to its arrangedSubviews array, it also add that view as a subview, if it isn’t already.

• When a subview is removed from the stack view, the stack view also removes it from the arrangedSubviews array.

• Removing a view from the arrangedSubviews array does not remove it as a subview. The stack view no longer manages the view’s size and position, but the view is still part of the view hierarchy, and is rendered on screen if it is visible.

从文档开始总是一个好主意。

以编程方式将子视图添加到 UIStackView

Programmatically add subviews to a UIStackView

ios

swift

uistackview