iOS開發工具Xcode：Interface Builder

簡介：

Interface Builder（IB）是Mac OS X平臺下用於設計和測試用戶界面（GUI）的應用程序（非開源）。爲了生成GUI，IB並非必需的，實際上Mac OS X下全部的用戶界面元素均可以使用代碼直接生成；但IB可以使開發者簡單快捷的開發出符合Mac OS X human-interface guidelines的GUI。一般你只須要經過簡單的拖拽（drag-n-drop）操做來構建GUI就能夠了。IB使用Nib文件儲存GUI資源，同時適用於Cocoa和Carbon程序。在須要的時候，Nib文件能夠被快速地載入內存。 

Interface Builder工具是在iPhone SDK中提供的。該工具一般用於Mac OS X開發和iPhone應用程序開發。Interface Builder提供了拖放面板以供開發人員將控件拖放到屏幕上。使用Interface Builder是一件很是糾結的事情，尤爲對於那些具備Visual Studio背景的開發人員更是如此；它具備不少與Visual Studio內的設計器相似的內容，可是其工做方式和控件的設置方式卻又徹底不一樣。

使用Interface Builder徹底是可選的，全部的控件均可以直接經過代碼來使用。可是對於建立佈局而言，它是一個有用的工具。 

Interface Builder直接集成到MonoDevelop中，雙擊任何.xib文件均可以自動基於選擇的.xib文件打開Interface Builder。

在打開Interface Builder時，會出現幾個不一樣的窗口，如圖2-5所示。

圖2-5

●     Library  這個窗口包含Objects、Classes和Media選項卡，其中包含着用戶能夠單擊並拖到視圖上的控件。

●     View  這個窗口是一個視圖，能夠單擊不一樣的控件，並將其拖到該視圖上。這使得咱們能夠按照所見即所得(WYSIWYG)的方式對用戶界面進行佈局。

●     Connections  在這個窗口中，能夠設置控件之間的鏈接，使得咱們可以經過程序對這些控件進行修改。如您所看到的同樣，該窗口中還有另外3個選項卡。另外3個選項卡是Attributes、Size和Identity，經過這些選項卡，能夠對控件細節進行修改。整體來說，這個窗口就是所謂的查看器(Inspector)。

●     圖2-5中的第4個窗口標題爲Untitled，這是Interface Builder的主菜單，這個主菜單給出了視圖中全部控件的分層視圖。

後面幾節將討論可使用的控件有哪些類型，包括經過Interface Builder使用的控件和僅經過代碼使用的控件。

 

1  使用庫中的控件

Library窗口包含大量能夠在Interface Builder內使用的控件。這些控件也能夠經過代碼來調用；括號內的內容表示與該控件相對應的類。

●     控制器(UIViewController)  控制器是控制某種類型活動的控制器系列。

●     數據視圖  數據視圖一般用於向用戶展現某種類型的信息。展現的控件有：

• 表視圖(UITableView)  表視圖以表列表的格式向用戶展現數據。用戶可以經過滾動欄瀏覽數據。一般，表視圖中的一個單元格就是一整行(就是所謂的表視圖單元格)。

• 表視圖單元格(UITableViewCell)  對於表視圖單元格，能夠在表視圖內對單元格定義和應用定製的外觀、屬性和行爲。

• 圖像視圖(UIImageView)  圖像視圖向用戶顯示圖像或動畫。對於動畫的狀況，圖像視圖是做爲一個UIImage數組而定義的。

•  Web視圖(UIWebView)  Web視圖在應用程序內向用戶顯示Web內容。

• 地圖視圖(MKMapView)  地圖視圖在應用程序內向用戶顯示地圖內容。

• 文本視圖(UITextView)  文本視圖顯示多行可編輯文本。

• 滾動視圖(UIScrollView)  對於在單個窗口視圖內沒法徹底顯示的內容，滾動視圖爲顯示這樣的內容提供了一種方式。

• 拾取器視圖(UIPickerView)  拾取器視圖顯示一個老*虎機樣式的旋轉輪。對於不熟悉MonoTouch的.NET開發人員來說，這個控件在概念上相似於下拉列表框。

• 日期拾取器(UIDatePicker)  日期拾取器是一組旋轉輪，經過它能夠選擇日期和時間。

●     輸入對象與值對象(Inputs & Values)  Inputs & Values窗口提供了一組UI控件爲用戶提供輸入方式。這些控件包括：

• 分段控件(UISegmentedControl)  分段控件能夠看做是一個按鈕，該按鈕的不一樣部分表現爲單獨的控件。

• 文本標籤(UILabel)  文本標籤是顯示文本的控件。

• 圓角矩形按鈕(UIButton)  圓角矩形按鈕控件實現了觸摸事件。觸摸事件相似於.NET中的「單擊」事件。圓角矩形按鈕等價於.NET中的按鈕。

• 文本框(UITextField)  文本框控件容許用戶經過虛擬鍵盤輸入文本或數據。

• 開關(UISwitch)  開關控件容許用戶切換用戶界面上的值。從概念上講，這個控件相似於複選框。

• 滑動欄(UISlider)  滑動欄控件容許用戶輸入必定範圍值內的某個值。

• 進度視圖(UIProgressView)  進度視圖控件能夠顯示任務執行的進度。進度視圖一般用於長時間執行的任務，向用戶提供反饋。

• 活動指示器視圖(UIActivityIndicatorView)  活動指示器視圖控件提供任務當前運行的反饋。它並不顯示任務的狀態，只是顯示任務正在運行。

• 頁面控件(UIPageControl)  頁面控件向用戶提供應用程序中有其餘頁面的信息。

