網頁

2012年12月21日

iPhone App實作練習-BMI


看一堆Objective-C原理的書，什麼物件、類別、記憶體管理的，沒實作個東西出來就整個沒成就感。突然間想起自己是北醫營養系畢業的，但總是不務正業，終於有機會發揮我專長的時候了，這次就來寫個計算BMI(Body Mass Index)的iPhone app吧。

我的SDK版本是4.1的，所以如果你的SDK版本跟我的不一樣的話，看到的畫面可能會跟我的不太一樣。
開啟Xcode，選擇iOS Application->View-Base Application：
image
下一步，選擇專案名稱，我這裡取名為「BMI」，存檔，準備開始動工。接下來，你應該會看到一堆資料夾跟檔案(如下圖)：
image
暫時先不解釋那些檔案要幹嘛的，直接按下上方工具列的”Build and Run”按鈕。沒意外的話，你應該會看到一個iPhone模擬器自動開起來，並且看到模擬器裡出現一個空白畫面，上面什麼都沒有，因為我們還沒開始寫 :)
接下來要來上面放一些元件了。請點開Resources裡的BMIViewController.xib (如果你的專案名稱跟我不同的話，檔名也會跟著不同)。點開之後應該會開啟Interface Builder，這個是讓你用視覺的方式把元件佈置到場景上的工具。接下來你應該可以找到一個library視窗(如下圖)，裡面放了許多預先建立好的元件。如果找不到這個視窗的話，請至上方工具列裡選擇”Tools”->”Library”。
image
接下來我們會從元件庫裡拿幾個元件出來用：
  • Label 是拿來放一些靜態文字用的，提示使用者某個欄位要輸入什麼值，在這裡也可以拿來做為BMI結果的輸出值。
  • Text Field 是用來讓使用者輸入身高體重的地方。
  • Button 則是按下去之後會幫我們計算BMI，並呈現在畫面上。
接下來請把畫面佈置得如下圖：
image
label或是button上的文字，只要點兩下就可以進行編輯。在畫面中間下面，你看到的那個Label字樣，是待會計算完成會出現的結果。但在按下計算之前，它應該是隱藏的，所以點選Label之後，可以從Attributes Inspector把它設定為”hidden”(如下圖)。這樣的話到時候它出場的時候就會看不見了(但在設計階段會看到半透明的)。
image
在attributes inspector這邊還有很多屬性是可以自己調整看看的，例如字型、顏色、大小等。
完成之後記得存檔，然後回到xcode，再度按下”Build and Run”，你就可以看到你剛剛做的成果，按鈕可以按了，文字可以輸入了，但應該都還沒功能，而且那個鍵盤會一直卡在那邊，不會自己退下去，接下來我們就要來把這個功能給完成。
回到Xcode，點開左邊Classes裡的BMIViewController.h(同上，如果專案名稱不同，檔名也會不同)，你會看到一個空的類別定義，這裡暫時不詳細說明什麼是類別，先讓大家取得成就感再來研究細節 :)
接下來我們要在@interface裡加幾個屬性跟方法，程式碼如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 檔案：BMIViewController.h
#import <UIKit/UIKit.h>

@interface BMIViewController : UIViewController
{
  IBOutlet UITextField *body_height;
  IBOutlet UITextField *body_weight;
  IBOutlet UILabel *result;
}

@property (nonatomic, retain) IBOutlet UITextField *body_height;
@property (nonatomic, retain) IBOutlet UITextField *body_weight;
@property (nonatomic, retain) IBOutlet UILabel *result;

-(IBAction) calcBMI: (id) sender;
-(IBAction) keyboardDismiss: (id) sender;
@end
這裡先暫時不說明什麼是IBOutlet、IBAction還有一堆看不懂的語法是要幹嘛的，有機會的話，會在之後的文章裡再來一一說明。簡單的說，這些IBOutlet就是一些待會要給Interface Builder做連結用的，IBAction則是一些”動作”，待會要設定給按鈕按下去之後用的。這裡的IB，指的就是Interface Builder。
定義好了interface之後，接下來請切換到BMIViewController.m，這個檔案看起來有一堆被註解掉的程式碼，可以不理它或是把它刪掉(我有程式碼潔癖，所以我刪了)。再來要來實作剛剛的這些定義，程式碼如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

// 檔案：BMIViewController.m
#import "BMIViewController.h"

@implementation BMIViewController

@synthesize body_height;
@synthesize body_weight;
@synthesize result;

