Start Developing iOS Apps (Swift

在本课中，你将为FoodTracker应用实现一个评分控件。当你完成时，应用看上去是这样的：

image: ../Art/ICC_sim_finalUI_2x.png

学习目标

在结束本课时，你将能够：

• 创建自定义源码文件，并将其与storyboard中的元素关联
• 定义一个自定义类
• 实现一个自定义类的初始化器（initializer）
• 把UIStackView作为容器使用
• 理解如何创建可编程的视图
• 为自定义控件添加辅助功能信息
• 使用 @IBInspectable 和 @IBDesignable在Interface Builder中显示和控制自定义视图

创建自定义视图

为了能给菜品评分，用户需要一个控件，这个控件可以让他们选择给菜品分配的星星数量。有很多方法可以实现这个要求，但是在本课中，关注一个简单的方法，通过已存在的视图和控件来构建一个自定义控件。你将创建一个栈视图子类来管理一排相当于星的按钮。你将在代码中完全定义你的自定义控件，然后把它添加到storyboard中。

评分控件显示为一排星星。

image: ../Art/ICC_ratingcontrol_2x.png

用户能够为菜品选择一个评分。当用户点击一颗星星时，这颗星和它之前的星都会被填充。如果用户点击最右边被填充的星星（与当前评分相关的星星），那么评分将会被清除，所有的星星都显示为空。

开始设计UI、交互、控件行为之前，需要创建一个自定义的UIStackView子视图，

创建UIStackView的子类

1. 选择File > New > File（或者按下Command-N）。
2. 在弹出的对话框显示时，选择iOS。
3. 选择Cocoa Touch Class，点解Next。
4. 在Class字段，输入RatingControl。
5. 在Subclass of字段，选择UIStackView。

6. 确保Language选型为Swift。

   
   image: ../Art/ICC_newviewclass_2x.png
7. 点击Next。
   默认保存位置是你的项目目录。
   Group选项默认是你的应用名，FoodTracker。
   再Targets部分，选中你的应用，而应用的测试不要选中。
8. 对话框的其余内容不变，点击Create。
   Xcode创建一个定义RatingControl类的文件：RatingControl.swift。RatingControl是UIView的自定义子类。

9. 如有必要，在Project navigation中，拖拽RatingControl.swift文件到其他Swift文件的下方。

   
   image: ../Art/ICC_dragfile_2x.png
10. 在RatingControl.swift中，删除所有模版自带的注释，这样你就可以使用一个空的区域开始工作了。现在这个实现文件看上去是这样的。

import UIKit     
class RatingControl: UIStackView {      
}

通常创建一个视图有两种方式：通过编程方式初始化视图，或者通过storyboard加载视图。每一种方法都有一个相应的初始化器：inti(farme:)用于编程初始化视图的，init:(coder:)用于从storyboard加载的视图。回想一下，初始化器是一个方法，这个方法为类实例能够使用做准备。它涉及到为每个类的实例变量设置值，以及需要的任何其他设置。

这两种方法你都要在自定义控件中实现。在设计应用时，当你将视图添加到画布中时，Interface Builder会实例化它。在运行时，应用会从storyboard中加在视图。

重写初始化器（initializer）

1. 在RatingControl.swift，在class行的下面，添加一个注释。

//MARK: Initialization

2. 在注释后面，开始键入init。
   代码补全会显示出来。

   
   image: ../Art/ICC_init_codecompletion_2x.png
3. 从可选列表中选择 init(frame: CGRect) ，然后按下回车键。

init(frame: CGRect) {       
}

4. 如果有错误，代码旁边会出现错误和警告的图标，黄色三角图标是警告，红色圆圈是错误。现在，init(frame:)方法有一个错误。点击错误图标，会显示出这个错误更多的信息。

   
   image: ../Art/ICC_init_fixit_2x.png
5. 双击Fix-it来插入override关键字

override init(frame: CGRect) {
}

Swift编译器知道init(frame:)方法时必须被标记的，所以提供了一个fix-it（修复选项），以便在代码中进行修复。Fix-its是编译器提供的，作为代码中错误的潜在解决方案。

6. 添加下面的方法来调用超类的初始化器：

super.init(frame: frame)    

7. 在init(frame:)方法下面，再次键入init，这次在代码补全选项中选择init(coder: NSCoder)。按下回车键。Xcode插入初始化器框架。

init(coder: NSCoder) {    
}

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

注意
Swift处理初始化器不同于其他方法。如果你没有提供任何初始化器，Swift类自动继承所有超类定义的初始化器。如果你实现任何初始化器，你就不能再继承超类的初始化器了；但是，超类能标记一个或多个它的初始化器为required。子类必须实现（或自动继承）所有这些必须的初始化器。此外，子类必须标记这些的初始化器为requrd，表明它们的子类也必须实现这些初始化器。

9. 添加下面这行来调用超类的初始化器。

super.init(coder: coder)

初始化器看上去是这样的：

override init(frame: CGRect) {
    super.init(frame: frame)
}
         
required init(coder: NSCoder) {
    super.init(coder: coder)
}

现在，你的初始化器仅仅是占位符，只是简单调用了超类的实现而已。你将在本课接下来的步骤中添加额外的设置。

显示自定义视图

为了显示自定义控件，你需要在storyboard中添加一个stack view，在stack view 和你写的代码之间建立连接。

显示视图

1. 打开storyboard。

2. 在storyboard中，使用Object library找到Horizontal Stack View（水平栈视图）对象，并且把它拖拽到storyboard场景中，让它在image view下方。

   
   image: ../Art/ICC_addhorizontalstack_2x.png

3. 在horizontal stack view选中状态下，打开Identity inspector。
   回想一下，Identify inspector让你可以在storyboard中编辑一个对象的身份属性，例如它属于哪个类。

   
   image: ../Art/ICC_inspector_identity_2x.png

4. 在Identity inspector中，找到Class字段并设置为RatingControl。

   
   image: ../Art/ICC_identity_ratingcontrol_2x.png

在视图中添加按钮

到这儿，你已经有了一个名为RatingControl的自定UIStackView子类。接下来，你需要添加一些按钮到视图中，以便让用户可以选择评分。从简单开始，在视图中显示一个红色按钮。

在视图中创建按钮

无论使用哪个初始化方法，都要确保按钮被添加。为此，添加一个私有方法，setupButtons()，并且让两个初始化器都调用它。

1. 在RatingControl.swift中，在初始化器方法下面，添加注释

//MARK: Private Methods

在注释隔一点空间创建私有方法——在func前加上private来创建这个方法。私有方法只能在声明它的类中被调用。这可以让你封装和保护方法，确保它们不会被外部文件意外的调用。

3. 在注释下面，添加下面的方法：

private func setupButtons() {    
        }

3. 在setupButtons()方法中，添加下面几行代码来创建红色的按钮。

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

这里，你使用了UIButton类的方便初始化器。这个初始化器调用init(frame:)并传递给长方形的尺寸为0。从0长度开始是没有问题的，因为你使用Auto Layout（自动布局）。这个stack view 将自动定义按钮的位置，并且你将通过约束来定义按钮的尺寸。
你使用红色以便可以看到它的位置。如果你喜欢，可以使用其他UIColor预定义的颜色，比如blue或green。

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

// 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属性来创建它的约束。然而，当你使用Auto Layout时，你是要将这些自动生成的约束替换掉。所以，把translatesAutoresizingMaskIntoConstraints属性值设置为false可以移除这些自动生成的约束。

注意
这一行不是绝对的。当你添加视图到stack view，这个stack view会自动设置视图的translatesAutoresizingMaskIntoConstraints属性为false。但是，当使用Auto Layout时，无论何时都禁用自动生成约束是一个好习惯。这样就不会在真的需要的时候忘了写了。
button.heightAnchor 和button.widthAnchor开始的行创建了定义按钮高和宽的约束。每行都执行下面的步骤：

1. 按钮的heightAnchor 和 widthAnchor属性给访问布局锚（layout anchor）提供了入口。你使用布局锚来创建约束——在本例中，约束分别定义视图高和宽。
2. constraint(equalToConstant:)方法返回一个约束，它为视图的高或宽定义了一个常量。
3. 约束的isActive属性是用来激活和禁用这个约束的。当你设置这个属性为true时，系统添加这个约束到当前视图，并激活它。
   这两行代码加在一起把按钮定义为一个固定大小的对象（44点*44点）。
4. 最后，添加这个按钮到栈中：

// 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()
        }

