UIStackView - 从中​​心平均分配意见 [英] UIStackView - Distribute views evenly from the centre

问题描述

我有一个 UIStackView ，在的UIScrollView 显示水平排列的动态添加子视图。当前的解决方案将开始显示从左侧的物品，我想开始分发从中心件不改变子视图的宽度和高度。我怎么做？林还开不使用 UIStackView 以及解决方案。这样，我可以支持的设备和LT; iOS9。

（当前）

（期望）

解决方案

简短的回答：

滚动型的限制

 领导与GT; = 0，尾随＆GT; = 0，上＆GT; = 0，下＆GT; = 0
中心X和中心ÿ
 

StackView限制

 龙头= 0，尾随= 0，顶部= 0，下= 0
StackView宽度=滚动型宽（低优先级：250）
StackView高度=滚动型高度
 

龙答案

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

 的UIScrollView
     UIStackView（水平）
         子视图
 

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

• 中心的UIScrollView


• 设置的contentSize的的UIScrollView 等于内在内容
  在 UIStackView
的大小

下面是如何做到这一点：

第1步：中心的UIScrollView的帧

CenterY 和的centerX 用于中心的框架约束的UIScrollView

前导空格> = 0， Trailling空间> = 0，顶层空间> = 0，底部SPAC E> = 0被用于prevent的的UIScrollView的框架超出父视图的帧

我用占位符固有大小为不显示相关的的UIScrollView （因为我们还没有的子视图使contentSize）<的contentSize错误/ p>

现在的框架我们的的UIScrollView 是确定的，进入下一步:)

第2步：添加水平UIStackView

• 上，下，领导，拖尾约束用来固定
  UIStackView帧


• 等高，并用于计算宽度相等
  的的UIScrollView的contentSize

PS。在UIStackView的框架的任何改变，改变的UIScrollView的contentSize

第3步：添加子视图

由于我们使用填充分配在 UIStackView 所有子视图必须有一个内在的内容大小（或高度和宽度的限制（而不是preferred））。
例如，如果我们使用填充同样中，只有一个子视图与内在含量的大小（或高度和宽度的限制（不preferred））足够了，其他的子视图大小将等于这一个。

例如：我将新增3标签（请删除的占位符固有大小的的UIScrollView ）

它的工作原理！不，不，还没有尝试添加第四个和5个标签:)

为什么？

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

父视图大小：200，200
第一个标签固有内容尺寸：120，50
第二个标签固有内容尺寸：150，50

第一个例子（仅在第一个标签 UIStackView ）

• UIStackView 内在含量的大小= 120，50


• 的UIScrollView contentSize = 120，50


• 的UIScrollView 帧= 40，75，120，50

的所有的帧都确定的

第二个例子（用两个标签）

• 的UIScrollView FRAME = 0，0，200，50


• 的UIScrollView contentSize = 200，50


• UIStackView 内在含量的大小= 200，50

因此​​， UIStackView 无法正确显示两个标签（因为 UIStackView 比低的宽度两个标签宽度），而我们没有滚动，因为在 UIStackView 约束宽度等于UIScrollView的宽度的。
它的工作原理，当 UIStackView 内在含量的大小比最大的UIScrollView 架

低

要解决这个问题，我们改变宽度约束的优先级比 UIStackView 固有内容尺寸优先值低的值，一切工作正常:)

希望有所帮助。

code源

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.

(Current)

(Expected)

解决方案

Short answer :

ScrollView constraints

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

StackView constraints

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

Long answer

Firstly, your structure is good, we have :

UIScrollView
     UIStackView (horizontal)
         Subviews 

So, to reach the goal we should :

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

Here is how to do it :

Step 1: Center the frame of the UIScrollView

CenterY and CenterX constraints used to center the frame of the 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

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).

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

Step 2: add the horizontal UIStackView

• Top, Bottom, Leading, Trailing constraints are used to fix UIStackView frame
• Equal Height and equal width used to calculate the contentSize of the UIScrollView

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

Step 3: add subviews

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.

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 :)

Why ?

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

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

First example (only the first label in the UIStackView)

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

All frames are OK

Second example (with the two labels)

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

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.

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 :)

Hope that helps.

Code source

这篇关于UIStackView - 从中​​心平均分配意见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！