ios - UIStackView - 从中​​心均匀分布 View

Question

我有一个 UIStackView，在一个 UIScrollView 内，用于显示水平排列的动态添加的 subview 。当前的解决方案将从左侧开始显示项目，我想在不改变 subview 的宽度和高度的情况下从中心开始分配项目。我怎么做？我也对不使用 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 居中<​​/li>
• 将 UIScrollView 的 contentSize 设置为等于内部内容 UIStackView
的大小

方法如下:

第 1 步:使 UIScrollView 的框架居中

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

Leading Space >= 0，Trailing Space >= 0，Top Space >= 0，Bottom Space >= 0 用于防止UIScrollView的frame超出父view的frame

我使用占位符固有大小来不显示与 UIScrollView 的 contentSize 相关的错误(因为我们还没有 subview ，所以没有 contentSize)。

现在，我们的 UIScrollView 的框架就OK了，进入下一步:)

第二步:添加横向UIStackView

• Top、Bottom、Leading、Trailing 约束用于修复 UIStackView 框架
• 等高和等宽用于计算 UIScrollView 的内容大小

附言。 UIStackView frame 的任何变化，都会改变 UIScrollView 的 contentSize

第三步:添加 subview

因为我们在 UIStackView 中使用了 Fill Distribution 所有 subviews 必须有一个固有的内容大小(或高度和宽度限制(不推荐) ). 例如，如果我们使用 Fill Equally，只有一个具有固有内容大小(或高度和宽度约束(非首选))的 subview 足够，其他 subview 大小将相等到这个。

例如:我将添加 3 个标签(请删除 UIScrollView 的占位符固有大小)

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

为什么？

为了理解我们将通过两个例子来计算 View 的每个元素的框架:

父 View 大小:200、200 第一个标签固有内容大小:120、50 第二个标签固有内容大小:150、50

第一个例子(只有UIStackView中的第一个标签)

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

所有帧都OK

第二个例子(有两个标签)

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

因此，UIStackView 无法正确显示两个标签(因为 UIStackView 的宽度小于两个标签的宽度)，我们没有滚动，因为 UIStackView 约束宽度等于 UIScrollView 宽度。 它在 UIStackView 内在内容大小小于最大 UIScrollView 框架时起作用。

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

希望对您有所帮助。

Code source