[Xcode10 實際操作]三、視圖控制器-(9)在Storyboard中使用標簽和按鈕控件
本文將演示標簽和按鈕在故事板中的應用。
在歡迎串口中,點擊創建一個新的項目【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中使用標簽和按鈕控件