Swift官方入门教程系列--四--自定义控件【翻译版，源代码】

代码参见 04_自定义控件

本例在之前系列的基础上，继续解说Swift。完成后，您的应用程序将如下所示：

学习目标

在课程结束时，您将能够：

• 创建自定义源代码文件并将其与故事板中的元素关联

• 定义自定义类

• 在自定义类上实现初始化程序

• 使用UIStackView 作为一个容器

• 了解如何以编程方式创建视图

• 将辅助功能信息添加到自定义控件

• 一起工作@IBInspectable和@IBDesignable显示和控制界面生成器自定义视图

创建自定义视图

为了能率一顿饭，用户需要一个控制，让他们选择，他们希望分配到饭星数。有很多方法可以实现这一点，但本课重点介绍一种直接的方法，通过组合现有的视图和控件来构建自定义控件。您将创建一个堆栈视图子类来管理表示星形的按钮行。你会在代码中完全定义自定义的控制，然后将其添加到您的故事板。

评分控件显示为一行星。

用户可以选择用餐的评分。当用户点击星形时，该星形和其前面的星形被填充。如果用户点击最右边填充的星形（与当前分级相关联的星形），则等级被清除，并且所有星星被显示为空。

要开始设计的用户界面（UI） ，互动，这种控制的行为，通过创建自定义堆栈视图（开始UIStackView）的子类。

创建UIStackView的子类

1. 选择文件>新建>文件（或按Command-N）。

2. 在显示的对话框顶部，选择iOS。

3. 选择Cocoa Touch Class，然后单击下一步。

4. 在类字段类型RatingControl。

5. 在现场“的子类”，选择UIStackView。

6. 确保“语言”选项设置为“Swift”。

7. 点击下一步。

   保存位置默认为您的项目目录。

   “组”选项默认为您的应用名称FoodTracker。

   在“目标”部分中，选择您的应用，并取消选择您的应用的测试。

8. 保留这些默认值，然后单击“创建”。

   Xcode创建定义文件RatingControl类：RatingControl.swift。RatingControl是自定义视图的子类UIView。

9. 如果有必要，在Project Navigator中，拖动RatingControl.swift，这样它的定位下的其他雨燕文件的文件。

10. 在RatingControl.swift删除附带的模板中的意见实施这样你就可以开始用一张白纸工作。

    实现应该看起来像这样：

    1. import UIKit
    3. class RatingControl: UIStackView {
    5. }

通常，您可以创建两种方式之一一种观点：通过编程初始化的观点，或通过允许以期在故事板加载。还有每种方法相应的初始化：init(frame:)对于编程初始化视图，并init?(coder:)加载从故事板视图。回想一下，一个初始化是准备使用的类，它包括设置每个属性的初始值，并执行任何其他安装的实例的方法。

您需要在自定义控件中实现这两种方法。在设计应用程序时，Interface Builder在将其添加到画布时以编程方式实例化视图。在运行时，您的应用从故事板加载视图。

覆盖初始化

1. 在RatingControl.swift中，下class行，添加此评论。

   1. //MARK: Initialization

2. 在注释下，开始打字init。

   代码完成覆盖显示。

3. 选择init(frame: CGRect)从列出的选项，然后按回车键。

   Xcode为你插入初始化框架。

   1. init(frame: CGRect) {
   3. }

4. 错误和警告在代码旁边显示为黄色三角形图标（警告）和红色圆圈（错误）。目前，该init(frame:)方法有一个错误。单击错误图标以显示有关错误的更多信息。

5. 双击修复-它插入override关键字。

   1. override init(frame: CGRect) {
   3. }

   雨燕的编译器知道init(frame:)按要求必须标注，并提供修复-它使你的代码这种变化。修复-它是由编译器的代码中的错误可能的解决方案提供。

6. 添加此行以调用超类的初始化程序：

   1. super.init(frame: frame)

7. 下面的init(frame:)方法，开始键入init再次，选择的init（编码器：NSCoder）从代码完成选项。按返回。

   Xcode为你插入初始化框架。

   1. init(coder: NSCoder) {
   3. }

8. 使用Fix-它插入required关键字。

   注意

   Swift处理初始化方法与其他方法不同。如果你不提供任何初始化器，Swift类会自动继承它所有的超类的指定初始化器。如果你实现任何初始化器，你不再继承任何超类初始化; 然而，超类可以标记其初始化为一个或多个required。子类必须实现（或自动继承）所有必需的初始化器。此外，子类必须标明其初始化为required，表明其子类必须实现初始化。

9. 添加此行以调用超类的初始化程序。

   1. super.init(coder: coder)

初始化器应该看起来像这样：

1. override init(frame: CGRect) {
2. super.init(frame: frame)
3. }
5. required init(coder: NSCoder) {
6. super.init(coder: coder)
7. }

现在，你的初始化器是占位符，只是调用超类的实现。您将在本课后面添加其他配置步骤。

显示自定义视图

要显示您的自定义控件，您需要向故事板添加一个堆栈视图，并在堆栈视图和刚刚编写的代码之间建立连接。

显示视图

1. 打开你的故事板。

2. 在你的故事板，使用对象库找到一个水平堆叠视图对象，并拖动一进你的故事板的场景，这样它在图像视图下方的堆栈视图。

