本文將演示標簽和按鈕在故事板中的應用。

在歡迎串口中，點擊創建一個新的項目【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】

然後點擊顯示標準編輯器按鈕，隱藏代碼編輯器的顯示。

 1 import UIKit
 2 
 3 class ViewController: UIViewController {
 4 
 5     //可以在代碼中使用該屬性，訪問故事板中的標簽控件。
 6     @IBOutlet var label: UILabel!
 7 
 8     //現在來補充一下，按鈕點擊事件的方法內容
 9     @IBAction func changeLabel(_ sender: AnyObject) {
10         //當點擊按鈕時，修改標簽控件的文字內容
11         label.text = "First storyboard"
12     }
13     
14     override func viewDidLoad() {
15         super.viewDidLoad()
16         // Do any additional setup after loading the view, typically from a nib.
17     }
18 
19     override func didReceiveMemoryWarning() {
20         super.didReceiveMemoryWarning()
21         // Dispose of any resources that can be recreated.
22     }
23 }

[Xcode10 實際操作]三、視圖控制器-(9)在Storyboard中使用標簽和按鈕控件