/* syntax highlight */ /* end of syntax highlight */

2010年12月20日 星期一

iphone app 開發 (二十七) 基本按鈕 (button) 互動方式

Bookmark and Share

螢幕快照 2010-12-21 下午12.28.23

此篇範例將會教導你如何製造基本的互動

即你按下了某個按鈕, 讓某個 Label 上面的字跟著變動

很簡單, 可以快速學會

本教學分成幾個階段

 

第一階段為宣告物件

第二階段為實作物件邏輯

第三階段為安排物件

第四階段為編譯

 

第一階段為宣告物件

首先開啟專案時請選擇 “View-based Application”

物件總共會有三個 (2 button and 1 label)

但是類型只有兩種

按紐的部份我們之後可以用 button title 來區分, 所以在宣告的時候只要宣告一次

請將你的 .h 標頭檔打開, 並輸入以下 code

 

  1. @interface basicActionViewController : UIViewController {
  2.     UILabel *statusText; //宣告一個 Label
  3. }
  4.  
  5. @property(nonatomic, retain) IBOutlet UILabel *statusText;
  6. @property(nonatomic, retain) IBOutlet UIButton *myButton;
  7.  
  8. -(IBAction)buttonPressed:(id)sender;
  9.  
  10. @end

 

複習一下, @property 指的是會自動幫你加上 get/set 的宣告方式, 如果不知道是什麼可以看 這篇

nonatomic 指的是 “ 非單一作業” ,這裡 有解釋,通常不用更改

retain 指的是 “保留” ,一樣 這裡 有解釋,通常不用更改

至於 buttonPressed 則是我們預期會用到的方法,必須先在 header 檔做宣告

 

 

第二階段為實作物件邏輯

互動方向我們要記得兩項

(1) IBOutlet(接口) :指的是運算完的結果送給介面 (如計算機算完結果 → 回傳給介面上的 Label )

(2) IBAction(動作) :指的是使用者在介面上動作, 再回傳給程式運算 (如按鈕 → File Owner)

 

本方法的邏輯就是當使用者按下按鈕後,丟一個訊息給系統,再來系統再將按鈕上面的 title 送到下面的 Label 呈現, statusText 就是呈現結果的 Label

 

  1. #import "basicActionViewController.h"
  2.  
  3. @implementation basicActionViewController
  4. @synthesize statusText; //自動建立 get set 自動出現 statusText 與 setStatusText
  5.  
  6. -(IBAction)buttonPressed:(id)sender{//取得 button 的標題
  7.     NSString *title = [sender titleForState:UIControlStateNormal];
  8.     NSString *newText=[[NSString alloc] initWithFormat:@"您按下了
  9.     %@",title]; //  結合按鈕標題與字串
  10.     statusText.text=newText;
  11. }

 

再來為了預防你的記憶體控管出問題,請加上下面兩個方法

  1. - (void)viewDidUnload {
  2.     self.statusText = nil;
  3. }

 

  1. - (void)dealloc {
  2.     [statusText release];
  3.     [super dealloc];
  4. }

 

 

第三階段:安排物件

螢幕快照 2010-12-21 下午12.29.30

把物件與動作都宣告完後,可以來安排畫面了

請從 library 拉出兩個 button 和一個 Label ,安排成上面那張圖

並輸入 左按鈕與 右按鈕

並在下面拉出一個 Label , 建議可以清空上面的字

然後開始建立他們之間的關係

 

(1) 請按著左按鈕這個 button 與 ctrl ,拉出一條線到 File’s Owner 並選擇我們剛剛寫好的方法, buttonPressed,成功的話你應該可以在 button 的屬性那邊看到預設的 touch up inside 是指向該方法

螢幕快照 2010-12-21 下午12.30.24

(2) 因為系統必須將結果傳給 Label 去做顯示, 所以請從 File’s Owner 按住 ctrl 拉出一條線到 label ,並選擇 statusText ,如此一來就完成這部份的建置

 

第四階段為宣告物件

如果都正確無誤的話,按下編譯你應該會看到以下畫面,當你按下左右 button 各出現不同的字

螢幕快照 2010-12-21 下午12.28.23

2 意見:

Angus 提到...

請問第二階段為實作物件邏輯應當貼付在那一個檔案? 謝謝!

彭其捷 提到...

實作物件邏輯應貼在 .m 檔中,即 implement 檔案當中喔,即 basicActionViewController.m 檔

張貼留言

Related Posts Plugin for WordPress, Blogger...