返回 导航

Swift

hangge.com

Swift - UIStackView使用详解1（基本介绍、使用样例）

作者：hangge | 2017-08-14 08:10
在应用开发中少不了界面元素的布局、适配、自适应。之前苹果已经为我们提供了 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
评论

全部评论（1）

回到顶部