作者：不得不无奈啊 | 来源：互联网 | 2023-10-14 11:26
在应用开发中少不了界面元素的布局、适配、自适应。之前苹果已经为我们提供了 AutoLayout 和 SizeClasses，方便我们实现页面的自适应弹性布局。但对于一些复杂的交互界
在应用开发中少不了界面元素的布局、适配、自适应。之前苹果已经为我们提供了 Auto Layout 和 Size Classes，方便我们实现页面的自适应弹性布局。但对于一些复杂的交互界面，用起来还是略显繁琐。
到了 iOS9，苹果又为我们带来了一个新特性：Stack View（堆栈视图）。使用堆栈视图布局，在某些场景下可以大大减轻我们的工作量。
一、基本介绍
1，什么是 UIStackView?
-
UIStackView 是 UIView 的子类，它不能用来呈现自身的内容，而是用来约束子控件的一个控件。
-
UIStackView 提供了一个高效的接口用于平铺一行或一列的视图组合。对于嵌入到 StackView 的视图，我们不用再添加自动布局的约束了。Stack
View 会管理这些子视图的布局，并帮我们自动布局约束。也就是说，这些子视图能够适应不同的屏幕尺寸。
-
UIStackView 支持嵌套，我们可以将一个 Stack View 嵌套到另一个 Stack
View 中，从而实现更为复杂的用户界面。
- 使用 UIStackView 并不意味这不需要处理自动布局了。我们仍旧要定义一些布局约束来约束 Stack View。它只是帮我们节约了为每个 UI 元素创建约束的时间，同时它更容易的从布局中添加/删除一个视图。
2，如何使用 UIStackView？
我们可以直接在代码中使用 UIStackView，也可以在 StoryBoard 中使用。 Xcode 提供了两种方式在 StoryBoard 中使用 UIStackView：
-
方式1：从对象库中拖一个 Stack View（水平的/竖直的）放到 storyboard 的正确位置上。然后就可以拖一些 label、button、imageView 等视图放到 Stack
View 中。
-
方式2：可以在自动布局栏中使用 Stack 选项。比如我们简单的选择两个或更多的视图，之后点击 Stack 选项，IB 将会把这些视图嵌入到一个 Stack
View 中，并自动的调整。
3，UIStackView 的属性
UIStackView 使用简单，属性只有如下 4 个：
（1）Axls：子视图的布局方向，可选值有：
-
Vertical：垂直
-
Horizontal：水平
（2）Alignment：子视图的对齐方式，可选值有：
-
Fill：子视图填充 StackView。
-
Leading：靠左对齐。
-
Trailing：靠右对齐。
-
Center：子视图以中线为基准对齐。
-
Top：靠顶部对齐。
-
Bottom：靠底部对齐。
-
First Baseline：按照第一个子视图中文字的第一行对齐。
-
Last Baseline：按照最后一个子视图中文字的最后一行对齐。
（3）Distributlon：子视图的分布比例（大小），可选值有：
-
Fill：默认分布方式。
-
Fill Equally：每个子视图的高度或宽度保持一致。
-
Fill Proportionally：StackView 自己计算出它认为合适的分布方式。
-
Equal Spacing：每个子视图保持同等间隔的分布方式。
-
Equal Centering：每个子视图中心线之间保持一致的分布方式。
（4）Spacing：子试视图间的间距
二、一个三段式布局样例
1，效果图
（1）默认情况下，3 个 ImageView 在垂直方向上三等分排列显示。它们的尺寸间隔完全相同。
（2）当设备横置时，3 个 ImageView 变成水平排列，同时仍然保持大小间隔相等。
2，实现步骤
（1）首先从对象库中拖出一个垂直的 Stack View 放到 StoryBoard 上的 View Controller 中，并设置好它的约束。
（2）为了让 Stack VIew 内部的元素大小相等，均匀分布，我们将 Stack View 的 Distribution 设为 Fill
Equally。同时将 Spacing 设为 10，让元素之间有个间隔。
（3）接着我们往 Stack View 内部拖入 3 个 Image View，可以看到它们已经自动垂直排列，且大小相等。
（4）为了更好的看到效果，我们给每个 Image View 设置好要显示的图片，同时将 Content Mode 设置为 Aspect
Fill，并勾选上 Clip To Bounds
（5）我们知道 Axis 属性决定了子控件的布局方向。如果我们想要实现在竖屏时子控件垂直布局，横屏时子控件水平布局。那么我们可以通过 Size Classes 重写原来的基本布局。
- 点击 Stack View 的 Axis 选项旁边的 + 按钮。Width 选择 Any，Height 选择 Compact。然后点击“Add
Variation”添加。
最后将这个新增的 Size Classes 下的 Axis 值设置为 Horizontal。
（6）运行程序即可看到效果。同时横竖屏切换时布局方向也会自动改变。
源码下载：
hangge_1749.zip
原文出自：www.hangge.com
转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1749.html
京公网安备 11010802041100号