作者:叫我刘大贱 | 来源:互联网 | 2023-08-14 13:00
作者:ArthurKnopper,原文链接,原文日期:2015-09-14译者:小铁匠Linus;校对:numbbbbb;定稿:小锅在iOS9之前,即使是创建相对简单的用户
作者: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,具体设置如下图。

最后,再拖一个 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 工程的源代码。