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 的正确位置上。然后就可以拖一些 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
UIStackView怎么设置layer啊 我搞了好长时间没搞出来