Question

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

我试图通过动态地将UIImageViews添加到表视图单元格中的UIStackView来实现此目的。我正在使用一个UIStackView，对齐设置为“Fill”，分布设置为“Equal spacing”，这个想法是无论我添加多少数量，堆栈视图都会均匀地分隔图标。

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

这是我用来尝试动态地将UIImageViews添加到单元格的代码。注意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

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

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

堆栈视图确保其arrangeSubviews属性始终是其子视图属性的子集。具体而言，堆栈视图强制执行以下规则：

•当堆栈视图向其arrangeSubviews数组添加视图时，它还会将该视图添加为子视图（如果尚未添加）。

•从堆栈视图中删除子视图时，堆栈视图也会将其从arrangeSubviews数组中删除。

•从arrangeSubviews数组中删除视图不会将其作为子视图删除。堆栈视图不再管理视图的大小和位置，但视图仍然是视图层次结构的一部分，如果可见，则在屏幕上呈现。

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

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

1 个答案: