ios – UIStackView – 从中​​心均匀分布视图

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

(当前)

(预期)

解决方法

简答:

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的大小

这是怎么做到的:

步骤1:中心UIScrollView的框架

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

前导空间> = 0,引导空间> = 0,顶部空间> = 0,Bottom Space> = 0用于防止UIScrollView的框架超出父视图的框架

我使用占位符内部大小不显示与UIScrollView的contentSize相关的错误(因为我们还没有子视图,因此contentSize).

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

步骤2:添加水平的UIStackView

>顶部,底部,领先,尾随约束用于修复
UIStackView框架
>相等的高度和相等的宽度用于计算
UIScrollView的contentSize

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

步骤3:添加子视图

因为我们在UIStackView中使用Fill distribution,所有的子视图必须具有内在的内容大小(或高度和宽度约束(不是首选)).
例如,如果我们使用Fill Equally,只有一个具有内在内容大小(或高度和宽度约束(不是首选))的子视图就足够了,其他子视图大小将等于此.

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

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

为什么

要理解我们将用两个示例计算视图的每个元素的框架:

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

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

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

所有框架都可以

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

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

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

要修复,我们将宽度约束的优先级更改为低于UIStackView内在大小优先级值的值,并且所有工作正常:)

希望有帮助.

Code source

相关文章

当我们远离最新的 iOS 16 更新版本时,我们听到了困扰 Apple...
欧版/美版 特别说一下,美版选错了 可能会永久丧失4G,不过只...
一般在接外包的时候, 通常第三方需要安装你的app进行测...
前言为了让更多的人永远记住12月13日,各大厂都在这一天将应...