UIStackView - 从中心均匀分布视图答案

【问题标题】：UIStackView - Distribute views evenly from the centreUIStackView - 从中心均匀分布视图
【发布时间】：2016-05-27 17:04:08
【问题描述】：

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

（当前）

（预期）

【问题讨论】：

您使用的是 Swift 还是 Objective C？
我正在开发 Swift 2.0
你打算在 stackView 中将 subView 的数量限制为 3 吗？
UIStackView 中的子视图会是动态的，可以是 n 个数字。这就是我在这里需要 UIScrollView 的原因。
我有 4 个按钮，全部为 50 x 50。我将堆栈视图设置为 Equal Spacing 并限制按钮的高度和宽度。第一个和最后一个按钮位于堆栈视图的边缘。为了给堆栈视图的开始和结束添加相等的间距，我只是添加了两个 1x50 标签作为堆栈视图中的第一个和最后一个元素。哈克，但有效 ;)

标签： ios uiscrollview autolayout ios9 uistackview

【解决方案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 的大小

这是怎么做的：

第一步：将 UIScrollView 的框架居中

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

Leading Space >= 0, Trailling Space >= 0, Top Space >= 0, Bottom Space >= 0 用于防止UIScrollView的frame超过父view的frame

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

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

第2步：添加横向UIStackView

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

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

第 3 步：添加子视图

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

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

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

为什么？

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

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

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

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

所有帧都OK

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

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

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

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

希望对您有所帮助。

Code source

【讨论】：