[Xcode 实际操作]三、视图控制器-(10)在Storyboard中使用图像视图控件

目录：[Swift]Xcode实际操作

本文将演示常用的图像视图控件在故事板中的使用。

打开故事板文件【Main.storyboard】点击选择视图控制器的根视图。

点击库图标，打开控件库面板。

在控件库搜索框内，输入控件名称，在控件库中，快速定位目标控件。

然后在标签控件上双击，导入所需的控件。

在图像视图右侧的定界框上按下手指，并向右拖动，以调整标签视图的宽度。

将标签控件向下方拖动一段距离。

然后点击库图标，再次打开控件库面板。

在控件库搜索框内，输入控件名称，在控件库中，快速定位目标控件。

然后在按钮控件上双击，导入所需的控件。

在图像视图右侧的定界框上按下手指，并向右拖动，以调整按钮视图的宽度。

然后点击库图标，再次打开控件库面板。

在控件库搜索框内，输入控件名称，在控件库中，快速定位目标控件。

然后在图像视图控件上双击，导入所需的控件。

在图像视图上方的定界框上按下手指，并向上拖动，以调整按钮视图的高度。

接着选择标签控件，然后按下【Shift】键，以同时选择多个控件。

在按下【Shift】键的同时，点击按钮控件，以同时选择两个控件。

然后将选择的两个控件，向下方拖动一段距离。

点击选择标签控件。接着点击右上角 的【显示或隐藏检查器图标】

点击【属性检查器图标】，打开属性检查器。

【Alignment】:居中，将图标控件里的文字居中对齐

【Color】:Custom(红色)，设置标签控件颜色

【Background】:Custom(灰色)

在标签控件下方的定界框上按下鼠标，并向下方拖动，以增加标签控件的高度。

点击选择按钮控件，接着设置按钮的外观属性。

【Background】:Custom(灰色)

【Text Color】:设置文字颜色

Title下方，设置按钮的标题文字。按下【Enter】完成标题文字的输入。

点击【显示或隐藏辅助编辑器按钮】，打开辅助编辑器。

如果右侧的类文件，与故事板当前视图控制器不匹配，则点击项目地址栏右侧下方的图标，

选择与视图控制器对应的类文件。

在弹出的列表中，选择【Automatic】(自动选项)，然后选择当前视图控制器对应的类文件。

选择图像视图控件，将图像视图控件与类文件进行连接。

在图像视图控件上，按下鼠标右键，并拖动至类文件。

在Name名称输入框内，输入图像视图在类文件中对应的属性名称。

【Name】:imageView

然后点击连接【Connect】按钮。

点击选择故事版中的标签控件。在标签控件上按下鼠标右键，并拖动至类文件。

在Name名称输入框内，输入图像视图在类文件中对应的属性名称。

【Name】:pictureName

然后点击连接【Connect】按钮。

点击选择故事板中的按钮控件。在按钮控件上按下鼠标右键，并拖动至类文件。

在Name名称输入框内，输入按钮点击事件在类文件中对应的属性名称。

【Name】:showNextImage

然后点击连接【Connect】按钮。

点击【显示标准编辑器】按钮，隐藏右侧的辅助编辑器。

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

选中图片视图控件，给图像是图指定默认的显示图片。

【Image】:Pic（输入项目中的图片名称）

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

打开视图控制器代码文件，需要补充一点简单的代码。

现在开始编写代码，完成故事板中，三个控件的交互逻辑。

import UIKit

class ViewController: UIViewController {

    //首先定义一个变量，用来表示当前正在显示的图像序号
    var currentImageNum = 1

    @IBOutlet weak var pictureName: UILabel!
    @IBOutlet weak var imageView: UIImageView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
    }
    @IBAction func showNextImage(_ sender: Any) {
        //当点击按钮时，使图像序号递增
        currentImageNum += 1
        //然后使用递增后的图像序号，生成下一张图片的名称
        let picName = "Pic(currentImageNum)"
        //加载项目中对应名称的图像，然后将图像指定给图像视图
        imageView.image = UIImage(named: picName)
        //同事更改标签控件上的文字内容。
        pictureName.text = picName
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}