讀古今文學網 > iOS編程基礎:Swift、Xcode和Cocoa入門指南 > 7.1 nib編輯器界面概覽 >

7.1 nib編輯器界面概覽

下面探索Xcode的nib編輯器界面。第6章直接通過Single View Application模板創建了一個簡單的iPhone項目Empty Window;它包含了一個故事板文件,我們就來使用它。在Xcode中,打開Empty Window項目,在項目導航器中找到Main.storyboard,單擊進行編輯。

圖7-1顯示了選中Main.storyboard後的項目窗口(我做了一些調整,使得屏幕截圖適合於圖書的頁面大小)。界面可以劃分為4部分:

圖7-1:編輯nib文件

1.編輯器的大部分是畫布,這是你設計應用界面的地方。畫布描繪了應用界面中的視圖以及包含視圖的部分。視圖是個界面對象,它將自身繪製為一個矩形區域。「包含視圖的部分」指的是我用於包含視圖控制器的方式,雖然它們並不在應用界面中繪製,但也會展現在畫布中;視圖控制器並不是視圖,但它有一個視圖(並且可以控制它)。

2.編輯器左側是文檔大綱,它根據名字以層次化方式列出了故事板的內容。可以通過拖曳右邊緣或單擊畫布左下角的按鈕將其隱藏。

3.輔助窗格中的查看器是編輯當前所選對像詳細信息的地方。

4.輔助窗格中的庫,特別是對像庫用於將界面對像添加到nib中。

7.1.1 文檔大綱

文檔大綱以層次化方式描述了nib中對像間的關係。根據編輯的是.storyboard文件還是.xib文件,其結構會有些許的不同。

在故事板文件中,主要部分是場景。大概來說,場景指的是一個視圖控制器,外加上一些輔助材料;每個場景頂層都會有一個視圖控制器。

視圖控制器並不是界面對象,不過它管理著一個界面對象,我們稱這個界面對像為其視圖(或主視圖)。nib中視圖控制器的主視圖未必位於與之相同的nib中,不過通常都在一個nib中;這樣,在nib編輯器中,視圖通常都位於畫布中的視圖控制器內。這樣在圖7-1中,畫布中大大的高亮矩形就是視圖控制器的主視圖,它實際上位於視圖控制器中。

可以在文檔大綱中查看並選取視圖控制器。在場景停靠欄中,它顯示為一個圖標;如果選擇了場景中的任何東西,那麼場景停靠欄就會出現在畫布中視圖控制器的上方(如圖7-2所示)。故事板文件中的每個視圖控制器都構成了一個場景。這個場景在文檔大綱中表示為一種層次化的名字集合。文檔大綱的頂部就是場景本身。每個場景的頂部基本上是與視圖控制器場景停靠欄中相同的對象:視圖控制器本身以及兩個代理對像First Responder標記與Exit標記。這些對像(以圖標形式顯示在場景停靠欄中的對象,以及位於文檔大綱中場景頂層的對象)都是場景的頂層對象。

圖7-2:在故事板中選擇一個視圖控制器

顯示在文檔大綱中的對象可以分為兩類:

nib對像

視圖控制器、主視圖與我們想要放到該視圖中的任何子視圖是實際的對象,這些都是潛在的對象,當nib被運行著的應用加載時,它們會轉換為實際的實例。這種從nib實例化的真實對象也叫作nib對象。

代理對像

加載nib時會實例化一些實例,不過代理對像(這裡就是First Responder與Exit標記)卻並不表示這些實例。相反,它們表示的是其他對象,並且有助於nib對象與其他對像之間的通信(本章後面將會介紹相關示例)。你不能創建或刪除代理對像;nib編輯器會自動將其顯示出來。

(文檔大綱中還會顯示故事板入口點。它並非任何類型的對象;只是表示該視圖控制器是故事板的初始視圖控制器(在其屬性查看器中,Is Initial View Controller選項會被勾選上),並且對應於畫布中該視圖控制器左側的向右箭頭。)

故事板文檔大綱中所列出的大多數nib對象都會按照層次依賴於場景的視圖控制器。比如,在圖7-2中,視圖控制器有一個主視圖;該視圖會以層次方式依賴於視圖控制器。這是有意義的,因為該視圖屬於這個視圖控制器。此外,拖曳到畫布主視圖中的任何其他界面對象都會列在文檔大綱中,並且以層次方式依賴於視圖。這也是有意義的。一個視圖可以包含其他視圖(其子視圖),並且還可以被其他視圖所包含(其父視圖)。一個視圖可以包含多個子視圖,這些子視圖本身又會包含子視圖。不過每個視圖都只有一個直接父視圖。這樣就會形成一個子視圖的層次樹,其父視圖會包含這棵樹,同時頂層會有唯一一個對象。文檔大綱將這棵樹表示為大綱的形式,這正是其名字的由來。