-(IBAction) calcBMI: (id) sender
{
  // 取得身高數值，並換算成公尺
  float height = [[body_height text] floatValue] / 100;

  // 取得體重數值
  float weight = [[body_weight text] floatValue];

  // 顯示計算結果
  result.hidden = NO;
  result.text = [NSString stringWithFormat:@"您的BMI值是：%.2f", (weight / (height * height))];
}

// 把鍵盤退下去
-(IBAction) keyboardDismiss: (id) sender
{
  [sender resignFirstResponder];
}

-(void) viewDidLoad
{
  // 設定這兩個欄位的初始為數字及標點符號鍵盤
  [body_height setKeyboardType:UIKeyboardTypeNumbersAndPunctuation];
  [body_weight setKeyboardType:UIKeyboardTypeNumbersAndPunctuation];
}

- (void)dealloc
{
  [body_height release];
  [body_weight release];
  [result release];
  [super dealloc];
}
@end
特別要說明的是，calcBMI方法做的事，就是去取得畫面上的兩個TextFeid的值，計算之後把結果輸出到剛剛那個被我們隱藏起來的Label；keyboardDismiss方法則是要把鍵盤給退下去，而viewDidLoad則是當整個app執行並載入元件完成後會做的事，這裡我們設定那兩個TextField的keyboard屬性為數字+標點符號鍵盤(身高體重應該只要輸入數字跟小數點)。
到這裡，程式碼的部份其實已經算寫完了，但是還沒”串起來”，所以還不會動。接下來我們就是要來做”串起來”的動作。
回到Interface Builder，找到File’s Owner，在上面點滑鼠右鍵應該會出現像下面這個畫面：
image
你剛剛寫的程式碼如果沒錯的話，IBOutlet跟IBAction就會在這裡出現了。接下來就是開始歡樂的連連看了。上圖的IBOutlet跟IBAction旁邊都有一個小圈圈，按下body_height屬性右邊的小圈圈，然後拖拉到你剛佈置的那個身體的TextField，如下圖：
image
body_weight也是以此類推，再來把calcBMI這個IBAction拖拉到計算的按鈕上，它會出現一個選單，選擇”Touch Down”，表示這個IBAction會在這個按鈕被按下去的時候執行：
image
同樣的把result也拖拉到那個隱藏的label上：
image
最後比較特別的是keyboardDismiss這個，請把它各別拖拉到身高及體重的TextField，並選擇”Did End On Exit”，這表示當在這兩個TextField按下enter或return之後會做的事，在這裡是把鍵盤給退下去：
image
如果全部都完成的話，畫面應該看起來會像這樣：
image
以上這些”串連”的動作，就是把畫面上的東西跟程式碼串接起來，讓按鈕按下去會有反應，該出現的出現，該隱藏的隱藏。除了從File’s Owner這邊可以拉之外，也可以從另外的Connection視窗來看，例如你點一下那顆計算的按鈕，並切換到Connection視窗(如下圖)，如果看到這顆按鈕目前有跟什麼屬性或動作有連結。在這裡可以看到這個按鈕的Touch Down事件會去觸發calcBMI動作。
image
存檔，並回到Xcode環境，按下Build and Run，程式沒錯的話，應該就可以看到你的app啟動了。
image
最後，當你按下模擬器裡的home按鈕，你看到你的app的icon是白白的(如下圖)：
image
這樣很醜，應該不會有人想買你的app，所以通常都會設計個漂亮的icon來放上去。製作方法也很容易，icon的尺寸是57×57，開影像處理軟體做好之後，回到Xcode，把做好的圖檔拖拉到Xcode裡的Resources資料夾。它會跳一個視窗出來：
image
勾選Copy選項，它就會把你剛做的icon圖檔也複製一份到你的專案裡。接著同樣在Resources資料夾裡有個BMI-info.plist檔案(檔名同專案名稱，所以你可能跟我的不一定會一樣)，打開之後中間有個icon file的選項，填入你剛剛做好的icon檔名(我的是eddie_icon.png)。
image
存檔，Build and Run，應該就能看到新的icon了：
image
差不多就這樣了。不過其實還有很多防呆裝置沒做，例如欄位沒填，或是數字除以零..等等，還有畫面也都還沒美化過，所以如果你要拿上架去賣錢的話，記得把這些功能補齊。
好啦，這樣你可以準備上架去狠狠賺它個幾百萬了，有賺錢的話記得分紅啊 :)

補充：

練習久了，你應該會發現在你的模擬器裡塞了一堆的app，如果想要清除的話，請到/Users/個人帳號/Library/Application Support/iPhone Simulator這個資料夾，把裡面的檔案及資料夾砍掉就行了。
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)