Swift 入門指南 V1.00 - 單元 22 - 編輯 Storyboard

Swift 入門指南 V1.00 - 單元 22 - 編輯 Storyboard

點擊左側導覽列 Main.storyboard 的地方,編輯區就會切換到 Storyboard

位置調正來看,最上側是選單列,我們保留預設即可,中間是一個名為 Window 的視窗,視窗內印著 View Controller ,這是視窗物件,視窗的標題列要由這裡來改,不過先保留預設好了

下面則是實際視窗內容的編輯區

點擊這裡,右側工具列就出現相對應的項目

先把焦點移到右側下方,可以用滑鼠拉高一點

然後點擊 Object library 的頁籤,從這裡可以找到各種視窗元件

先找到 Label 拖曳到視窗編輯區

在視窗編輯區拖曳視窗元件就會出現對齊的格線

確定位置後,快速的點擊兩下就可編輯 Label 顯示的文字

然後拖曳第二個 Label 進來,對齊兩個 Label

接著到工具列屬性區的地方找到文字對齊的選項,兩個 Label 都選向左對齊,這是第一個 Label

這是第二個 Label

接著依序放入兩個 Text Field ,七個 Push Button ,每個 Push Button 都改成相對應的文字,如果視窗寬度不夠,可以拖曳邊緣調整寬度

最後再加入一個 Label 於按鈕下方,文字設定為 Something happened.... ,調整好高寬,GUI 外觀就大功告成了

不過執行後點擊按鈕都沒有動作,下一個單元我們繼續介紹 Outlet 與 Action 的觀念,使之點擊按鈕就會讓 GUI 有所反應。
訂閱:
張貼留言 (Atom)
window.___gcfg = { 'lang': 'zh-TW' };
沒有留言:
張貼留言