间距相等的水平正方形

Question

我正在尝试制作一行5个相等的正方形(每个50x50)，间距为20dp。我不想让任何东西拉伸，但同时我想让它这样，如果我隐藏其中一个方块，其他方块就会移动。

例如:

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

然后，如果我将中间的方块设置为isHidden = true，我希望其他方块移动:

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

这可能吗?我的第一个想法是堆栈视图，但我不认为这将工作，因为他们的意思是调整间距。

Answer 1

使用UIStackView…

没有<<ul>

strong>宽度或的约束。

地理分布:填写

间距:20

给出Equal to Constant: 50的每个子视图的宽度和高度约束

你最终得到:

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

Remove view #3 with:

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# 3，移除它占用的空间。如果您将.isHidden设置回false，视图将重新出现在其原始位置，将视图4和5移回其原始位置。

Answer 2

你应该使用StackView。但要隐藏某个正方形，你需要将其设为0，而不是将其隐藏。在这种情况下，布局将保持不变-你可以隐藏一些方块，而其他方块将保持其位置。如果你需要其他的正方形来填充元素之间的空白空间，使用isHidden属性。

• 例如有5个圆圈:0-0-0-0-0.

• 设3圈isHidden: 0-0-0-0

• 现在设置3圆的alpha值为0:0-0- 0-0.

Answer 3

有很多方法可以做到这一点，如果可以使用，另一个答案中提到的StackView是一个很好的选择。如果没有，也可以:

1. 为每个项目设置一个50px的宽度限制(你可能已经这样做了)。当你想隐藏一个项目时，也将其宽度约束设置为0.0。在显示项目时，将其设置回50.0。

   yourWidthConstraint.constant = visible ? 50.0 : 0.0
   

2. 总是隐藏最后一个项目，并简单地移动其他项目的内容。例如，如果每个项目都是UIImageView:

   for i in hiddenIndex...lastVisibleIndex-1 {
   element[i].image = element[i + 1].image
   }
   element[lastVisibleIndex].isHidden = true