2010年3月18日 星期四

iPhone 開發教學 - 環境設置和第一支程式 Hello World 範例

此範例參考 Stanford CS 193P iPhone
Application Development 教學課程 Lecture #4 - Anatomy of an App, MVC, Nib files, Controls
& Target-Action
之影片，剛好解除我大半疑惑，因此想寫一下來當作筆記，也幫需要的人解惑。主因是看了很多教學，都沒有提到怎樣設定 Interface Builder 上的物件跟程式的結合，所以我才打算寫一篇來記錄一下，過程中若不知道要按熱鍵，那就會一直卡在那邊 orz


這次我第一次學 iPhone 的開發，原先看了很多 Objective C ，但一切入 Xcode 時，被他冗長的程式碼搞混，感覺看得懂每一小段的程式碼，但就不清楚真正的程式流程，我在 iPhone SDK開發範例大全第一章 看到用 debug 的方式來 trace 程式流程，一種不錯的學習方式，只是我還不太習慣 XD 但這篇的確是不錯的教學。關於我的背景，學過一點點 C++ ，但偏向於 C 語法而已，而後又學了 Java ，但都趨向於自修的模式甚至只是亂翻網路上的資料，算是沒有很正統的學習，因此我自己的筆記可能不適合其他人。


Xcode


關於 iPhone 開發環境，建議還是使用 Mac OS ，除此之外還需要學習 Objective C 的語法，以下先筆記簡單的開發環境的設置：



  1. 首先需要 Mac OS 環境，在此不多贅述

  2. 下載 iPhone SDK ，可在 Apple Developer 網站之 iPhone Dev Center 下載

    • 需要登入註冊一個 Apple ID ，請點選右上角的 Register ，若過去你已經有用 iTunes store 或是 App Store 的經驗，那應該就已經有一組帳號可以用，但在這邊申請的 Apple ID 是不需要信用卡資訊的，若你要使用 iTunes store 的話，又不想用信用卡，請逛逛 Google：apple id 免信用卡，的此原理是利用在 iTunes store 下載免費的東西時，當下註冊一個新的帳號，該帳號的信用卡選項中會有 none 可以選擇

    • 登入後，請依自己的作業系統狀態下載版本，在此使用 iphone_sdk_3.1.3_with_xcode_3.2.1__snow_leopard__10m2003a.dmg ，該檔案約 3.03 GB ，下載完就可以安裝他，安裝完後即可在 Macintosh HD/Developer/Applications/Xcode 開啟




關於 iPhone 開發上的文件，可參考此：



關於 Objective C 的學習資料，可參考此：



若你覺得看上面那種東湊西併的方式很累，那就直接開大絕了！請看看史丹佛的課程：Stanford
CS 193P iPhone
Application Development！對我的學習也解除不少疑惑，最重要的是影片中的 demo 囉！投影片用看的可以很快的，但重點反而是不會用 Xcode 或 Interface Builder，起初我一直想要脫離 Mac OS 或 Xcode 的開發環境，直到我看 Stanford 的投影片中，看到了一句話：


Don’t fight the frameworks



因此，開始調整自己的心態了！


開始進入第一支 Hello World！（另外也可以用官方的 MoveMe，
解壓縮後可以找 *.xcodeproj 開啟，接著就可以編譯並跑模擬器）


Create a new Xcode project > iPhone OS > Application > Window-based Application > 填寫 HelloWorld 即可


Hello World


接著看一下左上角，選一下 Simulator，只要按下 Build and Run 就會出現 iPhone 模擬器囉！但以上的範例就只是空蕩蕩的而已。以下就開始實作我心目中的 Hello World 啦！


在 HelloWorldAppDelegate.h 中 UIWindow *window; 下面增加兩行以及下面一行的函數宣告，這是用來串連等會設計的UI物件：


#import <UIKit/UIKit.h>

@interface HelloWorldAppDelegate : NSObject <UIApplicationDelegate> {
    UIWindow *window;
    IBOutlet UILabel *showLabel;
    IBOutlet UIButton *actionButton;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;

- (IBAction)updateLabel;

@end


並且在 HelloWorldAppDelegate.m 多實作兩個函數：


#import "HelloWorldAppDelegate.h"

@implementation HelloWorldAppDelegate

@synthesize window;


- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    // Override point for customization after application launch
    [window makeKeyAndVisible];
}

- (void)awakeFromNib {
    showLabel.text = @"Hello World!";
}

- (IBAction)updateLabel {
    static int counter = 0;
    showLabel.text = [NSString stringWithFormat: @"Value: %d" , ++counter];
}

- (void)dealloc {
    [window release];
    [super dealloc];
}

@end


以上是程式上的佈署，接下要安排 UI 上的物件了！請點選 MainWindow.xib 檔案，接著會自動開啟 Interface Builder 並在上方 Tools 叫出 Library，接著可以從 Library 裡拉出 Label 和一個 Button 到 Window 上面，也可以點一下 Label 去調整 Layout 讓字可以置中，以及把它拉寬一點。


view


接著，就是設定 UI 物件與程式的結合，點選 Hello World App Delegate 並按著 ctrl 拉他，此時會出現一條線，把它移到 Label ，就會出現 Outlets 可以選，依我們的程式碼就是選擇 showLabel ，同理處理 Button ，選擇 actionButton 囉


connect


然後，來串接 Button 事件，點選下面的 Button 後，在右邊選單可以選擇 Touch Down ，按著那個 + 號移到 Hello World App Delegate 身上，就會看到剛剛實作的 updateLabel 可以選，如此就接上事件跟程式了！記得做完要去存檔一下喔 [File]->[Save]


Touch Down event


最後，切回 Xcode 並編譯執行就會看到模擬上的呈現囉！按下 Button 就會更新 Label 上的字樣了！這就是我心目中的 Hello World 啦！iPhone Hello World


相關文章：



相關問題：



張貼者： 於
標籤：

2 則留言:

  1. testpixnet112013年2月26日 上午10:48

    Hi, 版大，
    今天剛好也在看stanford, 的課，突然也連到這來，不過現在ios6已經又有好多東西和之前不一樣了，像以前的navigation-based application 這種型態的app 也在ios6拿掉了，
    也是在網路上看到有人說明，

    http://iphoneappdev101.blogspot.tw/2013/02/muti-view-master-detail-app.html

    apple 真是越改越多摟～

    謝謝你的分享啦，搞不好以後hellow word 也要好多版本呢...XD

    回覆刪除
  2. Ify Moses2013年4月15日 上午9:56

    Hi.I'm a student of UNN and here's the school's link(http://unn.edu.ng/).Please, I'll like to know more about this website and how I could actually contribute.

    回覆刪除

訂閱： 張貼留言 (Atom)