时间戳

首页 > 技术文章 > SnapKit教程：简化iOS App开发中的自动布局

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

zhanggen 2019-05-14 16:46 原文

对于iOS开发人员，以编程方式设置UI可能会感到困难和复杂，特别是如果您在Swift方面不是很有经验。但幸运的是，有很多图库支持我们解决这个问题。其中一个是SnapKit。

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

在这个  SnapKit教程中，我们描述了使用SnapKit的经验，  以帮助您学习  如何简化iOS App Development中的自动布局。

snapkit教程

1. SnapKit简介

对于iOS程序员来说，“自动布局”术语非常熟悉。在实现移动应用程序的布局时，它几乎成为必需的部分。目前，有两种思路在起作用。必须决定是使用Interface Builder来实现布局还是以编程方式执行。使用Interface Builder时，我们可以通过使用storyboard或xib文件添加所有约束，在这种情况下，我们的代码将不那么复杂，因为将使用更少的代码行，并且编写所有这些代码的时间将被打折扣。这只是“拖放”的东西。

但是，项目越大越复杂，接口文件的数量越多，管理这些文件的难度就越大。然后，如果您需要一些动态布局，则必须拖动许多约束来相应地更新UI。它使您的项目难以调试并且难以控制。就像这还不够，现在想象一下，你有大量的iOS开发人员在同一个项目上工作，因此会出现很多其他问题，例如自动生成文件的合并冲突。丑，对吧？

因此，无论哪种方式，您都必须知道如何以编程方式进行自动布局，因为如果您的应用程序成功，这将成为未来的一项要求。

但以编程方式使用自动布局的最大缺点是需要太长时间。您将不得不编写大量代码来设置约束而不是点击几下鼠标。Apple的自动布局编写非常冗长且耗时。SnapKit通过提供Apple的Auto Layout Constraints系统的简洁抽象，帮助我们解决这个问题。

2. SnapKit和用法

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

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

pod'SnapKit'


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

你还记得如何以编程方式添加约束吗？例如，如果我们想要垂直居中视图，代码将是这样的：

let horizontalConstraint = NSLayoutConstraint(item: view, attribute: NSLayoutConstraint.Attribute.centerX, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.centerX, multiplier: 1, constant: 0)

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

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

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

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

let childView = UIView()
childView.backgroundColor = .red
self.view.addSubview(childView)

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

第2步：使用SnapKit

首先，我们需要导入这个库。

import SnapKit

让我们继续在viewDidLoad（）中编写代码
childView.snp.makeConstraints { (make) in
  make.top.bottom.left.right.equalTo(self.view)
}
这很简单，对吧？！从字面上看，有一行，我们已经使childView的所有四个边都等于super.view的边。如果将其与我们在上一节中显示的代码进行比较，这是一种更简洁的方法。因此，在编写UI时，您已经节省了大量时间。但那还不是全部。我们甚至可以进一步重构此代码：
childView.snp.makeConstraints { (make) in
  make.edges.equalTo(self.view)
}
现在重新运行，您可以看到我们仅使用一行代码固定四条边，而不是像之前显示的二十或三十条线。

3.更多SnapKit示例

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

let anotherChildView = UIView()
anotherChildView.backgroundColor = .yellow
self.view.addSubview(anotherChildView)

让我们在SnapKit中尝试新事物：
childView.snp.makeConstraints { (make) in
  make.size.equalTo(CGSize(width: 300, height: 300))
  make.top.equalTo(self.view.snp.top).offset(100)
  make.centerX.equalTo(self.view)
}


anotherChildView.snp.makeConstraints { (make) in
  make.size.equalTo(childView)
  make.top.equalTo(childView.snp.bottom).offset(50)
  make.centerX.equalTo(self.view)
}

如您所见，我们有很多功能
  • size.equalTo
  • top.equalTo (Likewise, we have bottom.equalTo, left.equalTo and right.equalTo) with the offset.
  • centerX.equalTo and centerY.equalTo with the offset.

除此之外，SnapKit也有。乘以。您可以使用此功能为视图创建纵横比。因为这些代码行非常简单直接，所以我们不会深入研究实现细节。您可以参考SnapKit.io网站，因为它的文档非常详细且易于理解。

现在让我们再次运行它。

它按预期工作。此外，SnapKit还支持我们进行调试。它将准确地向我们显示约束被破坏的视图。然后我们可以相应地轻松检查和更新这些约束。

4.关于SnapKit的结论

阅读本SnapKit教程后，我们希望您能看到SnapKit以编程方式设置UI的好处。它允许您编写更少的代码，这反过来使整个过程更加简单。然而，作为一个小缺点，我们仍然需要继续学习如何使用可用的iOS API以编程方式使用自动布局（因为SnapKit只是一个第三方库，有一天可能不再支持 - 这是非常不可能的，因为围绕SnapKit开源项目有一个巨大的iOS社区）。

总的来说，如果您希望在以编程方式进行约束时改进代码，则SnapKit是一个有用的库。您的Xcode项目将变得更简洁，更模块化



推荐阅读