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

问题描述

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

I have a UIStackView,inside a UIScrollView to show dynamically added subviews horizontally arranged. Current solution will start displaying items from the left, I would like to start distributing items from the centre without changing the width and height of the subviews. How do I do that? Im also open to solutions which doesn't use UIStackView as well. That way I could support devices < iOS9.

(当前)

(预期)

推荐答案

简答:

ScrollView 约束

ScrollView constraints

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

StackView 约束

StackView constraints

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

长答案

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

Firstly, your structure is good, we have :

UIScrollView
     UIStackView (horizontal)
         Subviews 

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

So, to reach the goal we should :

• 居中 UIScrollView
• 设置 UIScrollView 的 contentSize 等于固有内容UIStackView
的大小

• Center the UIScrollView
• Set the contentSize of the UIScrollView equal to the intrinsic content size of the UIStackView

这是怎么做的:

第一步:将 UIScrollView 的框架居中

CenterY 和 CenterX 约束用于使 UIScrollView

Leading Space >= 0, Trailing Space >= 0, Top Space >= 0, Bottom Space >= 0 用于防止 UIScrollView 的框架超出父视图的框架

Leading Space >= 0, Trailling Space >= 0, Top Space >= 0, Bottom Space >= 0 are used to prevent the frame of the UIScrollView to exceed the frame of the parent view

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

I used placeholder intrinsic size to don't show errors related to the contentSize of the UIScrollView (because we don't have yet the subviews so the contentSize).

现在，我们的UIScrollView的frame就ok了，进入下一步:)

Now, the frame of our UIScrollView is Ok, go to the next step :)

第2步:添加横向UIStackView

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

PS.UIStackView的frame有任何变化，改变UIScrollView的contentSize

PS. Any change in the frame of the UIStackView, change the contentSize of the UIScrollView

第 3 步:添加子视图

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

Because we use Fill Distribution in the UIStackView all subviews must have a intrinsic content size (or height and width constraints (not preferred)). For example, if we use Fill Equally, only one subview with intrinsic content size (or height and width constraints (not preferred)) sufficient, the other subviews size will be equal to this one.

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

For Example: I will add 3 labels (please remove the placeholder intrinsic size of the UIScrollView)

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

It works !! no, no, not yet try to add fourth and five labels :)

为什么?

为了理解，我们将通过两个示例计算视图的每个元素的框架:

To understand we will calculate the frame of each element of the view with two examples :

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

The parent view size : 200, 200 The first label intrinsic content size : 120, 50 the second label intrinsic content size : 150, 50

第一个示例(仅UIStackView中的第一个标签)

First example (only the first label in the UIStackView)

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

• UIStackView intrinsic content size = 120, 50
• UIScrollView contentSize = 120, 50
• UIScrollView frame = 40, 75, 120, 50

所有帧都OK

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

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

• UIScrollView frame = 0, 0, 200, 50
• UIScrollView contentSize = 200, 50
• UIStackView intrinsic content size = 200, 50

所以，UIStackView 不能正确显示两个标签(因为 UIStackView 的宽度小于两个标签的宽度)，我们没有滚动，因为 UIStackView 约束宽度等于 UIScrollView 宽度.它在 UIStackView 内在内容大小小于最大 UIScrollView 帧时起作用.

So, the UIStackView can't show correctly the two labels (because the width of UIStackView lower than the two labels width), and we don't have the scroll because, the UIStackView constraint width is equal to UIScrollView width's. It works when the UIStackView intrinsic content size is lower than the max UIScrollView frame.

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

To Fix that, we change the priority of the width constraint to a value lower than the UIStackView intrinsic content size priority value, and all works fine :)

希望对您有所帮助.

代码源

这篇关于UIStackView - 从中​​心均匀分布视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！