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

 

從之前的文章從使用 UIButton 說 Hello 開始說起（上），我們已經成功在畫面上建立一個按鈕，並可以透過事件的方式與畫面中的文字框進行互動，可是這些動作都是已經在程式執行之前早就設定好，萬一在執行的期間我們想要變更他們互動的方式怎麼辦？要如何才能在 Run Time 的環境下製作出按鈕與文字框，然後讓他們彼此之間產生聯繫，這就本篇的主旨。

在之前的文章中，我們只知道透過拖曳拉線的方式使他們產生的連結，按鈕上的事件會觸發我們所寫的函式，但是具體上還不知道是什麼事件，這時候點選專案內的介面設計 .xib 檔案，到 Interface Builder 裡查看按鈕的 Inspector 頁面，找到 Connections 標籤欄位，如下圖。

在圖中可以看到已將按鈕事件 Touch Up Inside 與我們所寫的 onHelloButton: 函式做了連結，當然如果你有其他應用也可以嘗試使用其他事件來與函式做連結，連結的方式是從此標籤頁面中找出合適的事件，並從右手邊的小圓圈內一樣使用拖曳拉線的方式做連結，這裡就不多作討論。

接著回到本篇主題，透過動態新增方式製作我們的介面，如果你是跟著之前的範例一路做過來，那麼可以先到 Interface Builder 裡，移除 Round Rect Button 與 Label，在這裡不需要事先配置這些東西，因為稍後我們要直接透過程式碼來產生它們，與它們之前的互動。

回到程式碼，首先是新增按鈕的動作，我們定義一個新的函式用來新增按鈕，程式碼如下。

- (void)setButtonInterface {
    UIButton *_helloButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    _helloButton.frame = CGRectMake(0, 0, 100, 100);
    _helloButton.center = self.view.center;
    [_helloButton addTarget:self action:@selector(onHelloButton:) forControlEvents:UIControlEventTouchUpInside];

[self.view addSubview:_helloButton];
}

程式碼中我們新增的一個按鈕 _helloButton 加上底線只是要與之前的範例作區隔，沒有特別的意思，之後把按鈕設定城圓角的樣式，就如果你直接重 Interface Builder 裡拉出的 Round Rect Button 一樣，然後設定該按鈕的大小與心點位置，最後是它的事件與所要觸發的函式，還記得剛剛我們所查看過的事件，在這裡它就叫作 UIControlEventTouchUpInside，在觸發事件與函式連結好之後 ，就將此按鈕物件放到畫面上。

之後我們在程式進入點 viewDidLoad 這個函式中加上新增按鈕的 Method，就算完成按鈕部份的設定了。

- (void)viewDidLoad
{
    [super viewDidLoad];

    [self setButtonInterface];
}
完成按鈕之後接下來就是 Label 文字框的部份，由於文字框是在按鈕被按下時才需要有對應的動作，所以這邊乾脆就直接改寫 onHelloButton: 的內容，從這邊直接動態新增我們所要的文字框。

- (IBAction)onHelloButton:(id)sender {
    UILabel *_textLabel = [UILabel new];
    _textLabel.frame = CGRectMake(0, 0, 50, 20);
    _textLabel.center = self.view.center;
    _textLabel.backgroundColor = [UIColor colorWithWhite:255 alpha:0];
    _textLabel.text = @"Hello";
    _textLabel.textAlignment = UITextAlignmentCenter;

[self.view addSubview:_textLabel];
}

在上面程式碼部份，我們新增的一個文字框 _textLabel，同樣的設定他的大小與中心點位置，還有背景顏色的透明度，因為我們希望他的背景是純透明的，接著設定字串 Hello 為文字框的內容並將字體置中，最後是將新產生的文字框物件放到畫面上。

現在，執行看看，畫面上會出現一個按鈕，上面不包含任何文字，因為這時候的文字框還沒有產生，緊接著按下按鈕之後，則會秀出 Hello 的字樣。