.xib文件中是沒有場景的。如果.storyboard文件中場景的頂層對像成為.xib文件中nib的頂層對像會出現什麼情況呢?不要求這些頂層對像一定要是視圖控制器;它可以是,不過大多數時候,.xib文件的頂層界面對象都是個視圖。這個視圖可以作為視圖控制器的主視圖,不過這並非強制的。圖7-3展示了一個.xib文件的結構,它等價於圖7-2的單個場景。

圖7-3中的文檔大綱列出了3個頂層對象。其中兩個是代理對象,它們在文檔大綱中起到佔位符的作用:File\'s Owner與First Responder。第3個對象是實際的對象,它是個視圖;應用運行加載nib時會將其實例化。.xib文件中的文檔大綱不能完全隱藏起來;相反,它會收起為一組圖標,表示nib的頂層對象,類似於故事板文件中的場景停靠欄,通常也叫作停靠欄(如圖7-4所示)。

圖7-3:包含了一個視圖的.xib文件

現在,文檔大綱看起來似乎有些多餘,因為其層次結構非常少;圖7-2與圖7-3中的所有對象都可以通過畫布來訪問。不過,如果故事板包含了多個場景,一個視圖包含了多層對像(及其自動佈局約束),這時文檔大綱就很有用了,你可以通過它以非常直觀的層次化結構來查看nib的內容,並且能夠找到和選擇所需的對象。此外,還可以在這裡重新整理層次結構;比如,如果錯誤地將某個對象作為了一個視圖的子視圖,那麼你可以拖曳其名字在大綱中對其進行重新定位。

圖7-4:.xib文件中的停靠欄

如果文檔大綱中的nib對像名是泛泛的名字且沒有給出什麼有價值的信息,那麼你可以修改它們。從技術上來說,名字是個標籤,沒什麼特殊含義,可以隨意為nib對像分配適合的標籤。在文檔大綱中選擇一個nib對象的標籤,按下回車鍵使之可以編輯;或選中該對象,然後在身份查看器的Document部分編輯Label域。

7.1.2 畫布

畫布能以圖形化的方式表示出頂層的接口nib對象及其子視圖,類似於你經常使用的繪圖程序。畫布是可以滾動的,並且能夠自動容納其所包含的多個圖形化元素;故事板畫布還可以縮放大小(選擇Editor→Canvas→Zoom或使用上下文菜單)。

(在.xib文件中,可以在不刪除對象的情況下刪除頂層nib對象的畫布表示,方式是單擊左上角的X,如圖7-3所示。還可以在文檔大綱中單擊nib對像來恢復畫布的圖形化表示。)

這個簡單的Empty Window項目的Main.storyboard只包含一個場景,因此它在畫布中只會以圖形化方式表示一個頂層的nib對象,即場景的視圖控制器。視圖控制器中是其主視圖,通常無法將其與畫布中的表示區分開來。當應用運行時,該視圖控制器會成為應用窗口的根視圖控制器;因此,其視圖會佔據整個窗口,實際上會成為應用的初始界面(參見第6章)。可以在這裡做一些嘗試:我們在該視圖中所做的任何修改都會在隨後構建並運行應用後顯現出來。為了證明這一點,下面添加一個子視圖:

1.從圖7-1所示的nib編輯器開始。

2.打開對像庫(Command-Option-Control-3)。如果顯示為圖標視圖(沒有文本的圖標網格),請單擊過濾欄左側的按鈕將其顯示為列表視圖。單擊過濾欄(或選擇Edit→Filter→Filter in Library,Command-Option-L)並輸入「button」,這樣列表中只會顯示出按鈕對象。Button對像會列在最上面。

3.將Button對像從對像庫拖曳到畫布中視圖控制器的主視圖上(如圖7-5所示),鬆開鼠標。

圖7-5:將一個按鈕拖曳到視圖中

現在按鈕會出現在畫布中的窗口上。我們所執行的動作(從對像庫拖曳到畫布上)是非常典型的一個動作;在設計界面時經常會這麼做。

就像繪圖程序一樣,nib編輯器可以幫助你設計界面。下面是一些典型使用場景:

