妈妈，没有情节提要！

作为一名自学成才的iOS开发人员，他通过观看Youtube教程和使用故事板的在线课程来学习大多数技能，这已成为第二自然。 一段时间以来，我什至都不知道在Xcode中使用情节提要还有其他选择。 我错了！ 在学习Swift的过程中，我开始看到许多项目在其项目中使用了程序约束。 因此，我开始研究为什么人们甚至想使用自动布局DSL。 我的意思是情节提要能够正常工作，但我没有看到任何瑕疵（这就是我的想法）。 基本上，这就是我为什么会放弃情节提要的原因。

• 协作-故事板无法与源代码控制一起很好地工作。 想要与朋友一起工作时，故事板不是您的朋友。
• 情节提要很慢-请从开始使用2011 Macbook Air开发的人员那里获取。 我已经习惯了看到彩虹旋转。 🍭
• 代码大师竞赛—代码将永远是卓越的。 编写，读取和调试更加容易。

这就是我们将要建立的。 它是iPhone X Apple最新和最出色的锁定屏幕的模型。 没有情节提要，也没有笔尖与代码。 那里有许多自动布局的DSL库。 在本教程中，我将使用SnapKit，您可以找到自己喜欢或感觉更自然的风格。

删除Main.storyboard文件。 是的，删除！ 在执行此操作时，最好也删除ViewController.swift 。 （ 不要删除launchscreen.storyboard ）

在您的项目中为我们项目中的某些组织创建以下组结构。

将AppDelegate.swift ， LaunchScreen.storyboard和Info.plist移到“ 应用程序”组中。 在Controller组内部，创建一个新的viewController类，并将其命名为“ LockScreenVC ”。 在“ 助手”组中创建一个快捷文件，并将其命名为“ 主题 ”。 您现在应该具有以下结构。

我们将使用Pod安装SnapKit。 将以下pod添加到您的podfile中。

  pod'SnapKit'，：git =>'https://github.com/SnapKit/SnapKit.git'，：branch =>'swift-4'
 pod'SwiftIcons'，'〜> 1.5.1' 

我们将使用SnapKit的Swift 4分支。 Swift Icons是可选的，您不必包含它。 我只是将其用作图标。

让我们从AppDelegate.swift开始。 删除所有功能，然后离开didFinshlaunchingWithOptions 。 由于我们的项目没有使用情节提要，因此我们需要告诉它如何启动。 为此，我们将利用为我们方便包含的窗口，但是窗口是什么？

一个对象，可为应用程序的用户界面提供背景，并提供重要的事件处理行为。

按option并单击UIWindow ，您将获得有关应用程序窗口是什么的更深入的说明。 阅读文档确实可以帮助您理解API。 因此，让我们创建窗口并告诉应用程序如何启动。

1. 我们实例化一个带有占据整个屏幕的框架的窗口。
2. 然后，我们告诉窗口哪个类用作其rootViewController
3. 最后，我们将窗口设置为关键窗口并使其可见。

锁屏

此时，尝试构建项目可能会发生两种情况之一。 首先，您的项目将构建并运行，但是您将看到的只是一个黑屏，这似乎是错误的，但这意味着它可以正常工作。 二，您的项目将启动并在启动屏幕上崩溃。 要在“常规”下修复此项目，请确保“主界面”为空，如下所示。

现在来看项目是否运行正确的视图控制器，我想将视图背景设置为亮色，然后构建并运行。

运行后，您会看到…

有用 ！ 大声笑不会赢得任何设计奖。 我们将回到Lockscreen.swift，但是通过创建一个帮助器类，让我们的生活更轻松一些。

主题

我敢肯定，如果您还没有听说过DRY原理，那它就是“不要重复自己”，因此，为了遵循该原理，我们将创建一个Theme类来管理UI组件的字体和插图。

1. 导入UIKit.UIFont，我们将仅使用UIFont，因此无需引入整个UIKit。
2. 创建主题类。 在此类中，您可以根据需要创建尽可能多的内部类来管理应用程序内的不同内容。 颜色，字体，插图，填充的可能性是无限的。 这使您可以集中更改值，并在整个应用程序中对其进行自动调整。
3. 我们的Fonts内部类为我们提供了将在应用程序中使用的字体。 拼写必须绝对完美，否则应用程序将崩溃。 您可以访问http://iosfonts.com/并查看字体名称。
4. 插图基本上处理UI元素的填充或间距。

多数民众赞成在主题经理完成。 👏🏾

LockScreenVC …再次。

不仅可以在屏幕上显示UI组件，还可以通过显示最新时间和更新来使应用程序真正起作用。 在到达那里之前，让我们最终在屏幕上显示一些东西。 在顶部的LockScreenVC中导入SnapKit和SwiftIcons 。 如果这是您第一次使用自动布局DSL，请在使用之前了解一下情节提要以及在创建程序性约束时约束如何工作。 就像情节提要约束一样，我们至少需要四个约束来确定组件的宽度，高度，x和y位置。

创建我们的背景图片

1. 为什么要使用“ lazy var”？ 不会表现出我拥有所有答案的样子，但是找到答案并不难。 提示提示。
2. 我使用此图像作为背景。 将其重命名为“ imgBackground”。 开始输入“ img…”，图像文字就会出现在您的Xcode中，很酷吧？

