SnapKit教程：简化iOSApp开发中的自动布局

对于iOS开发人员来说，以编程方式设置UI可能很困难也很复杂，尤其是如果您对Swift没有太多经验。幸运的是，有很多图书馆支持我们解决这个问题。其中之一是SnapKit。

我们使用SnapKit以编程方式设置UI，因为它是迄今为止最好的Swift UI布局库。在本SnapKit教程中，我们将简要介绍SnapKit世界。

在本SnapKit教程中，我们介绍了使用SnapKit的经验，以帮助您了解如何简化iOSApp开发中的自动布局。

Snapkit教程

1.SnapKit简介

iOS程序员非常熟悉“自动布局”一词。它几乎是实现移动App布局的必要部分。目前，有两种想法在起作用。您必须决定是使用Interface Builder实现布局还是以编程方式执行布局。使用Interface Builder时，我们可以通过使用故事板或xib文件添加所有约束。在这种情况下，我们的代码将不那么复杂，因为将使用更少的代码行，并且编写所有这些代码的时间将减少。这只是一个“拖放”的事情。

然而，项目越大、越复杂，界面文件越多，管理这些文件就越困难。然后，如果需要一些动态布局，则必须拖动许多约束以相应地更新UI。它使您的项目难以调试和控制。由于这还不够，假设您有大量的iOS开发人员在同一个项目上工作，那么会有许多其他问题，例如自动生成的文件的合并冲突。丑，对吧？

因此，无论哪种方式，您都必须知道如何以编程方式自动布局，因为如果您的App成功，这将成为未来的需求。

但以编程方式使用自动布局的最大缺点是耗时太长。您必须编写大量代码来设置约束，而不是单击鼠标。苹果的自动布局编写非常繁琐和耗时。SnapKit通过提供苹果自动布局约束系统的简明抽象，帮助我们解决了这个问题。

2.SnapKit和用法

SnapKit是一个允许iOS开发人员轻松操作自动布局约束的工具。使用SnapKit，您可以创建、更新、删除和管理UI视图的布局约束。

让我们考虑一些示例，让您了解SnapKit的简单性和清晰度，而不是苹果的Cocoa Auto Layout库。首先，您需要通过CocoaPods（依赖项管理器）安装SnapKit。将其添加到您的Podfile：

吊舱“SnapKit”

为了节省时间和墨水（笑），我们不讨论CocoaPods和Podfile。它们属于另一篇文章，所以请随时访问谷歌。

您还记得如何以编程方式添加约束吗？例如，如果我们想将视图垂直居中，代码将如下所示：

让horizontalConstraint=NSLayoutConstraint（项：视图，属性：NSLayout Constraint.attribute.centerX，relatedBy:NSLayout.Relation.equal，to项：视图、属性：NSlayoutConsstraint.Attibute.center X，乘数：1，常数：0）

哦，看起来很难看。我们甚至不想去想，更不用说写下来了。让我们看看SnapKit如何解决Swift开发人员的这个巨大痛点。

让我们展示一下UIView在其超级视图的四个边缘是固定的。想象一下，我们有四个约束，比如上面的一个，有很多乱七八糟的代码。让我们看看SnapKit如何处理这种情况。

步骤1：以编程方式创建UIView

假设我们在新的Xcode项目中有一个空白视图控制器。在viewDidLoad（）中，我们有以下几行代码：

让childView=UIView（）

childView。backgroundColor=红色

self.view.addSubview（子视图）

它基本上创建一个新视图，为其设置背景色，并将其添加到视图中。这里的一切都属于它。

步骤2：使用SnapKit

首先，我们需要导入库。

导入SnapKit

让我们继续在viewDidLoad（）中编写代码</pre>

childView.snp。makeConstraints｛（make）in

make.top.bottom.left.right.equalTo（自视图）

}

这很容易，不是吗？！从字面上看，我们已经使childView的所有四个边都等于super视图的边。如果将其与上一节中显示的代码进行比较，则它是一种更简洁的方法。因此，您在编写UI时节省了大量时间。但这并不是全部。我们甚至可以进一步重构此代码：</pre>

childView.snp。makeConstraints｛（make）in

make.edges.equalTo（自视图）

}

现在重新运行，您可以看到，我们只用一行代码修复了四个边，而不是前面显示的二十行或三十行。

3.更多SnapKit示例

让我们继续使用另一个SnapKit示例。我们将创建另一个名为anotherChildView的视图：

让另一个ChildView=UIView（）

另一个ChildView。backgroundColor=黄色

self.view.addSubview（另一个ChildView）

让我们试试