iOS中的表单-第1部分

大家好！ 这是我的第一篇中篇文章，非常感谢您提供反馈。 今天，我们将研究在Xcode Storyboard中使用Object引用。 由于我一直喜欢现实世界的用例，因此本文的大部分内容将研究如何使用这些Object引用实现Forms。 到本文结尾，目标是拥有可通过故事板进行配置的高度可重用的表单组件。 这也只是第1部分。在这一部分中，我们将构建一个简单的表单示例，在第二篇文章中，我们将研究一个更复杂的示例。

---

对象引用

好了，情节提要中的对象引用是什么？ 您可能已经在Xcode的UI库中看到了Object引用（这是图1中显示的黄色小方块）。 早在iOS开发人员的早期，此对象曾用于Nib文件中的文件所有者引用。 如果那没有任何意义，请不要担心。 我们现在生活在更好的时代。

现在，从我所看到的来看，它今天使用不多。 我知道直到最近我才从未使用过它。 那怎么办呢？ 图1.0的描述说明了一切。 这些对象可用于建模从NSObject类继承的任何对象。 您可以附加N个这些东西来在情节提要中查看控制器。 然后，您可以从默认的NSObject覆盖它们的类。 真的很棒！ 我可以通过Storyboard将一堆依赖项附加到我的视图控制器。 然后，在视图控制器上设置IBOutlet ，以创建对这些对象的引用，情节提要将处理实例化所有这些对象。

现在您可能会认为这很酷，但是我不能没有出口就直接将这些依赖项添加到我的视图控制器中……当然可以。 但是，使用情节提要板的强大功能意味着也可以通过情节提要板配置这些对象的任何依赖关系。 情节提要将为我们处理所有这些对象的实例化，我们不必担心。 这些对象还可以通过IBOutlet引用视图上的元素。 接下来，我们将在实现表单时看到这将如何帮助我们。

---

情节提要中的表单对象

本节将逐步为我们的表单示例构建一个示例Xcode项目。 欢迎继续阅读，或者如果您想阅读，本文结尾处的Github上有一个指向该项目的链接。 让我们从简单的示例开始。 图2具有我们表单的情节提要配置。 有两个视图控制器，一个带有一个可导航到第二个视图控制器的按钮，这些按钮全部嵌入在导航控制器中。 这将使我们在第2部分的稍后部分中创建更多链接。

第二个视图控制器包含我们的表单。 这种形式只是三个标签和三个文本字段，它们都嵌入在UIStackView中 。 底部还有一个提交按钮，将打印出表单的值。

好的。 让我们开始编码。 首先，在Xcode项目中创建一个名为Forms的新组。 然后创建两个名为Form.swift和FormControl.swift的新文件，如图3所示。

我们将从FormControl.swift文件开始。 该文件将包含以下协议：

  @objc 协议 FormControl { 
  var键：字符串？  { 得到 } 
  var文字：字串？  { get } func clear（） 
  } 

该协议将代表我们在每种表单上的现场控制。 关键是识别控件， 文本是值， 清除是重置值。 现在，您会注意到此协议是使用@objc标记定义的。 这对于我们的下一个代码块很重要。

  类形式：NSObject { @IBOutlet var控件：[FormControl]？  下标 （ _键：字符串）->字符串？  { 
  返回值（用于：键） 
  } func value（用于键：String）-> String？  { 
  返回控件？.first（其中：{$ 0.key == key}）?. text 
  } func clear（）{ 
 控件？.forEach {$ 0.clear（）} 
  } 
  } 

前面的代码块包含实际的Form类。 这里有一些代码，让我们来看一下。

1. 首先是最重要的部分。 IBOutlet引用FormControl的数组。 这使我们可以将故事板上的表单对象配置为具有N个表单控件（文本字段）。 这也是协议要求使用@objc属性的原因。 如果要在情节提要中引用该协议，则它必须具有此属性。
2. 第二种是一种下标方法，用于从每个控制字段获取值，如下所示： form["controlName"]
3. 第三是我们的下标方法的函数版本。
4. 第四是表格清晰的方法。

下一个要创建和要实现的文件将是UITextField的子类。 让我们将此文件放在Xcode的Forms组中。 这是实现：

  @IBDesignable 类 TextField：UITextField { @IBInspectable var键：字符串？ 
  } 扩展文本字段：FormControl { 
  func clear（）{ 
 文字= 无 
  } 
  } 

在上一个代码块中，我将TextField类声明为@IBDesignable以允许通过Storyboard配置key属性。 然后，该类通过扩展符合FormControl协议（我通常通过扩展实现我的所有协议一致性）。 由于UITextField类已经具有可选的text属性，因此我们不需要声明text属性。 最后，让我们实现简单的表单视图控制器：

  最后一个 类 SimpleFormViewController：UIViewController { @IBOutlet可变形式：形式！ 

  @IBAction func Submit （）{ 
  print（“ Form Data：”， 
 形式[“名字”]， 
  form [“ lastName”]， 
 表格[“ age”]） 
  } 
  } 

这就是视图控制器。 IBOutlet引用了我们的表单，并且Submit按钮将只打印出我们表单中的值。 简单吧！ 好吧，也许这不是世界上最简单的事情，但是从现在开始，实现表单应该很容易。 让我们跳回我们的情节提要以完成简单表单的配置。

首先，将所有UITextField更改为TextField 。 然后将其中一个对象引用拖到我们的视图控制器中。 您可以在界面的顶部栏中看到添加到视图控制器中的对象，如图4所示。

然后，我们想将对象引用的类更改为Form对象，如图5所示。一旦该对象为Form则将IBOutlet form属性连接到Storyboard中的该对象。

然后转到Form的Outlets检查器，并将所有文本字段连接到图6中的控件 outlet集合。

要配置的最后一件事是将键添加到每个文本字段。 确保为每个文本字段配置了正确的密钥，如下所示：

• 名字
• 姓
• 年龄

这些键将成为我们从表单中提取每个值的方式，而实际上我们已经在视图控制器中的Submit动作中对其进行了处理。 将IBAction引用添加到情节提要中的“提交”按钮。

现在一切准备就绪。 ew！ 这是很多步骤，但是我们做到了。 构建并运行，导航到简单表单，输入一些数据，我们将获得以下输出：

  表单数据：Optional（“ Eric”）Optional（“ Downey”）Optional（“ 27”） 

不是最好的输出（感谢很多可选项），但是您知道了。 这很棒，因为我们现在可以拥有任意数量的表单，并且视图控制器不需要重新实现任何表单逻辑。 👍

---

即使这只是简单的示例，也希望您能看到此设计的强大功能。 如果您的应用程序中有很多表单，那么在Storyboard中配置表单并提取数据应该非常容易。 在iOS的Forms的下一部分中 ，我们将扩展此实现以包括表单验证。 感谢您在此处阅读我的第一篇文章。 😁欢迎任何反馈，不胜感激！

Github

https://github.com/Ericdowney/iOSFormExample/tree/article/part1

版本号

• Xcode 10 Beta 6
• iOS 12 Beta 8
• 斯威夫特4.2