UIStackView - 从中​​心均匀分布视图

Question

我在UIStackView内有一个UIScrollView来显示水平排列的动态添加的子视图。当前的解决方案将开始显示左侧的项目，我想开始从中心分配项目而不更改子视图的宽度和高度。我怎么做？我也对那些也没有使用UIStackView的解决方案持开放态度。这样我可以支持设备＆lt; iOS9。

（当前）

（的预期）

Answer 1

简答：

ScrollView约束

Leading >= 0, Trailing >= 0, Top >= 0, Bottom >= 0
Center X  and Center Y 

StackView约束

Leading = 0, Trailing = 0, Top = 0, Bottom = 0
StackView width = ScrollView width (priority low :250)
StackView height = ScrollView height

答案很长

首先，你的结构很好，我们有：

UIScrollView
     UIStackView (horizontal)
         Subviews 

所以，要达到目标，我们应该：

• 居中UIScrollView
• 将UIScrollView的contentSize设置为等于内在内容 UIStackView
的大小

以下是如何操作：

第1步：将UIScrollView的框架居中

CenterY和CenterX约束用于居中UIScrollView的框架

Leading Space＆gt; = 0，Trailling Space＆gt; = 0，Top Space＆gt; = 0，Bottom Spac e＆gt; = 0用于防止UIScrollView超出父视图的框架

我使用占位符内在大小来显示与UIScrollView的contentSize相关的错误（因为我们还没有子视图所以contentSize）。

现在，UIScrollView的框架正常，请转到下一步:)

第2步：添加水平UIStackView

• Top，Bottom，Leading，Trailing约束用于修复 UIStackView框架
• 等高和等宽用于计算 UIScrollView的contentSize

PS。 UIStackView框架中的任何更改，都会更改UIScrollView的contentSize

第3步：添加子视图

因为我们在Fill Distribution中使用UIStackView所有subviews必须具有内在内容大小（或高度和宽度限制（不是首选））。 例如，如果我们使用Fill Equally，只有一个subview具有内在内容大小（或高度和宽度约束（不是首选））就足够了，其他子视图大小将等于此一个。

例如：我将添加3个标签（请删除UIScrollView的占位符内在大小）

有效!!不，不，还没有尝试添加第四和第五个标签:)

为什么？

要理解我们将用两个例子计算视图中每个元素的框架：

父视图大小：200,200 第一个标签内在内容大小：120,50 第二标签内在内容大小：150,50

第一个示例（仅UIStackView中的第一个标签）

• UIStackView内在内容大小= 120,50
• UIScrollView contentSize = 120,50
• UIScrollView frame = 40,75,120,50

所有帧都没问题

第二个例子（带有两个标签）

• UIScrollView frame = 0,0,200,50
• UIScrollView contentSize = 200,50
• UIStackView内在内容大小= 200,50

因此，UIStackView无法正确显示两个标签（因为UIStackView的宽度低于两个标签的宽度），而且我们没有滚动，因为{{约束宽度等于UIScrollView宽度。 当UIStackView内在内容大小低于最大UIStackView帧时，它会起作用。

要解决此问题，我们将宽度约束的优先级更改为低于UIScrollView内在内容大小优先级值的值，并且一切正常:)

希望有所帮助。

Code source