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

荦确發表於 2019-5-14 16:46:00

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

对于iOS开发人员，以编程方式设置UI可能会感到困难和复杂，特别是如果您在Swift方面不是很有经验。但幸运的是，有很多图库支持我们解决这个问题。其中一个是SnapKit。
我们使用SnapKit以编程方式设置UI，因为它是迄今为止最好的Swift UI布局库。在这个SnapKit教程中，我们将简要介绍SnapKit世界。
在这个  SnapKit教程中，我们描述了使用SnapKit的经验，  以帮助您学习  如何简化iOS App Development中的自动布局。
<h3><img class="aligncenter wp-image-5940 lazyload" alt="snapkit教程" width="743" height="495" data-src="https://www.iosapptemplates.com/wp-content/uploads/2019/04/delfi-de-la-rua-258293-unsplash-300x200.jpg"></h3>
<h4 class="graf graf--h3">1. SnapKit简介</h4>
对于iOS程序员来说，“自动布局”术语非常熟悉。在实现移动应用程序的布局时，它几乎成为必需的部分。目前，有两种思路在起作用。必须决定是使用Interface Builder来实现布局还是以编程方式执行。使用Interface Builder时，我们可以通过使用storyboard或xib文件添加所有约束，在这种情况下，我们的代码将不那么复杂，因为将使用更少的代码行，并且编写所有这些代码的时间将被打折扣。这只是“拖放”的东西。
但是，项目越大越复杂，接口文件的数量越多，管理这些文件的难度就越大。然后，如果您需要一些动态布局，则必须拖动许多约束来相应地更新UI。它使您的项目难以调试并且难以控制。就像这还不够，现在想象一下，你有大量的iOS开发人员在同一个项目上工作，因此会出现很多其他问题，例如自动生成文件的合并冲突。丑，对吧？
因此，无论哪种方式，您都必须知道如何以编程方式进行自动布局，因为如果您的应用程序成功，这将成为未来的一项要求。
但以编程方式使用自动布局的最大缺点是需要太长时间。您将不得不编写大量代码来设置约束而不是点击几下鼠标。Apple的自动布局编写非常冗长且耗时。SnapKit通过提供Apple的Auto Layout Constraints系统的简洁抽象，帮助我们解决这个问题。
<h4 class="graf graf--h3">2. SnapKit和用法</h4>
SnapKit是一个允许iOS开发人员轻松操作自动布局约束的工具。通过使用SnapKit，您可以创建，更新，删除和管理UI视图的布局约束。
让我们考虑一些例子，让您了解SnapKit的简洁和清晰，而不是Apple的Cocoa Auto-Layout库。首先，您需要通过CocoaPods（依赖管理器）安装SnapKit。将其添加到您的Podfile：
<pre>pod'SnapKit' </pre>
 为了节省时间和墨水（笑），我们不会谈论CocoaPods和Podfile。它们属于另一篇文章，所以请谷歌随意。
你还记得如何以编程方式添加约束吗？例如，如果我们想要垂直居中视图，代码将是这样的：
<pre>let horizontalConstraint = NSLayoutConstraint(item: view, attribute: NSLayoutConstraint.Attribute.centerX, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.centerX, multiplier: 1, constant: 0)</pre>
哎呀，看起来很难看。我们甚至不想考虑它，更不用说写下来了。让我们看看SnapKit如何为Swift开发人员解决这个巨大的痛点。
让我们显示一个UIView固定在其超视图的四个边缘。所以，想象一下我们有四个约束，比如上面的一个，有很多混乱的代码。让我们看看SnapKit如何处理这种情况。
第1步：以编程方式创建UIView
想象一下，我们在新的Xcode项目中有一个空白视图控制器。在viewDidLoad（）中，我们有以下几行代码：
<pre>let childView = UIView()
childView.backgroundColor = .red
self.view.addSubview(childView)</pre>
它基本上是创建一个新视图，为它设置背景颜色并将其添加到视图中。这里的所有都是它的。
第2步：使用SnapKit
首先，我们需要导入这个库。
<pre>import SnapKit 让我们继续在viewDidLoad（）中编写代码</pre>
<pre>childView.snp.makeConstraints { (make) in
make.top.bottom.left.right.equalTo(self.view)
} 这很简单，对吧？！从字面上看，有一行，我们已经使childView的所有四个边都等于super.view的边。如果将其与我们在上一节中显示的代码进行比较，这是一种更简洁的方法。因此，在编写UI时，您已经节省了大量时间。但那还不是全部。我们甚至可以进一步重构此代码：</pre>
<pre>childView.snp.makeConstraints { (make) in
make.edges.equalTo(self.view)
}</pre>
<pre>现在重新运行，您可以看到我们仅使用一行代码固定四条边，而不是像之前显示的二十或三十条线。</pre>
<h4 class="graf graf--h3">3.更多SnapKit示例</h4>
让我们继续使用另一个SnapKit示例。我们将创建另一个名为anotherChildView的视图：
<pre>let anotherChildView = UIView()
anotherChildView.backgroundColor = .yellow
self.view.addSubview(anotherChildView) 让我们在SnapKit中尝试新事物：</pre>
<pre>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>
<ul>
<li>size.equalTo</li>
<li>top.equalTo (Likewise, we have bottom.equalTo, left.equalTo and right.equalTo) with the offset.</li>
<li>centerX.equalTo and centerY.equalTo with the offset.</li>
</ul>
除此之外，SnapKit也有。乘以。您可以使用此功能为视图创建纵横比。因为这些代码行非常简单直接，所以我们不会深入研究实现细节。您可以参考SnapKit.io网站，因为它的文档非常详细且易于理解。
现在让我们再次运行它。
它按预期工作。此外，SnapKit还支持我们进行调试。它将准确地向我们显示约束被破坏的视图。然后我们可以相应地轻松检查和更新这些约束。
<h4 class="graf graf--h3">4.关于SnapKit的结论</h4>
阅读本SnapKit教程后，我们希望您能看到SnapKit以编程方式设置UI的好处。它允许您编写更少的代码，这反过来使整个过程更加简单。然而，作为一个小缺点，我们仍然需要继续学习如何使用可用的iOS API以编程方式使用自动布局（因为SnapKit只是一个第三方库，有一天可能不再支持 - 这是非常不可能的，因为围绕SnapKit开源项目有一个巨大的iOS社区）。
总的来说，如果您希望在以编程方式进行约束时改进代码，则SnapKit是一个有用的库。您的Xcode项目将变得更简洁，更模块化
<pre> </pre> 
来源：https://www.cnblogs.com/zhanggen/p/10863086.html

頁: [1]

琼殿技术论坛's Archiver

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