[Xcode 实际操作]三、视图控制器-(9)在Storyboard中使用标签和按钮控件

目录：[Swift]Xcode实际操作

本文将演示标签和按钮在故事板中的应用。

在欢迎串口中，点击创建一个新的项目【Create a new Xcode project】

【Single View App】->【Next】->【Product Name】：StoryboardProject

->【Create】->【Main Interface】:Main.storyboard

打开编辑故事板文件。

然后在根视图控制器中点击，以选择视图控制器的根视图。

接着点击库图标(项目地址右侧)，打开控件列表。

需要往故事板中添加一个标签控件。

在搜索框内输入关键词，搜索标签控件。

然后在标签控件上双击，以插入该控件。

在标签左侧的定界框上按下手指，并向左侧拖动，以调整标签对象的宽度。

【Alignment】:点击居中显示图标，设置标签对象的文字对齐方式。

【Font】:设置字体大小

【Color】:设置字体颜色

点击库图标，打开控件列表，需要往故事板中添加一个按钮控件。

在搜索框内输入关键词，搜索按钮控件。

然后在按钮控件上双击，以插入该控件。

接着在按钮上按下手指，并向右下方拖动，以调整按钮控件的位置。

点击右侧倒数第二个图标：尺寸检查器。进入尺寸检查器面板。

【Width】:按钮的宽度，设置好后按下【Enter】

【Height】:按钮的高度，设置好后按下【Enter】

【X】:按钮的水平坐标

【Y】:按钮的垂直坐标

击右侧倒数第三个图标：属性检查器。进入属性检查器面板。

在文字输入框内，输入按钮的标题文字，设置好后按下【Enter】

点击垂直滚动条，查看隐藏的按钮属性设置面板。

【Background】:Custom(棕色)

现在需要将故事板中的标签和按钮，与类文件中的属性相关联。

首先点击显示辅助编辑器按钮，

显示与当前视图控制器，具有一一对应关系的类文件。

然后点击显示或隐藏检查面板按钮，隐藏检查器面板。

在按钮控件上方，按下鼠标右键，然后拖动到视图控制器类文件。

也可以按下键盘上控制键的同时，然后使用鼠标左键来拖动。

在连接类型列表中，选择动作选项，

【Connection】:Action

在代码文件中，为故事板中的按钮，创建一个响应点击事件的方法。

然后设置点击事件方法的名称

【Name】：changeLabel

最后点击【Connect】按钮，完成连接设置

此时，在类文件【ViewController】中，自动生成了一个方法。

当故事板中的按钮被点击时，将调用此方法。

方法名称左侧的【@IBAction】，表示该方法来自故事板。

接着选择故事板中的标签对象。

在标签控件上方，点击鼠标右键，然后拖动到视图控制器类文件。

保持默认的连接类型

【Connection】:Outlet(默认)

然后输入标签控件在类文件中的属性名称。

【Name】：myLabel

最后点击【Connect】按钮，完成连接设置

此时在类文件中，自动生成了一个标签属性。

属性左侧的【@IBOutlet】,表示该属性来自故事板。

可以在代码中使用该属性，访问故事板中的标签控件。

接着打开视图控制器代码文件【ViewController.swift】

然后点击显示标准编辑器按钮，隐藏代码编辑器的显示。

import UIKit

class ViewController: UIViewController {

    //可以在代码中使用该属性，访问故事板中的标签控件。
    @IBOutlet var label: UILabel!

    //现在来补充一下，按钮点击事件的方法内容
    @IBAction func changeLabel(_ sender: AnyObject) {
        //当点击按钮时，修改标签控件的文字内容
        label.text = "First storyboard"
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}