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):
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.
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.
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?