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

代码参见 04_自定义控件

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

学习目标

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

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

定义自定义类

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

使用

UIStackView

 作为一个容器

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

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

一起工作

@IBInspectable

和

@IBDesignable

显示和控制界面生成器自定义视图

创建自定义视图

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

评分控件显示为一行星。



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

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

UIStackView

）的子类。

创建UIStackView的子类

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

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

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

在类字段类型

RatingControl

。

在现场“的子类”，选择

UIStackView

。

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



点击下一步。

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

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

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

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

Xcode创建定义文件

RatingControl

类：

RatingControl.swift

。

RatingControl

是自定义视图的子类

UIView

。

如果有必要，在Project Navigator中，拖动

RatingControl.swift

，这样它的定位下的其他雨燕文件的文件。



在

RatingControl.swift

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

实现应该看起来像这样：

import

UIKit

class

RatingControl:
UIStackView {

}

通常，您可以创建两种方式之一一种观点：通过编程初始化的观点，或通过允许以期在故事板加载。还有每种方法相应的初始化：

init(frame:)

对于编程初始化视图，并

init?(coder:)

加载从故事板视图。回想一下，一个初始化是准备使用的类，它包括设置每个属性的初始值，并执行任何其他安装的实例的方法。

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

覆盖初始化

在

RatingControl.swift

中，下

class

行，添加此评论。

//MARK:
Initialization

在注释下，开始打字

init

。

代码完成覆盖显示。



选择

init(frame:
CGRect)

从列出的选项，然后按回车键。

Xcode为你插入初始化框架。

init(frame:

CGRect) {

}

错误和警告在代码旁边显示为黄色三角形图标（警告）和红色圆圈（错误）。目前，该

init(frame:)

方法有一个错误。单击错误图标以显示有关错误的更多信息。



双击修复-它插入

override

关键字。

override

init(frame:

CGRect) {

}

雨燕的编译器知道

init(frame:)

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

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

super.init(frame:

frame)

下面的

init(frame:)

方法，开始键入

init

再次，选择的init（编码器：NSCoder）从代码完成选项。按返回。

Xcode为你插入初始化框架。

init(coder:

NSCoder) {

}

使用Fix-它插入

required

关键字。

注意

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

required

。子类必须实现（或自动继承）所有必需的初始化器。此外，子类必须标明其初始化为

required

，表明其子类必须实现初始化。

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

super.init(coder:

coder)

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

override

init(frame:

CGRect) {

super.init(frame:

frame)

}

required

init(coder:

NSCoder) {

super.init(coder:

coder)

}

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

显示自定义视图

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

显示视图

打开你的故事板。

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



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

。

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



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

RatingControl

。

向视图中添加按钮

在这一点上，你已经有了一个自定义的基本

UIStackView

子类，叫做

RatingControl

。接下来，您需要向视图中添加按钮，以允许用户选择评分。从一个简单的开始，像一个红色按钮出现在你的视图。

在视图中创建按钮

确保添加了按钮，而不管调用哪个初始化程序。要做到这一点，添加一个私有方法

setupButtons()

，并呼吁从两个初始化该方法。

在

RatingControl.swift

，根据初始化方法，添加此评论。

//MARK:
Private Methods

使用此评论下方的空间来创建私有方法的方法与

private

在之前修改

func

介绍人。私有方法只能由声明类中的代码调用。这允许您封装和保护方法，以确保它们不会从外部意外或意外调用。

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

private

func
setupButtons() {

}

在该

setupButtons()

方法中，添加以下代码行来创建一个红色的按钮：

//
Create the button

let

button =
UIButton()

button.backgroundColor
=
UIColor.red

在这里，您使用的是一

UIButton

类的初始化方便。此初始化呼叫

init(frame:)

并传递在零大小的矩形。从零尺寸的按钮开始是好的，因为您使用的是自动布局。堆栈视图将自动定义按钮的位置，并且您将添加约束来定义按钮的大小。

您正在使用

red

，因此很容易，看看那里的看法是。如果你愿意的话，用其它预定义的一个

UIColor

值，而不是像

blue

或

green

。

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

//
Add constraints

button.translatesAutoresizingMaskIntoConstraints
=
false

button.heightAnchor.constraint(equalToConstant:

44.0).isActive =

true

button.widthAnchor.constraint(equalToConstant:

44.0).isActive =

true

第一行代码禁用按钮的自动生成的约束。当以编程方式创建一个视图，它的

translatesAutoresizingMaskIntoConstraints

属性默认为

true

。这告诉布局引擎创建定义基于视图的视图的大小和位置的限制

frame

和

autoresizingmask

特性。通常，当您使用自动布局时，您要用自己的自动生成的约束替换这些自动生成的约束。要删除自动生成的约束，设置

translatesAutoresizingMaskIntoConstraints

属性

false

。

注意

这一行不是绝对必要的。当您添加视图到堆栈视图，堆栈视图自动设置视图的

translatesAutoresizingMaskIntoConstraints

财产

false

。但是，当使用Auto
Layout时，每当以编程方式创建视图时，显式禁用自动生成的约束是一个好习惯。这样，你不会不小心忘了禁用它们，当它实际上很重要。

线开始

button.heightAnchor

并

button.widthAnchor

创建定义按钮的高度和宽度的限制。每行执行以下步骤：

按钮的

heightAnchor

和

widthAnchor

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

锚的

constraint(equalToConstant:)

方法返回一个定义一个恒定高度或宽度为视图的约束。

约束的

isActive

属性激活或停用该约束。当您将此属性设置为

true

，该系统将约束添加正确的观点，并激活它。

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

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

//
Add the button to the stack

addArrangedSubview(button)

该

addArrangedSubview()

方法将您创建的被管理视图列表按钮

RatingControl

堆栈视图。此操作会将视图的一个子视图

RatingControl

，并且还指示

RatingControl

创建管理控件中的按钮的位置所需的约束。

你的

setupButtons()

方法应该是这样的：

private

func
setupButtons() {

//
Create the button

let

button =
UIButton()

button.backgroundColor
=
UIColor.red

//
Add constraints

button.translatesAutoresizingMaskIntoConstraints
=
false

button.heightAnchor.constraint(equalToConstant:

44.0).isActive =

true

button.widthAnchor.constraint(equalToConstant:

44.0).isActive =

true

//
Add the button to the stack

addArrangedSubview(button)

}

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

override

init(frame:

CGRect) {

super.init(frame:

frame)

setupButtons()

}

required

init(coder:

NSCoder) {

super.init(coder:

coder)

setupButtons()

}

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



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

向按钮添加操作

在

RatingControl.swift

中，后

//MARK
Initialization

段，添加以下内容：

//MARK:
Button Action

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

func

ratingButtonTapped(button:

UIButton) {

print("Button
pressed