Pages

Wednesday, November 3, 2010

一個簡單 iPhone app 顯示訊息和圖案


這是一個 iPhone app 顯示訊息外加上一個圖案,不需要寫任何程式碼的最基本範例。將會需要用到 Xcode 和 Interface Builder 這兩個開發工具。


首先打開 Xcode,建立一個新的 project。Xcode 提供很多種 Templates 可以用,像是 Navigation-based applications, tab bar applications, utility applications 等等。選擇 File > New Project 這邊建立新的 project,選擇 Window-based application 這是最簡單的 template,其他的 template 都是這個的加強版。當選擇了 Choose... 按鈕,就會彈出視窗選擇 project name 和路徑,好了之後按下 Save。


接著我們來到左邊 Resource 右鍵選擇 Add > Existing File.. 挑選一張想要擺的 image 檔案。選完記得勾選 Copy items into destination group’s folder (if needed) ,就可以看到將圖加進來了。


雙鍵點選 MainWindow.xib ,會開啓 Interface Builder。要建立接下來的 app,需要製作圖片和訊息。在 Cocoa,圖片是使用 UIImageView class,從 Library 可以找到 Image View,將它拖拉到 window,在透過邊筐來調整想要顯示的 Size,也可以按住上下左右調整位置。接著在圖片上點選,選擇 Tools > Inspector,Inspector window 就會開啓,可以讓我們調整 GUI 元件。在這邊我們將圖片調整:Image 選擇剛剛加入的圖片、Mode = Aspect Fit。


接著我們要配製訊息,在 Library 找到 Label,將他拖拉到 window,一樣可以調整大小和位置,接著打開 Inspector window,我們要調整:顯示的 Text、Layout 選擇置中、#Lines 2、調整 Font size minimum 為 20。


存檔之後,我們回到 Xcode,選擇上方 Build and Run,就可以看到 Simulator 啓動,載入我們的 app 顯示出來。iPhone 開發是伴隨著 GUI design 和 Objective-C coding, Interface Builder 可以用來開發視覺化 GUI,避免頭痛 GUI 開發、Objective-C 開發可以寫出程式想要表達的行為。


更多可以參考 IPhone for Programmers - Welcome App Dive-Into® Xcode, Cocoa and Interface Builder, gitHub 程式碼範例

No comments:

Post a Comment