ios - 间距相等的水平正方形

Question

我试图制作一排 5 个相等的正方形(每个 50x50)，它们之间的间距为 20dp。我不想拉伸(stretch)任何东西，但与此同时我想做到这样，如果我隐藏其中一个方 block ，其他方 block 就会移过去。

例如:

+-----+    +-----+    +-----+    +-----+    +-----+
| 50  | 20 | 50  | 20 | 50  | 20 | 50  | 20 | 50  |
| x50 |    | x50 |    | x50 |    | x50 |    | x50 |
+-----+    +-----+    +-----+    +-----+    +-----+

然后，如果我将中间方 block 设置为 isHidden = true，我希望其他方 block 移过去:

+-----+    +-----+    +-----+    +-----+
| 50  | 20 | 50  | 20 | 50  | 20 | 50  |
| x50 |    | x50 |    | x50 |    | x50 |
+-----+    +-----+    +-----+    +-----+

这可能吗？我的第一个想法是堆栈 View ，但我认为这行不通，因为它们旨在调整间距。

Answer 1

使用UIStackView...

• 没有宽度或尾随约束。
• 分布:填写
• 间距:20
• 给每个 subview 的宽度和高度约束等于常量:50

你最终得到:

   1          2          3          4          5
+-----+    +-----+    +-----+    +-----+    +-----+
| 50  | 20 | 50  | 20 | 50  | 20 | 50  | 20 | 50  |
| x50 |    | x50 |    | x50 |    | x50 |    | x50 |
+-----+    +-----+    +-----+    +-----+    +-----+

删除 View #3:

let v = stackView.arrangedSubviews[2]
v.removeFromSuperview()

你现在有:

   1          2          4          5
+-----+    +-----+    +-----+    +-----+
| 50  | 20 | 50  | 20 | 50  | 20 | 50  |
| x50 |    | x50 |    | x50 |    | x50 |
+-----+    +-----+    +-----+    +-----+

你会得到相同的结果:

let v = stackView.arrangedSubviews[2]
v.isHidden = true

堆栈 View 将隐藏 View #3，移除它占用的空间。如果将 .isHidden 设置回 false， View 将重新出现在其原始位置，将 View 4 和 5 移回其原始位置。