高見龍

iOS app/Ruby/Rails Developer & Instructor, 喜愛非主流的新玩具 :)

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這個資料夾,把裡面的檔案及資料夾砍掉就行了。

Comments