本文將演示常用的圖像視圖控件在故事板中的使用。

打開故事板文件【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（輸入項目中的圖片名稱）

點擊【隱藏或顯示檢查器】按鈕，隱藏檢查器面板。

打開視圖控制器代碼文件，需要補充一點簡單的代碼。

現在開始編寫代碼，完成故事板中，三個控件的交互邏輯。

 1 import UIKit
 2 
 3 class ViewController: UIViewController {
 4 
 5     //首先定義一個變量，用來表示當前正在顯示的圖像序號
 6     var currentImageNum = 1
 7 
 8     @IBOutlet weak var pictureName: UILabel!
 9     @IBOutlet weak var imageView: UIImageView!
10     override func viewDidLoad() {
11         super.viewDidLoad()
12         // Do any additional setup after loading the view, typically from a nib.
13         
14     }
15     @IBAction func showNextImage(_ sender: Any) {
16         //當點擊按鈕時，使圖像序號遞增
17         currentImageNum += 1
18         //然後使用遞增後的圖像序號，生成下一張圖片的名稱
19         let picName = "Pic\(currentImageNum)"
20         //加載項目中對應名稱的圖像，然後將圖像指定給圖像視圖
21         imageView.image = UIImage(named: picName)
22         //同事更改標簽控件上的文字內容。
23         pictureName.text = picName
24     }
25     
26     override func didReceiveMemoryWarning() {
27         super.didReceiveMemoryWarning()
28         // Dispose of any resources that can be recreated.
29     }
30 }

[Xcode10 實際操作]三、視圖控制器-(10)在Storyboard中使用圖像視圖控件