iPhone Interface Builder之一

iPhone Interface Builder之一:2009年09月10日星期四

本文參考iPhone Interface Builder User Guide內容。

(A) Interface Builder的角色?

答:iPhone程式開發,Interface Builder佔了重要的地位,以下圖為例,假設想做一個華氏轉攝氏的轉換表,讓使用者,

  1. Click Deg F之下的框框,會出現最下方的數字鍵盤。
  2. 按下Convert按紐後,將Deg F下框框的數值轉成攝氏,並顯示在Deg C之下的框框內。

下圖整個畫面是由Interface Builder作成,完成後存在.xib或.nib檔案裡。再通過一些操作,讓這些畫面上的東西和程式code相連,這就是Interface Builder的角色。

(B) 上圖中的各個項目及整個工作,如何用程式做到?

答:這些項目可以用UILabelUITextFiledUIButton完成:

首先,在程式中

  1. 先定個Class MyView為UIView Class。
  2. 在MyView中寫下面兩行,可定義出Deg F及Deg C下的兩個text field instance variable:
    • IBOutlet UITextField *infield;
    • IBOutlet UITextField *outfield;
  3. 再在MyView中定一個convert function (or method)如下:
    • -(IBAction) convert: id (sender);
    • convert 負責將infield的華氏值轉為攝氏後寫入outfiled內。

接著:

UILabel:UIView : UIResponder : NSObject:Deg F 和Deg C兩個可以用UILabel完成。

UITextFeild:UIControl : UIView : UIResponder : NSObject:兩個框框用UITextField完成。

UIButtonUIControl : UIView : UIResponder : NSObject:Convert用UIButton完成。

問題來了,如何連結MyView內的infield、outfield、convert到畫面?

(C)如何連結MyView內的infield、outfield、convert到畫面?

答:經過(B)項中的IBOutlet & IBAction ( Defining Outlets and Actions in Xcode )。IBOutlet就是代表object的instance variable,IBAction就是object之間的message。

(D) iPhone Interface Builder User Guide的重要內容:

答:

Interface Builder Basic Concepts:Interface Builder Document 即是.xib .nib file,用Interface Builder將object drag入Interface Builder Document,也可以建立objects之間的link或relationship。objects包括windoes, views, controls, menus,這些都是visual objects,non-visual objects有cotroller object,它是來管理windows和views的。

Interface Builder Document的例子:

.xib畫面--圖3:最上方為tool bar,tool bar上有view mode selectot、inspector、search field,最下方為status bar,status bar上顯示Xcode project。 其中為各個object,這些是nib objects,有proxy object(outside the document)及interface object(actually created when document is loaded),proxy object有Files Owner、First Responder、Application三樣,interface object有window、object、Custom View三樣。

.xib:intermedia XML-based file, text based (can perform diff), used during development。

.nib: during deployment,.xib轉成.ni,.nib是binary file。

按.xib畫面上的 i後出現.xib file的資訊---圖4,注意project folder。

圖3

圖4

connections and bindings

(E)可以看.xib file嗎?

答:可以。見下三圖。找到.xib file,用右鍵/打開檔案的應用程式/其他(圖5),出現應用程式,scroll到"文字編輯"(圖6),選用此應用程式。出現.xib檔,是個xml型式檔案(圖7)。仔細看圖7的橫線各行,可以看到,

第一行是IBDocument.RootObjects

第二行是IBUIWindow

第三行是IBUIViewController

第四行是IBUIView

第五行是IBLabel

第六行是NSFrame

這些即是.xib記錄window 、viewcontroller、 view label的方法。

圖5。

圖6

圖7

(F)其他相關資訊:

答:XcodeWorkspace GuideSource Control Management ( SCM )resource programming guide、nib loading process。 Bundle Programming GuideBundle structure

(G)看一下用Interface Builder將畫面製作完成後,和程式間的連結:

圖8:選擇MainWindow.xib/ Files Owner,滑鼠移至Application connection/Outlets/delegate,左邊MainWindow.xib的convert App Delegate會被highlight,表示convertAppDelegate Class是UIApplication的delegate。如此,在main()中 int retVal = UIApplicationMain ( ... );這一行就可自動跳到UIApplication的delegate --- convertAppDelegate了。

圖9:選擇MainWindow.xib/First Responder後,看右邊Responder Connections,橫線上有convert:汶convertBack:兩個method(or message),covert:即是所寫的將華氏換攝氏的程式,又多寫了一個將攝氏換華氏的程式 -- convertBack:,所以Responder也記錄了要respond user clicking 跳到convert:及convertBack: ,注意下面有一堆copy: cut: ...,表示可以用copy: cut:..等功能,試試在鍵入度數時,用copy: cut: ... 等功能。這表示,一旦用了IB Object,自動送上許多editing功能。

圖10:選擇MainWindow.xib/convert App Delegate後,看右邊convert App Delegate Connections,可以看到Outlets有contentView連上MyView及window連上Window,contentView、window均為convertAppDelegate的instance variable。Referencing Outlets中delegate連上File's Owner。

圖12:選擇MainWindow.xib/convert App Delegate,滑鼠移至convert App Delegate Connections/Referencing Outlets/delegate,左邊MainWindow.xib的File's Owner會被highlight。

圖13:選擇MainWindow.xib/Window後,看右邊Window Connections,可以看到Referencing Outlets有convert App Delegate。滑鼠移至Window connection/Outlets/delegate,左邊MainWindow.xib的convert App Delegate會被highlight。

圖14:選擇MainWindow.xib/My View Controller後,可看到右邊My View Controller Identity內空無一物,但可看到有Class Identity、Class Actions、Class Outlets、Interface Builder Identity等項目,在Interface Builder Identity中有Object ID 是15。

圖15,16,17,18:instance variables -- infield, outfield,messages --- convert:, convertBack:對應到Interface Builder Objects的圖示。

圖19:My View的referenceing Outlets中contentView連到convert App Delegate。

圖20,21,22,23,24,25,26:圖20~25是六個Interface Objects和code相互間的連結, 圖26是六個Interface Objects與code一起在iPhone simulator上的呈現。 注意:兩個UILabel並未和任何code連結,表示,iPhone系統程式的code也在運作。