·選中按鈕:修改大小處理器會出現(如果不小心選中了兩次,修改大小處理器就會消失,請再次選中視圖,然後選中按鈕)。

·使用修改大小處理器,讓按鈕變得寬一些:尺寸信息會出現。

·將按鈕拖曳到視圖邊緣:會出現一個指示,展示出標準的間隔。與之類似,將按鈕拖曳到視圖中心附近,當按鈕居中時,指示會告訴你。

·選中按鈕後,按下Option鍵並將鼠標懸浮在按鈕外面:箭頭與數字會出現,展示出按鈕與視圖邊緣之間的距離。(如果在按下Option鍵時不小心單擊或拖曳了,你就會看到兩個按鈕。這是因為按住Option並拖曳對像會將對像複製出來。選中不想要的按鈕,按下Delete鍵將其刪除。)

·按住Control與Shift鍵並單擊按鈕:會出現一個菜單,可以通過它選擇按鈕或按鈕下面的對象(在該示例中就是視圖與視圖控制器,因為視圖控制器是一切的頂層背景)。

·雙擊按鈕標題。標題就變成可編輯的了。指定好一個新標題,如「Howdy!」。按下回車鍵來設置新的標題。

現在來驗證剛才的設計,我們來運行應用:

1.將按鈕拖曳到畫布左上角附近(如果不這麼做,那麼當應用運行時按鈕可能就會脫離屏幕)。

2.查看Debug→Activate/Deactivate Breakpoints菜單項。如果顯示的是Deactivate Breakpoints,那就請選擇它;我們不希望應用運行時在之前章節所創建的斷點處暫停下來。

3.確保方案彈出菜單中的目標是iPhone 6。

4.選擇Product→Run(或單擊工具欄上的Run按鈕)。

暫停一段時間後,iOS模擬器會打開,這個窗口不再是空的了(如圖7-6所示);它包含了一個按鈕!你可以使用鼠標單擊該按鈕,模擬用戶手指的操作;在單擊時按鈕會高亮顯示。

圖7-6:Empty Window應用的窗口不再是空白的了

7.1.3 查看器與庫

有4個查看器會與nib編輯器一同出現,並且會作用於在文檔大綱、停靠欄或畫布中所選擇的對象上:

身份查看器(Command-Option-3)

該查看器的第一部分Custom Class是最為重要的。可以在這裡查看並修改所選對象的類。有時需要修改nib中對像所屬的類,本章後面將會對此進行介紹。

屬性查看器(Command-Option-4)

這裡的設置對應於代碼中用於配置對象的屬性與方法。比如,在屬性查看器中選中視圖,然後從後面的彈出菜單中進行選擇相當於在代碼中設置視圖的backgroundColor屬性。與之類似,選中按鈕並在Title域中輸入相當於調用按鈕的setTitle:forState:方法。

屬性查看器分為幾部分,對應於所選對象的類層次結構。比如,UIButton的屬性查看器有3部分:除了Button部分,還有一個Control部分(因為UIButton也是個UIControl)和一個View部分(因為UIControl也是個UIView)。

尺寸查看器(Command-Option-5)

X、Y、Width與Height域確定了對象在其父視圖中的位置與大小,對應於代碼中其frame屬性;可以通過拖曳和縮放的方式在畫布中完成這些操作,但這麼做無法滿足數字精度。

如果開啟了自動佈局(對於新的.storyboard與.xib文件,這是默認情況),那麼尺寸查看器的其他部分就與所選對象的自動佈局約束相關;此外,畫布右下角的按鈕可以自動管理對齊、定位與約束。

連接查看器(Command-Option-6)

本章後面將會介紹連接查看器的使用。

在編輯nib時有兩個非常重要的庫:

對像庫(Control-Option-Command-3)

這個庫是想要添加到nib中的對象來源。

媒體庫(Control-Option-Command-4)

該庫會列出項目中的媒體,比如,想要拖曳到UIImageView或直接拖曳到界面中的圖片(在這種情況下會創建一個UIImageView)。

剛才多次提到自動佈局與約束,不過這裡還不打算對其進行介紹,也不會介紹尺寸等級和條件約束(畫布底部的「Any」按鈕)。這些都是涵蓋範圍廣泛的主題,與視圖和視圖控制器緊密相關,這已經超出了本書的討論範圍。我在另一本書《Programming iOS 9》中對其進行了詳盡的介紹,包括如何在nib編輯器中處理約束與尺寸等級。