上一回 我們學習了用Interface Builder來製作程式的介面。這回我們來學習程式中具體的操作和處理。
確認操作與處理
首先讓我們確認一下使用者怎樣操作控制項,程式應該怎樣處理這些操作。
這個應用程式是通過使用者輸入商品價格,並選擇折扣比率,來計算打折後的價格。使用者需要以下兩步操作 :
這之後,程式中計算打折後的金額並表示輸出。
Outlet與Action
在我們開始編程之前,需要記住以下兩個單詞。在以後我們會經常用到它們。
Outlet
通過outlet,我們可以從控制項中取出資訊,或者將新的資訊賦予控制項。按照詞典上的解釋outlet可以理解為插座的意思。介面上配置的每個控制項,就像是通過“插座”與介面串連。這裡,將程式設定在“插座”內,實現控制項與介面間的資訊交換。
Action
Action就是指程式中具體的行為,處理。應用程式將按照Action內實現的內容來處理。比如,「按下按鈕後的處理」或者「輸入文字後的處理」等等。
編寫程式
接下來我們就開始寫程式了。最初的程式在Interface Builder上編寫。
產生Outlet
剛才已經說到,這個程式中需要編程的控制項分別是使用者輸入商品金額與選擇折扣率,以及在畫面上顯示打折後的金額。就是說,我們需要產生3個Outlet。
File's Owner中表示程式的ICON
在Interface Builder內部,程式的實體用ICON來表示。其中「File's Owner」的ICON就是表示程式實體。在File's Owner中可以產生Outlet。
選擇File's Owner,點擊Inspector的最右邊的Identity標籤。其中「Class Outlets」項目就是Outlet的表格。點擊「+」可以追加新的Outlet。
追加Outlet
首先我們建立一個名為「motone」的Outlet,代表商品的原價。第二個為「waribiki」,代表選擇的折扣率。最後建立一個名為「kekka」的Outlet,代表打折後的價格,用來放入介面中的控制項。像是所示:
產生Action
與Outlet一樣,ACtion也是由Inspector做成。在剛才的 Class Outlets 之上有「Class Actions」。這裡我們只需要處理「表示打折以後的價格」,在Class Actions內追加一個Action就可以了。預設命名為「myAction1: 」。
追加Action
與控制項關聯
接下來,我們將做好的Outlet與控制項關聯起來。在“File's Owner”ICON上點右鍵,在出現的視窗上可以看到剛才產生的Outlet和Action。如:
每個Outlet的右邊都有一個圓圈的選擇按鈕(滑鼠游標移動到其上面後,會變成一個加號),將其拖拽到對應介面上的控制項。這之後,從圓圈到控制項會有一根線串連起來,控制項也會被藍色的線條框包住。如:
關聯之後,Outlet的名稱的右側將表示控制項的名稱。同樣的方法將3個控制項都與對應的Outlet關聯。如果想要取消關聯,點擊表示部分的×後就可以了。
Action的接續方法與Outlet一樣,也是通過拖拽來實現。這裡我們就將「myAction1: 」右邊的圓圈按鈕與對應的Segmented控制項關聯。如:
關聯之後,會讓你選擇具體的行為事件,這裡因為是更改折扣比率,所以選擇「Value Changed」。
建立檔案
截止到現在,我們還沒有寫過一行代碼。其實,在你將Outlet與控制項關聯的時候,Interface Builder已經代你寫了不少程式了。先讓我們來確認一下:
選擇File's Owner,在Interface Builder菜單上點擊[File]→[Write Class Files...]儲存檔案到(BargainSaleViewController.m)。
如果已經有檔案存在了,就覆蓋它。這樣,原始碼檔案就被儲存起來了。我們開啟來看看。
Outlet被定義在.h標頭檔中(BargainSaleViewController.h)。你可以開啟它確認一下。「motone」「waribiki」「kekka」3個Outlet,Action「myAction1: 」。
編寫Action
接下來我們來實現具體的Action。開啟有「myAction1:」的.m檔案(BargainSaleViewController.m)。在「myAction1:」函數內用下面的代碼來實現
(IBAction)myAction1:(id)sender {
int kakaku = [[motone text] intValue];
switch([waribiki selectedSegmentIndex]){
case 0:
kakaku = kakaku * (1.f - 0.2f);
break;
case 1:
kakaku = kakaku * (1.f - 0.3f);
break;
case 2:
kakaku = kakaku * (1.f - 0.4f);
break;
case 3:
kakaku = kakaku * (1.f - 0.5f);
break;
default:
break;
}
[kekka setText:[NSString stringWithFormat:@"%d", kakaku]];
}
之後編譯,就可以啟動模擬器來測試了。
作者:易飛揚