以编程方式将子视图添加到UIStackView [英] Programmatically add subviews to a UIStackView
问题描述
我正在尝试实现一个表格视图单元格，它显示一系列代表家居设施的图标（例如毛巾，无线网络，洗衣房等）。单元格可能会显示大量设施（取决于房屋的数量），因此我将显示最多三个，并指示如果有三个以上，您可以通过单击单元格查看更多。以下是它应该是什么样的（来自Airbnb的应用程序）：
I'm trying to implement a table view cell that displays a series of icons that represent home amenities (e.g. towels, wifi, laundry, etc.). The cell could potentially display a large number of amenities (depending on how many the home has), so I'll display a maximum of three and indicate that you can view more by clicking on the cell if there are more than three. Here is what it should look like (from Airbnb's app):
我试图通过动态地将UIImageViews添加到表视图单元格中的UIStackView来实现此目的。我正在使用一个UIStackView，对齐设置为Fill，分布设置为Equal spacing，这个想法是堆栈视图将均匀地分隔图标，无论我添加了多少。
I am trying to do this by dynamically adding UIImageViews to a UIStackView in the table view cell. I am using a UIStackView with alignment set to "Fill" and distribution set to "Equal spacing", the idea being that the stack view will evenly space out the icons no matter how many I add to it.
我在Storyboard中设置了堆栈视图。它对内容视图的顶部，底部，左侧和右侧边距有约束，因此它会填充表格视图单元格，直至边距。
I set up the stack view in Storyboard. It has constraints to the top, bottom, left, and right margins of its content view, so that it fills the table view cell, up to the margins.
这是我用来尝试动态地将UIImageViews添加到单元格的代码。注意设施是一个字符串数组，等于我的图像资源文件夹中图标的名称：
Here is the code I am using to try to dynamically add UIImageViews to the cell. Note amenities is an array of strings equal to the names of the icons in my image assets folder:
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++
}
图像视图的背景为蓝色，背景颜色为堆栈视图为绿色。这是结果，对于一个房子有三个设施的情况：
The backgrounds of the image views are blue, and the background color of the stack view is green. Here is the result, for a case where the house has three amenities:
看起来所有图像视图都被推到屏幕左侧。它们还从上到下填充单元格的内容视图，即使堆栈视图固定到内容视图边距。看不到绿色，因此堆栈视图似乎没有固定到单元格的边缘。
Looks like all the image views are being pushed on top of one another to the left of the screen. They also fill the cell's content view from top to bottom, even though the stack view is pinned to the content view margins. There's no green in sight so it appears the stack view is not remaining pinned to the margins of the cell.
知道这里有什么问题吗？
Any idea what's wrong here?
推荐答案
正如丹所说注释，使用 addArrangedSubview 添加将由UIStackView自动布局的子视图。
As Dan said in the comments, use addArrangedSubview to add a subview that will be automatically laid out by UIStackView.
但请注意：如果从UIStackView上的 arrangeSubviews 数组中删除视图，它仍然是 子视图。来自UIStackView文档：
Note, however: if you remove a view from the arrangedSubviews array on UIStackView, it is still a subview. From the UIStackView documentation:
堆栈视图确保其arrangeSubviews属性始终是其子视图属性的子集。具体来说，堆栈视图强制执行以下规则：
The stack view ensures that its arrangedSubviews property is always a subset of its subviews property. Specifically, the stack view enforces the following rules:
•当堆栈视图向其arrangeSubviews数组添加视图时，它还将该视图添加为子视图（如果它不是已经。
• When the stack view adds a view to its arrangedSubviews array, it also add that view as a subview, if it isn’t already.
•当从堆栈视图中删除子视图时，堆栈视图也会从arrangeSubviews数组中删除它。
• When a subview is removed from the stack view, the stack view also removes it from the arrangedSubviews array.
•从arrangeSubviews数组中删除视图不会将其作为子视图删除。堆栈视图不再管理视图的大小和位置，但视图仍然是视图层次结构的一部分，如果可见，则在屏幕上呈现。
• 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.
从文档开始总是一个好主意。
It's always a good idea to start with the documentation.
这篇关于以编程方式将子视图添加到UIStackView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
