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

Question

我有一个UIStackView ，在UIScrollView中显示水平排列的动态添加的子视图。 当前的解决方案将开始显示左侧的项目，我想开始从中心分配项目而不更改子视图的宽度和高度。 我怎么做？ 我也对不使用UIStackView解决方案UIStackView开放UIStackView 。 这样我就可以支持设备<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 > = 0， Trailling Space > = 0， Top Space > = 0， Bottom Spac e> = 0用于防止UIScrollView的帧超出父视图的帧

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

现在，我们的UIScrollView的框架是好的，转到下一步:)

第2步：添加水平UIStackView

• 顶部，底部，前导，尾随约束用于修复UIStackView框架
• Equal Height和等宽用于计算UIScrollView的contentSize

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

第3步：添加子视图

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

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

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

为什么？

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

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

第一个例子（只有UIStackView的第一个标签）

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

所有帧都没问题

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

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

所以， UIStackView无法正确显示两个标签（因为UIStackView的宽度低于两个标签的宽度），而且我们没有滚动因为， UIStackView约束宽度等于UIScrollView宽度。 当UIStackView内在内容大小低于最大UIScrollView框架时，它可以工作。

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

希望有所帮助。

代码来源