对于iOS开发人员,以编程方式设置UI可能会感到困难和复杂,特别是如果您在Swift方面不是很有经验。但幸运的是,有很多图库支持我们解决这个问题。其中一个是SnapKit。
我们使用SnapKit以编程方式设置UI,因为它是迄今为止最好的Swift UI布局库。在这个SnapKit教程中,我们将简要介绍SnapKit世界。
在这个 SnapKit教程中,我们描述了使用SnapKit的经验, 以帮助您学习 如何简化iOS App Development中的自动布局。
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()中编写代码</pre>
childView.snp.makeConstraints { (make) in
make.top.bottom.left.right.equalTo(self.view)
}
这很简单,对吧?!从字面上看,有一行,我们已经使childView的所有四个边都等于super.view的边。如果将其与我们在上一节中显示的代码进行比较,这是一种更简洁的方法。因此,在编写UI时,您已经节省了大量时间。但那还不是全部。我们甚至可以进一步重构此代码:</pre>
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)
}
如您所见,我们有很多功能</pre>
* **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项目将变得更简洁,更模块化