自动布局约束和堆栈视图答案

【问题标题】：Auto Layout constraints and stack views自动布局约束和堆栈视图
【发布时间】：2018-06-21 13:37:18
【问题描述】：

我有 12 个按钮和两个 stackView，每个 6 个按钮都在一个堆栈中。并非所有按钮都一直显示。

我在某些情况下使用，例如：

buttonx.isHidden = true

我想要的是每个按钮的顶部约束总是与它上面的东西相距 8 点，知道它上面的东西在任何情况下都可以是其他东西（它可以是上堆栈视图边框或另一个按钮的底部)。

因此，此时显示哪种按钮组合（“.ishidden = false”）并不重要，始终按“8”点排列。

第一个按钮距离堆栈顶部边框 8 处，第二个按钮距离其上方按钮底部 8 处，依此类推...

2-如果屏幕足够宽，如何使两个堆栈视图彼此靠近，然后如果屏幕不够，则两个堆栈彼此位于下方。

我还在学习如何使用自动布局和约束，非常感谢帮助！！

编辑：（为清晰起见照片）

[

例如在一种情况下：仅显示按钮 y、d、k。我希望它们以相等的距离出现在彼此下方的堆栈视图中。

【问题讨论】：

这是一个加载的问题。故事板将是一种困难的方式来做到这一点。我会研究 Snapkit.io 并学习以编程方式创建您的自动布局。
你能展示你的IB吗？会更容易理解。
忽略问题的第二部分，让我们专注于主要问题
当屏幕足够宽（常规宽度）和不够宽（紧凑宽度）时，使用尺寸类概念来控制两个堆栈视图之间的间隙
Pure AutoLayout 对您没有帮助，但您可以通过编程方式完成。您可以创建一个IBOutletCollection，它基本上是一个数组并在那里添加您的约束，但需要以编程方式计算距离（因为约束附加到两个对象......您始终可以选择superview）。跨度>

【解决方案1】：

首先关于每个按钮之间的 8 pts，您需要设置 stackView 的 spacing 属性（在属性检查器中找到它）

其次根据你可以决定的2个stackView的宽度之和

1- 使 stack1&2 的顶部相等

2-让stack2的顶部等于stack1的底部

这可以通过编程来避免静态宽度

【讨论】：