IOS9:如何在 iOS 9 中创建 Stack View

作者:Arthur Knopper,原文链接,原文日期:2015-09-14
译者:小铁匠Linus;校对:numbbbbb;定稿:小锅

在 iOS 9 之前,即使是创建相对简单的用户界面(User Interface),也需要在使用自动布局(Auto Layout)时添加大量的约束(Constraint)。在 iOS 9 中,苹果官方引进了 Stack View,它会为每个新增的子视图自动添加自动布局的约束。在本教程中,我们会创建一个包含三个子视图的纵向 Stack View。本教程使用 Xcode 7 和 iOS 9 实现。

打开 Xcode 并创建 Single View Application,product name 填写 IO9StackViewTutorial,然后填好 Organization Name 和 Organization Identifier,Language 选择 Swift,Devices 选择 iPhone,具体设置如下图。

进入 Storyboard,从界面右下角的 Object Library 里拖一个 Label 控件到主视图的上部。双击该 Label 并设置 title 为 “Swift”。从 Object Library 再拖一个 Image View,并放在 Label 下面。点击下载这张图片,把它添加到工程。选中 Image View 点击 Attribute Inspector。在 Image View 区域的 Image 字段选择 Apple_Swift_Logo.png,同时在 View 区域的 Mode 字段选择 Aspect Fit,具体如下图。

最后,再拖一个 Button,并放在 Image View 下面。双击该 Button 并设置 title 为 “Start Coding”。Storyboard 如下图所示。

按住 Ctrl 键并选择主视图里的三个控件,点击 Storyboard 右下角的 Stack View 按钮,如下图。

此时,Stack View 已经创建好了,唯一要做的事情就是设置自动布局约束(Auto Layout Constraints)。点选 Stack View 后点击 Pin 按钮,并设置 top constraint 为 50,点击”Add 1 Constraint”,如下图。

点击 Align menu 按钮,并选择”Horizontally in Container”,点击”Add 1 Constraint”,如下图。

按上面的步骤操作后,可能需要更新 frame,点击”Resolve Auto Layout Issues”按钮,然后再点击”Update Frames”,如下图。

可以在 Stack View 里改变子视图之间的间距(spacing)。选择 Stack View 然后切换到 Attribute Inspector 选项卡,修改 Spacing 的值为 20,如下图。

编译并运行工程。在模拟器里旋转设备,可以看到 Stack View 能很好地适应不同方向。

你可以在 Github 下载 IO9StackViewTutorial 工程的源代码。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值