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

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

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

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

snapkit教程

1. SnapKit简介

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

但是,项目越大越复杂,接口文件的数量越多,管理这些文件的难度就越大。然后,如果您需要一些动态布局,则必须拖动许多约束来相应地更新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项目将变得更简洁,更模块化

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容