UIStackView是个非常好用的视图管理容器,其使用AutoLayout来管理视图,添加、移除、隐藏 都会自动响应。了解其原理,可以很轻松的创建基于autoLayout的视图。
布局原理
任何布局方法,最本质的都是要确定两个东西,一个是位置,一个是大小。
UIStackView 根据不同的布局模式,以及 组件内部自然大小intrinsicContentSize 共同决定 位置和大小,如果组件没有intrinsicContentSize,在非UIStackViewDistributionFillEqually模式下就无法确定stackview内的组件大小,可以可以设置大小约束来满足约束。
UIStackView
- 使用轴axis来表示布局方向,从左到右,还是从上到下
- 使用distribution来决定轴方向上的布局规则
- 使用alignment来决定垂直于轴向的布局规则
- 使用space来决定view之间的最小距离
对于 UIStackViewDistributionFillProportionally 模式,等于这个space。而UIStackViewDistributionEqualSpacing 和 UIStackViewDistributionEqualCentering 表示的是最小距离。默认值是0,为负数则表示可以叠加。
在主轴分布模式上,除了 相等填充外,其他的都会考虑 intrinsicContentSize。而空间太大或者太小,要考虑 拉伸或压缩优先级。另外也可以手动添加约束,尤其是大小约束,比如UIView是不知道自己大小的,如果不添加约束 如果 uistackview也没有设置约束,stackview就无法计算自己的大小。
轴向布局 UIStackViewDistribution
UIStackViewDistributionFill 充满容器
[图片上传中...(image.png-b44e6c-1685339938517-0)]
- 如果容器大小固定,则 子视图 充满stackview,如果 intrinsicContentSize 不能满足,会使用 拉伸优先级 进行处理
- 如果容器大小不固定,则 子视图 根据 intrinsicContentSize 充满stackview,stackview的大小就是管理的容器大小之和 (加上space)
UIStackViewDistributionFillEqually 相等填充
-
各个子view大小相同,忽略 intrinsicContentSize
UIStackViewDistributionFillProportionally 按比例填充
-
根据 intrinsicContentSize 按比例填充
UIStackViewDistributionEqualSpacing 等间距
space为最小间距,当 intrinsicContentSize 无法充满stackView时,会增加间距。
UIStackViewDistributionEqualCentering view之间的距离相等
垂直于轴向布局 UIStackViewAlignment
UIStackViewAlignmentFill
充满空间,默认以占空间最大的高度为准
UIStackViewAlignmentCenter
剧中分布
UIStackViewAlignmentLeading
UIStackViewAlignmentTrailing
UIStackViewAlignmentTop
UIStackViewAlignmentBottom
UIStackViewAlignmentFirstBaseline
UIStackViewAlignmentLastBaseline
uistackview常用模式
-
仅设置位置,大小由内容撑开
前提是 知道内容大小 像 UILabel,UIImageView 都是知道自己大小的,如果加入不知道大小的view,可以自行设置 大小约束
-
设置位置 + 一个方向的大小,另一个方向自动撑开
需要注意的是,通常需要设置 内容拉伸或者压缩优先级
-
固定大小和位置
图片通常使用 保持宽高比适应模式
因为默认拉伸第一个label的垂直空间,需要需要设置图片的拉伸优先级低于label
这里由于沿垂直轴剧中分布,默认图片比较小,还需要设置图片跟父容器一样的大小
所以,要想用好UIStackView 以下2点格外重要
- 要了解 轴向布局 和 垂直轴向布局
- 要确认UIStackView是自动大小还是固定大小, 以及如何确认 子视图的大小 必要时 修改 内容拉伸和压缩优先级