StackView

Posted 2023-04-17

参考技术A

我的博客, 各位看官有时间赏光

随着autolayout的推广开来，更多的app开始使用自动布局的方式来构建自己的UI系统，autolayout配合storyBoard和一些第三方的框架，对于创建约束来说，已经十分方便，但是对于一些动态的线性布局的视图，我们需要手动添加的约束不仅非常多，而且如果我们需要插入或者移除其中的一些UI元素的时候，我们又要做大量的修改约束的工作，UIStackView正好可以解决这样的问题。

UIStackView 是 iOS 9 中新增的一个控件， 它继承于UIView，用来管理一行或一列视图的布局(堆叠视图的控制器类视图，所谓堆叠视图时一种平铺式的线性布局方式，不可重叠，布局方向也不可交错) 。UIStackView新增了几个属性，这些属性就是子视图布局规则。一旦UIStackView的这些属性发生变化，它的arrangedSubviews就会按照规则重新排布。只要我们掌握这些规则，就可以管理视图布局了。如果能再稍加灵活运用，有时候我们甚至能轻松实现一些精妙布局。 UIStackView可以帮助开发者更加简单的使用layout而不必手动添加太多布局约束.

![Uploading 19_081418.png . . .]
]( http://upload-images.jianshu.io/upload_images/1129706-a300c78a3ddc0cdb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 )

axis 、 spacing 、 distribution 和 alignment 是比较重要的4个属性，他们都能给布局带来明显的变化。 axis 和 spacing 属性作用单一，通过属性解释或者通过视图简单观察我们就能理解他们的作用。 distribution 和 alignment 这两个属性相对而言更具灵活性，也更具有难度，尤其是二者的结合使用。

特别注意 ： addArrangedSubview 和 addSubview 有很大的区别，使用前者是将视图添加进 StackView 的布局管理，后者只是简单的加在视图的层级上，并不接受 StackView 的布局管理。

使用StackView 嵌套 模仿同程首页布局

UIStackView 是在 ios9 才推出的，最低支持的系统也是 iOS9 , FDStackView 出现了，它就是为了解决 UIStackView 在低于 iOS9 的系统下无法使用的问题
在 FDStackView 之前也已经有了一些类似的开源项目，比如 OAStackView 和 TZStackView ，然而他们都不能满足我们的需求，局限性还是比较大的，比如不支持 IB ，某些功能还没有实现，类名需要使用非 UIStackView ，在我们看来这些对开发者来说都是不友好的，开发者需要的是一款功能完善，支持 IB ，使用时完全无感，在 Xcode7 上直接使用 UIStackView 即可，接下来的事情交给 FDStackView 就好，它负责将 UIStackView 在低于iOS9的系统上运行。

需要注意 如果使用IB的话，那么 IB 的 Builds for 属性需要设置为 iOS 9.0 and later

Stackview 安排问题

【中文标题】Stackview 安排问题

【英文标题】：Stackview arrange issue

【发布时间】：2017-05-17 06:28:26

【问题描述】：

我在垂直 StackView 中有一个水平 StackView。

水平 StackView 包含一个图像（w=30，h=30）和一个标签。

需要

我需要根据标签内在内容大小使图像和标签水平居中。

所以，它看起来像 ----Space----- image & label -----Space---

我怎样才能做到这一点？

谢谢，

【问题讨论】：

你检查了吗？ ***.com/questions/14741713/…

【参考方案1】：

我只使用水平 stackView 使其居中。 我做了什么。

第 1 步：

使我的图像具有特定的宽度和高度。

第 2 步：

两者都插入到水平堆栈视图中并使堆栈视图居中对齐。

已编辑：

如果我在顶部使用垂直堆栈视图，我找不到任何居中标签和图像的问题

【讨论】：

但我的水平 StackView 在垂直 StackView 内。

@nirav:- 你可以查看我的另一个答案

【参考方案2】：

你可以在Horizo​​ntal StackView中使用UIView，然后在UIView上添加图片和标签

【讨论】：

感谢您的回答，但由于视图的宽度等于堆栈视图，它也不起作用。我已经试过了。

请看附件图片

但我的水平 StackView 在垂直 StackView 内。

【参考方案3】：

请看附件图片

【讨论】：

我的垂直视图有前导，traling，top，bottom = 0，所以这对我不起作用

@nirav:- 请检查新图片

@nirav：我刚刚编辑了我的答案。如果您遇到任何问题，请随时回复。

视图的宽度和高度不能与堆栈视图相同。

【参考方案4】：

因为 VerticalStackView 强制 Horizo​​ntalStackView 具有相同的宽度，所以您必须将 imageView 和 label 包装在 UIView 中。像这样

【参考方案5】：

添加两个额外的视图，我将其命名为视图 1 和视图 2（绿色）在您的图像和标签的左右两侧，设置两个视图宽度相等，以便您的 imageView 和标签自动居中，不要忘记设置宽度对于 imageView 和标签。如果需要，将视图 1 和视图 2 设置为清除颜色或在其他视图视图下（以查看背景、其他视图、与其他视图的交互...）。