显示我们的背景图片

创建一个名为setupView的函数，在这里我们将所有UI-Component放置到视图上。

1. 因此，我们希望背景图像占据整个屏幕，这就是我们在这里所做的。
2. 将bgImageView作为子视图添加到视图。 请始终先执行此操作。 在我之后重复：在设置约束之前，我将始终添加我的视图。
3. 因此，用两行代码对我来说绝对有意义，我们的bgImageView将填满整个屏幕。 这将不管大小级别如何工作。 现在运行项目，您将看到图像到达所有边缘。

创建我们的detailContainer

细节容器将是设计底部的不透明黑色条纹，其中包含许多标签。 我刚刚创建了一个黑色背景的UIView，其alphaComponent为0.2（您可以根据自己的喜好使用alpa值来玩）。

显示我们的详细信息

1. 我们使宽度等于我们的视图。
2. 然后，将其固定在safeAreaLayoutGuide的底部。 在iOS 11中引入的安全区域告诉我们将UI组件放置在何处安全。
3. 最后，我们设置它的高度。

创建我们的标签

我不会花很多时间，因为这很简单。 如有任何疑问，请随时发表评论。

显示我们的UI组件

我将尽量不使该部分成为SnapKit文档的副本，而将尝试说明如何使用它。 让我们首先将arrowBtn放置在视图的右下角。 那么我们该怎么做呢？请考虑以下几点：

• 箭头在detailContainer内部。
• 它位于右下方，右侧有一些填充，而下方有一些填充。
• 最后，我们的按钮显然必须具有宽度和高度。

1. 我们将自己的权利等同于我们的superView。 注意*超级视图不是LockScreenVC的视图，而是detailContainer，因为我们将arrowBtn添加到detailContainer中 。 然后，我们将插图设置为向左移动一点。 可以将其视为在将约束固定到组件之后在约束上设置常量。
2. 将按钮的宽度设置为50，高度设置为35。
3. 然后，我们将arrowBtn捕捉到detailContainer的底部，并再次使用主题管理器将其向上移动。

在努力理解程序约束一段时间后，我牢记了一些我想分享的概念，从而掌握了这些建议。

• 我至少需要四个约束。 宽度，高度，X和Y。
• 首先选择你的“ ConstraintMakerExtendable ”，这就是你的武器🗡。 要查看您拥有哪些选项，只需键入“ make”。 然后您会看到可以使用的武器。 如您所见，SnapKit的武器库中有许多武器。

• 选择适合任务的武器 。 是的，您可能会找到一种使用错误的“ ConstraintMakerExtendable ”来使某些东西起作用的方法，但您可能会遇到麻烦，并发现自己增加了不必要的约束。 因此，选择合适的武器！ 那么，您怎么知道哪种才是正确的武器？
• 关系。 是的，您必须建立关系以选择正确的武器。 假设您希望viewA位于viewB的左侧，则应创建的关系是viewA的右侧应等于viewB的左侧。 合理 ？ 并不是的。 这没有多大意义，但是可视化该概念可以增加更多的清晰度。

• 距离。 在组件之间建立关系之后，接下来确定组件之间的距离。 可以通过设置插图轻松地完成此操作。
• 尺寸。 接下来设置组件的宽度和高度。 就像情节提要一样，您可以设置固定的高度和宽度。 您还可以使用关系来设置优先级和比例。 查看宽度类型“ make.width”的Xcode将提供选项…寻找听起来与您想要的声音足够接近的声音，并且它可能会起作用。 您应该通常在底部查看“ ConstraintMakerEditable ”。 您可以将宽度或高度设置为equalTo ， 小于或大于任何组件。

• 比例。 如果我希望自己的视图是superView宽度的一半怎么办？ 只需执行以下操作：

  make.width.equalToSuperview（）。multipliedBy（0.5） 

这些是使我理解SnapKit并感到自在的原理。 希望这可以帮助某人。 遵循这些原则，您应该能够继续进行UI其余部分的布局。 其余布局的代码可以在这里找到，但是请尝试自己实现。 这段代码可以正常工作，并且将获得所需的UI，但这绝对不是唯一的方法。 您可以自己想办法达到相同的结果，这就是代码的美。 尝试找到自己的解决方案，而不是复制和粘贴。 当您挣扎时，请进行研究，找出他人的成就。

---

添加上面的功能将获得当前时间并显示它。 Swift 4中的新功能是，当我们想在#selector中访问函数时，我们需要添加’@objc’标签。 接下来更新您的viewDidLoad方法。

因此，我们setupView ，调用displayTime ，然后创建一个时间表，该时间表将每分钟调用一次显示时间。 这将更新我们认为的时间。 现在，我们有了一个看起来很酷的半功能模型锁定屏幕。

---

* 免责声明 ，使用情节提要没有错，并且不要让任何人说服您。 使用它们有好处，而没有使用它们有好处。 然而，对您而言，重要的是能够做到这两者，而您永远不会知道自己所在的团队更喜欢使用什么团队。 我希望您喜欢阅读，如果到这一点，您一定已经知道了。