3. 在选择了水平堆叠视图中，打开身份检查。

   回想一下，身份检查可以让你在故事板涉及到该对象的身份，比如什么类的对象属于编辑对象的属性。

4. 在身份检查，发现标示类，并选择该领域RatingControl。

向视图中添加按钮

在这一点上，你已经有了一个自定义的基本UIStackView子类，叫做RatingControl。接下来，您需要向视图中添加按钮，以允许用户选择评分。从一个简单的开始，像一个红色按钮出现在你的视图。

在视图中创建按钮

确保添加了按钮，而不管调用哪个初始化程序。要做到这一点，添加一个私有方法setupButtons()，并呼吁从两个初始化该方法。

1. 在RatingControl.swift，根据初始化方法，添加此评论。

   1. //MARK: Private Methods

   使用此评论下方的空间来创建私有方法的方法与private在之前修改func介绍人。私有方法只能由声明类中的代码调用。这允许您封装和保护方法，以确保它们不会从外部意外或意外调用。

2. 在注释下，添加以下方法：

   1. private func setupButtons() {
   3. }

3. 在该setupButtons()方法中，添加以下代码行来创建一个红色的按钮：

   1. // Create the button
   2. let button = UIButton()
   3. button.backgroundColor = UIColor.red

   在这里，您使用的是一UIButton类的初始化方便。此初始化呼叫init(frame:)并传递在零大小的矩形。从零尺寸的按钮开始是好的，因为您使用的是自动布局。堆栈视图将自动定义按钮的位置，并且您将添加约束来定义按钮的大小。

   您正在使用red，因此很容易，看看那里的看法是。如果你愿意的话，用其它预定义的一个UIColor值，而不是像blue或green。

4. 在最后一行的下面，添加按钮的约束：

   1. // Add constraints
   2. button.translatesAutoresizingMaskIntoConstraints = false
   3. button.heightAnchor.constraint(equalToConstant: 44.0).isActive = true
   4. button.widthAnchor.constraint(equalToConstant: 44.0).isActive = true

   第一行代码禁用按钮的自动生成的约束。当以编程方式创建一个视图，它的translatesAutoresizingMaskIntoConstraints属性默认为true。这告诉布局引擎创建定义基于视图的视图的大小和位置的限制frame和autoresizingmask特性。通常，当您使用自动布局时，您要用自己的自动生成的约束替换这些自动生成的约束。要删除自动生成的约束，设置translatesAutoresizingMaskIntoConstraints属性false。

   注意

   这一行不是绝对必要的。当您添加视图到堆栈视图，堆栈视图自动设置视图的translatesAutoresizingMaskIntoConstraints财产false。但是，当使用Auto Layout时，每当以编程方式创建视图时，显式禁用自动生成的约束是一个好习惯。这样，你不会不小心忘了禁用它们，当它实际上很重要。

   线开始button.heightAnchor并button.widthAnchor创建定义按钮的高度和宽度的限制。每行执行以下步骤：

   1. 按钮的heightAnchor和widthAnchor性能提供访问布局锚。您可以使用布局定位点来创建约束（在这种情况下，分别是定义视图高度和宽度的约束）。

   2. 锚的constraint(equalToConstant:)方法返回一个定义一个恒定高度或宽度为视图的约束。

   3. 约束的isActive属性激活或停用该约束。当您将此属性设置为true，该系统将约束添加正确的观点，并激活它。

   在一起，这些行将按钮定义为布局中的固定大小的对象（44点x 44点）。

5. 最后，将按钮添加到堆栈：

   1. // Add the button to the stack
   2. addArrangedSubview(button)

   该addArrangedSubview()方法将您创建的被管理视图列表按钮RatingControl堆栈视图。此操作会将视图的一个子视图RatingControl，并且还指示RatingControl创建管理控件中的按钮的位置所需的约束。

你的setupButtons()方法应该是这样的：

1. private func setupButtons() {
3. // Create the button
4. let button = UIButton()
5. button.backgroundColor = UIColor.red
7. // Add constraints
8. button.translatesAutoresizingMaskIntoConstraints = false
9. button.heightAnchor.constraint(equalToConstant: 44.0).isActive = true
10. button.widthAnchor.constraint(equalToConstant: 44.0).isActive = true
12. // Add the button to the stack
13. addArrangedSubview(button)
14. }

现在从这两种初始化方法中调用此方法，如下所示：

1. override init(frame: CGRect) {
2. super.init(frame: frame)
3. setupButtons()
4. }
6. required init(coder: NSCoder) {
7. super.init(coder: coder)
8. setupButtons()
9. }

检查点：运行你的应用程序。你应该能够看到一个内有一个小红色方块的视图。红色方块是您在初始化程序中添加的按钮。

您需要为此按钮（以及稍后将添加的其他按钮）添加操作。最后，你将使用这个按钮来改变餐的评级; 然而，现在你只需检查操作是否正常。

向按钮添加操作

1. 在RatingControl.swift中，后//MARK Initialization段，添加以下内容：

   1. //MARK: Button Action

2. 在注释下，添加以下内容：

   1. func ratingButtonTapped(button: UIButton) {
   2. print("Button pressed