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中關聯一個動作所需的所有工作。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM