数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究在 Swift 和 iOS 中使用 Xcode 自动布局
自动布局是基于约束的布局系统，用于开发 iOS 设备的用户界面。这种基于约束的布局系统也称为自动布局，基本上是一个自适应 UI，可以适应不同尺寸和方向的屏幕。
自动布局完全依赖于约束，开发人员在其中定义相邻元素或父元素之间的关系以确定其位置。
为什么要使用自动布局？
在设计 iOS 应用程序时，您需要确保您正在开发的 UI 与所有屏幕尺寸和方向都兼容。当您希望这样做时，自动布局非常方便。
考虑以下图像。在 iPhone 6 中居中的按钮在其他设备上未居中对齐，这是因为不同的 iOS 设备具有不同的尺寸。在这篇文章中，我们将重点关注约束，因此如果您想了解更多关于尺寸的信息，可以查看 http://iosres.com/
为了确保我们开发的 UI 在所有设备和方向上都保持一致，我们将使用自动布局。所以，让我们开始吧。
步骤 1 - 打开 Xcode → 新建项目 → 单视图应用程序 → 让我们将其命名为“AutoLayout”
步骤 2 - 打开 Main.storyboard，添加按钮，如下所示，以供参考，选择 iPhone 7Plus 作为设备。
在这里您可以看到我们在随机位置添加了一个按钮，没有任何约束。我们的目标是将此按钮放置在中心，并与所有设备和方向兼容。在进入步骤 3 之前，让我们了解我们需要做什么以及我们将如何实现。
Xcode 提供了两种定义自动布局约束的方法 - 自动布局栏和 Control-drag。虽然我们将非常频繁地使用自动布局栏，并且在本博文中也是如此，但我将确保也告诉您如何使用 Control-drag。在您的 Xcode 中，在界面构建器的右下角，您可能会看到 5 个按钮，这些按钮称为布局按钮，用于定义约束。
所以，现在我们将使用自动布局栏为这两个按钮提供约束。
整个约束系统工作的核心理论是 4 个参数（前导、尾随、顶部和底部），以及高度、宽度以及垂直和水平中心。
步骤 3 - 点击按钮并点击“对齐”，启用容器中的水平和垂直对齐，如下所示。
添加这两个约束后，您可以看到您的按钮已对齐到屏幕中心。
或者，您也可以通过控制拖动功能实现相同的效果，如下所示，选择 UI 组件，点击控制按钮并拖动以提供约束，提供水平和垂直居中。
步骤 4 - 现在我们将定义按钮的宽度和高度。选择添加新约束选项，如下所示，并添加高度和宽度。
或者，如果您不希望向容器提供水平和垂直约束，则可以提供前导约束、尾随约束、顶部边距和底部边距。
步骤 5 - 所以，我们提供了所有必要的约束，我们应该始终记住 4 个边缘，对齐到 X 轴，对齐到 Y 轴，宽度和高度我们需要确定 UI 组件的位置。
现在让我们在不同的设备上运行并查看结果。我们将运行不同的设备和方向。
您甚至可以编辑约束，如果您希望修改或删除相同的约束，请在右侧窗格的实用程序区域中选择编号 5 选项并向下滚动，如图像所示。
因此，本教程旨在向您简要介绍如何使用自动布局和约束来开发自适应 UI。您可以使用上述基本概念尝试多个组件。
2K+ 阅读量
