[Xcode 實際操做]3、視圖控制器-(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】

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

 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 }