客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
在应用开发中少不了界面元素的布局、适配、自适应。之前苹果已经为我们提供了 Auto Layout 和 Size Classes，方便我们实现页面的自适应弹性布局。但对于一些复杂的交互界面，用起来还是略显繁琐。
到了 iOS9，苹果又为我们带来了一个新特性：Stack View（堆栈视图）。使用堆栈视图布局，在某些场景下可以大大减轻我们的工作量。
一、基本介绍1，什么是 UIStackView?
2，如何使用 UIStackView？我们可以直接在代码中使用 UIStackView，也可以在 StoryBoard 中使用。 Xcode 提供了两种方式在 StoryBoard 中使用 UIStackView：
3，UIStackView 的属性
UIStackView 使用简单，属性只有如下 4 个：
（1）Axls：子视图的布局方向，可选值有：
（2）Alignment：子视图的对齐方式，可选值有：
（3）Distributlon：子视图的分布比例（大小），可选值有：
（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 重写原来的基本布局。
最后将这个新增的 Size Classes 下的 Axis 值设置为 Horizontal。
（6）运行程序即可看到效果。同时横竖屏切换时布局方向也会自动改变。
源码下载：hangge_1749.zip
原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1749.html |
请发表评论