從使用 UIButton 說 Hello 開始說起（上）

 

使用 Xcode 撰寫 iOS 程式時，對於一些使用 GUI 介面的撰寫程式新手會感到相當不適，當介面佈局配置好之後，卻不知道要從何處下手開始寫程式，所以這裡我們就從最最最簡單的 Button 與 Label 的關係開始說起，介紹如何使用兩種不同的方式來實做透過操作按鈕來顯示 Hello 文字。

在撰寫 iOS程式時必須要遵守 MVC 設計模式，意思就是將應用物件 Model、顯示介面 View 與使用者的操作互動 Controller 三者分開，白話一點就是寫程式歸寫程式，製作介面歸製作介面，你沒辦法在 Tool Bar 裡拉出一個 Button，然後在上面點兩下就開始撰寫 Button 所觸發的事件，這也就是為什麼我們需要 Xcode 與 Interface Builder 兩套程式來製作 iOS 應用程式。（在 Xcode 4 的版本裡已內建 Interface Builder 的功能）

有上述的觀念之後，就來開始撰寫這個簡單的程式，首先開啟一個新專案之後選擇 View-base Application 樣板，並替我們的專案取個名字叫做「ButtonHello」。

由於是使用樣板的關際，在建立好專案之後會產生一大堆的檔案，不過我們只要將注意力放在包含以下這三個副檔名的檔案上，「.h」也就是標頭檔主要是用來定義該類別 Class 準備要實做的介面，或是該類別 Class 可以使用的變數等，可以粗略知道這個類別 Class 是用來做什麼的；「.m」實作出標頭檔定義的介面，具體知道該類別 Class 的真正運作方式；「.xib」就是製作 iOS 程式的介面，編輯此檔會自動開啟 Interface Builder。

回到主題，我們要實作出按下按鈕就產生 Hello 字串的程式，分析這個程式可以得出以下的流程。

1. 使用者按下按鈕。
2. 觸發按鈕被按下的事件。
3. 由該事件驅動更改 Label 的內容。

由於程式與介面部分能分開製作，所以我們先從程式這方面開始著手，之後才去做介面上的設計，首先找到 ButtonHelloViewController.h 檔案，在此我們要定義兩樣東西，一個是可以讓 Interface Builder 使用的 Button 和 Label，與他們的存取方式，其二是當按鈕事件被觸發時所要做的動作，程式碼如下。

@interface ButtonHelloViewController : UIViewController {
    IBOutlet UIButton *helloButton;
    IBOutlet UILabel *textLabel;
}

@property (nonatomic, retain)UIButton *helloButton;
@property (nonatomic, retain)UILabel *textLabel;

- (IBAction)onHelloButton:(id)sender;

@end

緊接著我們在 ButtonHelloViewController.m 檔案中使用 @synthesize 實作出 Button 和 Label 存取方式並控制他們的記憶體釋放，還有按鈕事件所觸發的具體動作，程式碼如下。

@synthesize helloButton, textLabel;
- (void)dealloc
{
    [textLabel release];
    [helloButton release];

    [super dealloc];
}

- (IBAction)onHelloButton:(id)sender {
    textLabel.text = @"Hello";
}


程式的部份完成之後，接下來就是介面的設計，從左手邊的列表找出並點擊介面設計的檔案 ButtonHelloViewController.xib，在開起 Interface Builder 之後，我們拉出 Round Rect Button 圓角按鈕與 Label 文字框，並調整按鈕大小為 100 x 100，然後將兩個元件對齊放置在畫面正中間。

完成設計之後，就是要將介面上得元件與我們的程式做連結，記得上面我們所分析的三個流程嗎？首先在 File's Owner 上按下滑鼠右鍵並拖曳（這時後會拉出一條藍線）到介面的按鈕上，由於我們只有宣告一個 UIButton 的類別，所以只會出現 helloButton，此時使用滑鼠左鍵選擇 helloButton 就完成第一步程式與介面的連結。

接下來的流程是觸發按鈕被按下的事件，方向是由按鈕指向我們的程式，所以在按鈕上按下滑鼠右鍵並拖曳到 File's Owner 上，由於我們只有宣告一個 UIAction 的類別，所以只會出現 onHelloButton 這個 method，使用滑鼠點擊出現的 onHelloButton:。

最後一個流程就是更改 Label 的內容，在第一個步驟我們已經將介面上 Button 與我們程式內的 helloButton 做連結，這裡如法泡製將介面上得 Label 與程式中的 textLabel 做連結。

完成上述三個程式與介面的連結之後，如果是使用 Xcode 3，記得 Interface Builder 要先存檔，Xcode 再進行編譯行，如果正確無誤，當你點擊按鈕時，按鈕上的文字框內容會從 Label 變成 Hello。