Vertical UIStackView: how to keep same space between elements and center them? - ios

Question

I have a table view with each cell containing a vertical UIStackView,
and I would like to center all elements inside this stack view, with a spacing of 8px between each of them. Here is visually what I would like to achieve:
But here is what I am getting so far:
And the code I tried:
In UITableView's delegate
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "TVCell", for: indexPath) as! TVCell
(0...indexPath.row).forEach { i in
let label = UILabel()
label.text = "Label #\(i)"
cell.stackView.addArrangedSubview(label)
}
return cell
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
5
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
180
}
TVCell
class TVCell: UITableViewCell {
#IBOutlet weak var stackView: UIStackView!
}
What should I do to get the expected result?
Thank you for your help

Answer 1

Since you are using a fixed height for your rows, you want to vertically center the stack view in the cell:
Stack view properties:
and, give the stack view an Intrinsic Height Placeholder to avoid complaints from Interface Builder:
Note that you'll want to change your cellForRowAt code... Cells are reused, and as it stands now you'll be adding more and more labels to each cell as you scroll up and down.
One method (this would be bad practice, but it works for understanding your layout issue):
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "TVCell", for: indexPath) as! TVCell
// remove existing labels
cell.stackView.arrangedSubviews.forEach {
$0.removeFromSuperview()
}
(0...indexPath.row).forEach { i in
let label = UILabel()
label.text = "Label #\(i)"
cell.stackView.addArrangedSubview(label)
}
return cell
}
and here's how it looks: