Interface Builder Tutorial - 1

一般開發者在開發界面程式時, 都會需要借助視覺化的工具來縮短開發時間, 例如最常看到的如 Borland C++ Builder (BCB). 這類工具主要概念是"所見即所得" , 簡單的說就是一些常看到的使用者介面如 button, label, textfield, ....等,  都可以透過 BCB 等這類工具讓開發者直接用拖曳元件的方式來快速達成開發目標, 當然這些工具都是屬於 windows 的, 那究竟在 iPhone Programming 的領域中是否也有這類工具呢? 不怎麼貼心的 Apple 當然也提供了視覺化開發工具 "Interface Builder".
在筆者使用的這段時間內, 發現到雖然 Interface Builder 可以快速縮短開發時間, 這點的確是不容置疑的, 但在使用上卻發現許多不直覺的地方 (相對於 windows 上的視覺化開發工具而言), 不過整體來說是還可以接受的範圍.
要開始使用 Interface Builder 之前, 你可以先用 Xcode 新建一新的 iPhone Project, 建立之後會在左側 Project tree 裡看到一個屬於 Interface Builder 的檔案"MainWindow.xib"

 直接點擊此檔案開啓 Interface Builder, 在裡面會看到幾個基本的元件 .xib window,

Inspector

Libaray,

我們要做的第一步驟就是直接編輯  window 視窗, 首先直接點擊 .xib 裡的 window, 且在右方 Library 裡找到 "Label" 和 "Round Rect Button", 並直接將她們拖曳到 window 畫面中, 分別編輯上面的顯示字串, 完成時大概會有類似下面的圖示

完成之後, 接下來就是要開始編寫 button & label 相關的 code 了, 在 AppDelegate.h 裡加入 class member & function

IBOutlet UILabel *text;

-(void) BtnAction:(id) sender;

並且在 AppDelegate.m 裡面實作 BtnAction, 我們在裡面實作了一個非常簡單的功能, 就是當點擊時, 會去更改 Label 的顯示字串

-(void) BtnAction:(id) sender{

    [text setText:@"sYou Pressed!"];

}

當完成上述動作之後, 最後我們要做的就是將 UI 和 code 之間做個"關連", 這步驟就是和一般 window 最大不同的地方, 一般若漏掉"關連"這動作, 你所寫的 code 就不會反應到畫面上, 而"關連"的方式很簡單, 我們再次打開 MainWindow.xib, 然後在 MainWindow.xib 視窗裡選擇 xxxx_AppDelegate,此時就會在 Connection Inspector 裡看到剛剛所新增的 text & BtnAction

"關連" 這動作只要你按住 text 右方的圈圈, 並拖拉至剛剛所產生的 Label 即可, 而 BtnAction 也是一樣, 拖拉到 Button 的位置上, 但是因為觸發 Button 的方式有很多種, 所以當你拖曳過去之後, Interface Builder 會要你選擇觸發方式, 我們此時選 "Touch Up Inside"

完成之後, 儲存, 編譯, 執行, 應該就可以看到此次練習的成果了.

完整範例可以到 這裡 下載