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

Question

我有一个UIStackView,里面UIScrollView显示水平排列的动态添加的子视图.当前的解决方案将开始显示左侧的项目,我想开始从中心分配项目而不更改子视图的宽度和高度.我怎么做？我也对不使用的解决方案持开放态度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
• 设置的contentSize UIScrollView等于的内在内容大小UIStackView

这是怎么做的:

第1步:居中UIScrollView的框架

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

Leading Space> = 0,Trailling Space> = 0,Top Space> = 0,Bottom Space> = 0用于防止UIScrollView的帧超出父视图的帧

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

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

第2步:添加水平UIStackView

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

PS.UIStackView框架中的任何更改,都会更改UIScrollView的contentSize

第3步:添加子视图

因为我们Fill Distribution在UIStackView所有使用中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

所有帧都没问题

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

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

所以,UIStackView无法正确显示两个标签(因为宽度UIStackView低于两个标签宽度),而我们没有滚动因为,UIStackView约束宽度等于UIScrollView宽度.当UIStackView内在内容大小低于最大UIScrollView帧时,它可以工作.

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

希望有所帮助.

代码来源