检查点：运行应用。你应该能看到一个小的红色正方形视图。这个红色的正方形就是你在初始化器里添加的按钮。

image: ../Art/ICC_sim_1redbutton_2x.png

你需要为这个按钮添加动作（稍后你还要为其他按钮添加）。最后，即娘使用这个按钮来改变菜品的评分；但是，现在你需要检查这个操作是否正常。

给按钮添加一个动作

1. 在RatingControl.swift，在//MARK Initialization部分后 main，添加注释：

//MARK: Button Action

3. 在注释下面，添加代码：

    func ratingButtonTapped(button: UIButton) {
            print("Button pressed 👍")
        }

使用print()函数来检查ratingButtonTapped(_:)动作是否按预期连接到了按钮。这个函数会在Xcode调试控制台打印标准输出。控制台一个有用的调试机制，它出现在编辑器的底部。
稍后，你将把这个调试实现替换为更有用的实现。

5. 找到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)
        }

7. 紧挨着 // Add the button to the stack注释上面，添加下面这段代码：

// Setup the button action
        button.addTarget(self, action: #selector(RatingControl.ratingButtonTapped(button:)), for: .touchUpInside)

在之前的课程中，你使用target-action模式来连接storyboard中的元素到代码中的action方法。这个addTarget(, action:, for:)方法在代码中起到相同的作用。你把 ratingButtonTapped(:)action方法添加到了button对象上，它将在.TouchDown事件发生的时候被触发。
这段代码做了很多事。这是分析：

• 目标是self，它指向当前的类的实例。在本例中，它指向的是设置这些按钮的RatingControl对象。
• 这个#selector表达式返回的是提供方法的Selector（选择器）的值。一个selector是一个识别这个方法的不透明的值。虽然很多新的API用block代替了selector，但仍然有很多方法，比如performSelector(:) 和 addTarget(:action:forControlEvents:)，在使用selector作为参数。它系统在按钮被点击的时候调用动作方法。
• UIControlEvents选项定义了一些控件能够响应的事件。通常按钮响应的是.touchUpInside事件。当用户触摸按钮然后在按钮的范围内抬起手指的时候发生。这个事件比 .touchDown更好，因为用户能够把手指移动到按钮范围之外再抬起，这样就可以取消事件了。
• 注意因为你没有使用Interface Builder，所以你不需要使用IBAction属性定义action方法；你只需要像定义其他方法一样定义动作方法就好了。你能使用的方法可以是不带参数的、只带sender参数的，或者带sender和event两个参数。

func doSomething()
        func doSomething(sender: UIButton)
        func doSomething(sender: UIButton, forEvent event: UIEvent)

现在你的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
            
            // Setup the button action
            button.addTarget(self, action: #selector(RatingControl.ratingButtonTapped(button:)), for: .touchUpInside)
            
            // Add the button to the stack
            addArrangedSubview(button)
        }

检查点：运行应用。当你点击红色正方形时，你能够在控制台看到“Button pressed”消息。

image: ../Art/ICC_console_buttonpressed_2x.png
现在是时候想一想关于RatingControl类要用什么样的信息来表示评分。你需要跟踪评分值，以及用户用来点击设置评分的按钮。你可以使用Int类型来表示评分值，按钮可以存放在一个数组中。

添加评分属性

1. 在RattingControl.swift中，找到类声明行：

class RatingControl: UIView {

3. 在这行下面，添加下面的代码：

//MARK: Properties
        private var ratingButtons = [UIButton]()
         
        var rating = 0

这创建了两个属性。第一个属性包含按钮列表。你不想让RattingControl类以外的的类访问这些按钮；所以，你把它声明为私有。第二个属性包含了控件的评分。你需要别的类能够读写这个值。默认情况下时内部访问，保持不变。这样你就能从应用内的其他类来访问这个值。

现在，在视图中你有一个按钮，但你一共需要5个按钮。使用for-in循环来创建5个按钮。for-in循环遍历一个序列，例如数字范围，多次执行一组代码。

创建五个按钮

1. 在RatingControl.swift中，找到setupButtons()方法，并在方法的内容外层添加一个for-in循环，就像这样：

for _ in 0..<5 {
            // 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
            
            // Setup the button action
            button.addTarget(self, action: #selector(RatingControl.ratingButtonTapped(button:)), for: .touchUpInside)
            
            // Add the button to the stack
            addArrangedSubview(button)
        }

通过选中for-in中的所有行并按下Control-I，确保这些行都缩进。Make sure the lines in the for-in loop are indented properly by selecting all of them and pressing Control-I. 在半开放范围运算符（half-open range operator， ..< ）不包含上限数字，所以这个范围是0-4，总共循环五次，绘制5个按钮而不是仅仅一个。下划线（_）表示一个通配符，当你不需要知道当前正在执行的迭代的次数时，可以使用它。

3. 在循环的结束花括号（{）上面，添加这个代码：

    // Add the new button to the rating button array
        ratingButtons.append(button)

当你创建一个按钮，你就把它添加到ratingButtons数组中，用来跟踪它。

现在你的setupButtons()方法看上去是这样的：

private func setupButtons() {
            
            for _ in 0..<5 {
                // 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
                
                // Setup the button action
                button.addTarget(self, action: #selector(RatingControl.ratingButtonTapped(button:)), for: .touchUpInside)
                
                // Add the button to the stack
                addArrangedSubview(button)
                
                // Add the new button to the rating button array
                ratingButtons.append(button)
            }
        }

检查点：运行应用。注意stack view是如何布局这些按钮的。它们被水平排列的，但是它们之间没有间隔——这使它们就像一个红色块。

image: ../Art/ICC_buttonswithoutspace_2x.png

为了修复这种情况，打开Main.storyboard并选择RatingControl栈视图，代开Attributes inspector，设置Spacing属性为8。

image: ../Art/ICC_setstackspacing_2x.png

检查点：再次运行应用。现在按钮的布局符合期望了。注意，现在点击任何一个按钮仍然调用ratingButtonTapped(button:)，并在控制台上打印一条消息。

image: ../Art/ICC_sim_5redbuttons_2x.png

使用Debug区域开关折叠控制台。

image: ../Art/debug_toggle_2x.png

（未完待续......）