實作IBOutlet 與IBAction

對於MVC架構的xcode來說,Storyboard 和Controller 就像是在兩個不同的世界,畫面上的物件,和Controller 裡的程式碼毫不相干。

所以,我們需要幫他牽上的一條條的藍線,讓他知道物件之間的關聯,

這也是MVC架構裡,很重要的關聯。

接下來,就用下面這個例子來說明IBOutlet 與IBAction,我想做的功能是從TextField 打字,然後按Enter 之後,會把字傳到上方的大框框。

  1. 首先,我在Storyboard 做了一個像是下圖的畫面:

2. 右上角兩個圈圈的圖示,可以把開發的區塊分成兩半,Storyboard 跟他對應的Controller。

3. 然後我們現在要來建立這兩個世界之間的關聯,在此先簡單說明一下IBOutlet 跟IBAction。

IBOutlet有點像是識別標籤的感覺,它目的是讓Controller 讀取或是修改這個物件。而IBAction是當某個動作被觸發時,用這個標籤告訴他應該連結到程式碼的什麼地方。

等下我會需要讀取小框框TextField 內的文字;修改大框框TextView的文字,所以我先幫他們各拉一個IBOutlet的關聯:

連線的方法:按住control,然後從畫面上的物件拖曳到程式碼的區塊再放開。要注意放開的位置,要在class之下,function之外。

現在,程式已經認得那這兩個框框,可以存取他們。

另外我希望當畫面上的Enter 被按下的時候,能夠把小框框的字加到大框框裡,所以這邊要拉一個IBAction。

需要注意的是Connection 那邊要記得設成Action,而Event 那邊預設帶的是Touch Up Inside,是指手指按下再離開後觸發的意思,這邊可以依照需要來設定各種Event。

4. 現在,我可以在剛才拉IBAction 時,程式幫我自動產生的function裡寫程式,交待一下我希望他做的事情了!

@IBAction func enterButton(_ sender: AnyObject) {
   if insertTextField.text != nil{
      wordsTextView.text = wordsTextView.text + “\n” +      insertTextField.text!
      insertTextField.text = nil
}}

5. 於是,透過藍線的介紹,原本毫無相關的兩個世界,有了密不可分的關聯,最後跑出來像下面這樣:

補充說明:

如果要刪除程式碼或是畫面上的物件,一定要手動兩邊都刪除才行喔!

對物件按右鍵,會出現他所有的關聯,對著你要刪除的關聯按叉叉,就可以刪除囉!

對物件按右鍵,會出現他所有的關聯

GITHUB:

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.