Xcode 用 Storyboard 開發程式記錄 (2/4)

設計畫面

現在要在畫面上加一些元件。

先按下右上角紅框的+號,會出現元件列表,把一個 Push Button 拉到畫面的 View 中。

image

同樣,再拉一個 Label 放在畫面上。

image

設計程式

現在要來寫一段程式,希望按下 Button 之後,Label 的文字變成 Hello World!。

先讓畫面停留在 Main.storyboard,也就是看到設計畫面。

然後按下鍵盤的 option 不放,接著點選紅框的 ViewController.swift

image

此時就會看到畫面與程式並列的情況,此時可以調整一下畫面,讓二者都可以呈現。

image

此時按著鍵盤的 control 鍵,然後把 Label 拉到畫面中的位置,會出現如圖中的線條。

image

放開滑鼠後,會出現如下對話框。

在 Name 填上這個 Lable 的連結名稱,此處為 lbText,然後按下 Connect。

這種連結稱為 Outlet。

image

此時就會看到出現這行程式碼,表示這個 Lable 在此名為 lbText,最前面的白色圓點表示是連結點。

image

若看這個 Label 右方的屬性欄,也可以看到紅框中的連結。

注意,如果要取消連結,除非程式該行要移除,這裡的連結也要移除才行。

image

用同樣的方式,按下 control,也幫 Button 拉一條連結線。

image

這次的 Connection 要選擇 Action,Name 我們取為 btOK,然後按下 Connect。

image

程式中就會多出這二行,表示按下 Button,就會執行這段程式。

image

把程式填上去,其實只有一行

lbText.stringValue = "Hello World!"

image

執行程式

按下上方 Play 的按鈕,就會編譯並執行程式。

image

程式執行的結果。

image

按下 Button,果然文字變成 Hello World! 了。

image

 

重要度:
文章分類:

發表新回應