iOS自动版式和堆栈视图

自动布局是一项强大功能,可为iOS平台构建可调整大小的动态用户界面。 但是,要解决在屏幕上布局多个视图的众多限制,就带来了极大的复杂性。 使用堆栈视图来节省麻烦很方便。 堆栈视图允许以水平垂直方式在堆栈中布局视图。

提示:增强您的Xcode🎨

为了演示起见,我使用堆栈视图和自动布局的混合与匹配构建了一个计算器应用程序用户界面。

遵循的步骤:

1)创建一个单视图项目

2)在视图控制器上添加标签,然后使用编辑器>嵌入>堆栈视图或底部的按钮将其嵌入到堆栈视图中

3)现在添加20个按钮(5行4列)

4)将按钮的每一行插入堆栈视图中。 您也可以命名堆栈视图以进行识别

5)选择所有堆栈视图,并将它们嵌入另一个称为“根堆栈视图”的堆栈视图中。 现在我们有了堆栈

6)选择“根堆栈视图”,然后为零,(0)的标准值添加4个约束,分别用于顶部,左侧,底部和右侧。

7)对根堆栈视图执行以下操作:

  • 设置根堆栈视图填充的对齐方式
  • 将“根堆栈视图”的间距设置为8 px iOS标准
  • 将分布设置为均等填充

8)对所有子堆栈视图重复步骤7。 是的,您快到了!

9)似乎自动布局会留下一个小的警告。 通过选择警告来修复它并更新其框架。

现在可以使用计算器布局了。 它可以在所有屏幕尺寸和方向上流畅运行。 ‍🚒

下载完成的项目