当前位置: > > > Swift - UIStackView使用详解1(基本介绍、使用样例)

Swift - UIStackView使用详解1(基本介绍、使用样例)

在应用开发中少不了界面元素的布局、适配、自适应。之前苹果已经为我们提供了 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 的正确位置上。然后就可以拖一些 labelbuttonimageView 等视图放到 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 ProportionallyStackView 自己计算出它认为合适的分布方式。
  • Equal Spacing:每个子视图保持同等间隔的分布方式。
  • Equal Centering:每个子视图中心线之间保持一致的分布方式。

(4)Spacing:子试视图间的间距

二、一个三段式布局样例

1,效果图

(1)默认情况下,3ImageView 在垂直方向上三等分排列显示。它们的尺寸间隔完全相同。

(2)当设备横置时,3ImageView 变成水平排列,同时仍然保持大小间隔相等。

2,实现步骤

(1)首先从对象库中拖出一个垂直的 Stack View 放到 StoryBoard 上的 View Controller 中,并设置好它的约束。

(2)为了让 Stack VIew 内部的元素大小相等,均匀分布,我们将 Stack ViewDistribution 设为 Fill Equally。同时将 Spacing 设为 10,让元素之间有个间隔。

(3)接着我们往 Stack View 内部拖入 3Image View,可以看到它们已经自动垂直排列,且大小相等。

(4)为了更好的看到效果,我们给每个 Image View 设置好要显示的图片,同时将 Content Mode 设置为 Aspect Fill,并勾选上 Clip To Bounds

(5)我们知道 Axis 属性决定了子控件的布局方向。如果我们想要实现在竖屏时子控件垂直布局,横屏时子控件水平布局。那么我们可以通过 Size Classes 重写原来的基本布局。
  • 点击 Stack View 的 Axis 选项旁边的 + 按钮。Width 选择 AnyHeight 选择 Compact。然后点击“Add Variation”添加。

最后将这个新增的 Size Classes 下的 Axis 值设置为 Horizontal

(6)运行程序即可看到效果。同时横竖屏切换时布局方向也会自动改变。

源码下载hangge_1749.zip
评论1
  • 1楼
    2018-02-08 17:33
    zs58zs107

    UIStackView怎么设置layer啊 我搞了好长时间没搞出来

    站长回复

    不知你指的UIStackView设置layer是什么意思?或者说想实现什么效果。