●     窗口、視圖和欄  這些是Interface Builder和代碼中可使用的窗口、視圖和欄。

• 窗口(UIWindow)  窗口包含多個視圖，會首先在屏幕上顯示。因爲全部的視圖都是在窗口中顯示的，所以只能有一個窗口實例。

• 視圖(UIView)  視圖控件是一個矩形區域，能夠放置控件和處理事件。

• 搜索欄(UISearchBar)  搜索欄控件是一個帶有圓角邊和搜索圖標的文本框。其UI外觀是爲了向用戶代表，這個字段可用於搜索。

• 搜索欄和搜索顯示控制器(UISearchDisplayController)  搜索欄(Search Bar)和搜索顯示控制器(Search Display Controller)是Search Bar控件、Bookmark按鈕、Cancel按鈕和顯示搜索結果的表視圖。

• 導航欄(UINavigationBar)  導航欄是支持按照分層進行內容導航的一個UI控件。

• 導航項(UINavigationItem)  導航項控件包含導航欄中導航項的相關信息。

• 工具欄(UIToolBar)  工具欄控件會在屏幕底部顯示一個工具欄。工具欄控件支持工具欄內的工具欄項。

• 欄按鈕項(UIBarButtonItem)  欄按鈕項控件表明工具欄控件或導航欄內的一項。

• 靈活空間欄按鈕(UIBarButtonItem)  靈活空間欄按鈕控件表明工具欄內的空間量。

• 選項卡欄(UITabBar)  選項卡欄控件能夠將選項卡欄顯示在屏幕底部。選項卡欄控件可用於選項卡欄項的選擇。

• 選項卡欄項(UITabBarItem)  選項卡欄項控件是選項卡欄控件內的一項。

 

2  設置插座變量 

爲了可以使用拖到Interface Builder視圖上的控件，須要爲每一個控件建立一個插座變量。在MonoTouch中，插座變量是一個類上的實例變量，該類分配給Interface Builder內定義的控件。該實例變量提供了一個接口，使得咱們能夠經過編程來訪問該控件。爲了說明這一點，您將使用一個基於iPhone窗口的項目，並在Interface Builder中打開MainWindows.xib文件。

在大多數狀況下，您不會但願在窗口中直接使用控件，而是使用做爲子視圖加入到窗口中的視圖來鏈接控件。這是由於在實際的應用程序中，您只是使用窗口來添加視圖，而不是使用窗口來顯示控件。

(1) 首先，從Library Objects選項卡中拖動一個圓角矩形按鈕到窗口上。爲了設置按鈕的文本，能夠在按鈕中間雙擊，而後輸入文本。結果看起來如圖2-6所示。

圖  2-6

 

(2) 即便按鈕控件位於窗口上，若是沒有爲其建立插座變量，那麼也不能使用這個控件。在庫中，選擇Classes選項卡，而後選擇AppDelegate選項(這就是您須要用於訪問新建按鈕的類)。

(3) 在Library窗口的下方，如今有一個由4個選項卡組成的列表：Inheritance、Definitions、Outlets和Actions。如今，須要選擇Outlets選項卡，單擊+按鈕加入一個新的插座變量。將該插座變量命名爲myButton，按Enter鍵保存修改結果。能夠選擇輸入一種類型，可是能夠保留這個類型爲「id」。獲得的結果看起來應該如圖2-7所示。

圖  2-7

(4) 您可能已經注意到，尚未告訴這個插座變量哪一個按鈕將與之關聯。爲此，須要使用Inspector窗口(位於圖2-8中靠右邊的窗口)來建立從AppDelegate類插座變量到窗口中實際按鈕的鏈接。首先從Interface Builder的主窗口(從左邊開始數的第三個窗口)中選擇AppDelegate。而後，選擇Inspector窗口中的Connections選項卡(帶有藍色圖標和白色箭頭)。插座變量會在此顯示；而後須要單擊並將其從Inspector插座變量拖到窗口上的實際按鈕(建立Inspector插座變量與實際按鈕的鏈接)。圖2-8顯示了這個過程。

圖  2-8

如今已經建立好這個鏈接，而且已經設置好這個插座變量，接下來能夠在代碼中使用它。

 

3  設置動做

動做是一條消息，當特定的事件發生時就會激活這條消息。這與.NET內事件的概念很是相似。MonoTouch所作的工做就是經過激活該事件的控件的強類型部分方法來公開這些動做。在下一節中能夠了解到更多的相關知識。

 

設置動做的方式相似於設置插座變量，經過使用庫類部分來建立一個新的動做，而後將這個動做鏈接到一個按鈕的方法上。

 

(1) 與前面建立插座變量同樣，建立一個新動做，並賦予它一個名稱。

 

(2) 接着，與插座變量的狀況同樣，選擇Actions選項卡，單擊+按鈕添加一個新動做。應該將這個動做取名爲buttonPressed，從而與示例圖像一致。Interface Builder會自動在該方法以後增長一個分號，用於表示這是Objective-C中的一個方法，可是，在使用Mono Touch時，保留這個分號並沒有妨礙。

 

(3) 您應該注意到，在AppDelegate Inspector Connections選項卡內，有一個名爲Received Actions的新區域，其中包含着這個新動做。單擊並將這個新動做拖到該按鈕上。這一次，當釋放鼠標左鍵後，應該注意到會出現該按鈕可用的一系列動做。做爲示例，請參見圖2-9。

 

須要與按鈕關聯的動做多是TouchUpInside方法。這意味着用戶觸摸了按鈕，並剛剛移開光標。

圖  2-9

這就是在Interface Builder中關聯一個動做所需的全部工做。