• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
在应用开发中少不了界面元素的布局、适配、自适应。之前苹果已经为我们提供了 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)默认情况下,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 选择 AnyHeight 选择 Compact。然后点击“Add Variation”添加。

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

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

源码下载hangge_1749.zip

原文出自:www.hangge.com  转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1749.html

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
[Swift]LeetCode384.打乱数组|ShuffleanArray发布时间:2022-07-14
下一篇:
Swift3.0 URLSession学习笔记发布时间:2022-07-14
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap