打開Storyboard

你已準(zhǔn)備好為應(yīng)用制作storyboard。Storyboard 是用戶界面的可視化描述，展示有內(nèi)容的屏幕和屏幕之間的轉(zhuǎn)換。使用storyboard來(lái)編排驅(qū)動(dòng)應(yīng)用的流程或故事。當(dāng)構(gòu)建時(shí)你確切的看到你構(gòu)建的是什么，立刻得到什么工作、什么不工作的反饋，并立即顯示對(duì)用戶界面的更改。

要打開storyboard

• 在project navigator中，選擇Main.storyboard。Xcode在Interface Builder中打開 storyboard，它是可視化界面編輯。它在編輯區(qū)域中顯示。Storyboard 的背景是畫布。畫布是用來(lái)添加和布置用戶界面元素的。

Storybook 看上去像這個(gè)樣子：

BBUI_storyboard_empty_2x.png

現(xiàn)在，你的storyboard上只有一個(gè)場(chǎng)景，它顯示應(yīng)用的一個(gè)屏幕內(nèi)容。場(chǎng)景左側(cè)顯示在畫布上的箭頭表示storyboard的入口，它意味著程序啟動(dòng)的時(shí)候這個(gè)場(chǎng)景會(huì)被加載?，F(xiàn)在，你在畫布上看到的這個(gè)場(chǎng)景包含一個(gè)被視圖控制器管理的單一視圖。很快你將學(xué)習(xí)到更多關(guān)于視圖和視圖控制器的規(guī)則。

當(dāng)你在iPhone 7模擬器上運(yùn)行你的應(yīng)用時(shí)，這個(gè)場(chǎng)景上的視圖就是你在設(shè)備屏幕上看到的視圖。但是畫布上的場(chǎng)景不一定和模擬器屏幕的尺寸一樣。你可以在畫布的底部選擇屏幕的尺寸和方向。在這種情況下，畫布要被設(shè)置為iPhone 7 的肖像方向，因?yàn)樗湍M器是一樣的。

即使畫布顯示特定的設(shè)備和方向，但創(chuàng)建一個(gè)自適應(yīng)的界面非常重要，一個(gè)可以自動(dòng)適應(yīng)的界面可以在任何設(shè)備任何方向上都會(huì)表現(xiàn)良好。當(dāng)你開發(fā)界面時(shí)，可以改變畫布的視圖，看一看界面如何適應(yīng)不同尺寸的屏幕。

構(gòu)建基礎(chǔ)UI

是時(shí)候要構(gòu)建基礎(chǔ)界面了。你將為場(chǎng)景開始使用用戶界面，向你的餐飲跟蹤應(yīng)用，F(xiàn)oodTracker，添加新餐。

Xcode提供一個(gè)對(duì)象庫(kù)，這些對(duì)象可以被添加到storyboard文件中。它們中的一部分是可以添加到用戶界面上的元素，例如按鈕（buttons）和文本字段（text fields）。
另外部分，例如視圖控制器和手勢(shì)識(shí)別器，定義了應(yīng)用的行為，但是不會(huì)顯示在屏幕上。

在用戶界面上顯示的元素被稱為視圖。視圖向用戶呈現(xiàn)內(nèi)容。它們是構(gòu)建用戶界面，并且以清晰、優(yōu)雅、和有用的方式呈現(xiàn)內(nèi)容的組件。視圖有多種多樣有用的內(nèi)建行為，包括把自己顯示在屏幕上，以及對(duì)用戶的輸入作出響應(yīng)。

iOS 中的所有視圖對(duì)象都是UIView及其子類類型的。很多UIView子類在表現(xiàn)和行為上都是高度定制化的。首先添加一個(gè)text filed（UITextFile）， 一個(gè)UIView的子類，到你的場(chǎng)景中。Text field允許你輸入一樣文本，這個(gè)文本用來(lái)命名餐名。

添加text field到場(chǎng)景中

1. 選擇 Editor > Canvas，確保Show Bounds Rectangle被選中。
   這個(gè)設(shè)置使Interface Builder給畫布中所有的視圖繪制了藍(lán)色的邊框。很多視圖和控制器有著透明的背景，很難看出它們的實(shí)際尺寸。當(dāng)系統(tǒng)調(diào)整尺寸的時(shí)候，布局會(huì)發(fā)生錯(cuò)誤，這會(huì)導(dǎo)致視圖比你預(yù)期的要大或者小。啟用這個(gè)設(shè)置會(huì)幫助你準(zhǔn)確的理解在視圖層級(jí)結(jié)構(gòu)中都發(fā)生了什么。

2. 打開對(duì)象庫(kù)。
   對(duì)象庫(kù)位于Xcode右側(cè)實(shí)用工具區(qū)的下部。如果你沒有看到，在選擇條上選擇左起第三個(gè)按鈕。（或者選擇，View > Utilities > Show Object Library。）

   
   
   object_library_2x.png
   
   

   列表顯示了每個(gè)對(duì)象的名字、描述、以及可視化表示。

3. 在對(duì)象庫(kù)中，在過濾字段中輸入text field可以快速找到Text Field對(duì)象。

4. 從對(duì)象庫(kù)中拖拽一個(gè)Text Field對(duì)象到你的場(chǎng)景。

   
   
   BBUI_textfield_drag_2x.png
   
   

   如有必要，通過 Editor > Canvas > Zoom 來(lái)縮放。

5. 拖拽text field到屏幕的上半部，并和屏幕左緣對(duì)齊。
   當(dāng)你看到基本和下圖一樣時(shí)停止拖拽：

   
   
   BBUI_textfield_place_2x.png
   
   

   藍(lán)色的布局引導(dǎo)線幫助你定位text field。布局引導(dǎo)線只有在你拖拽或者調(diào)整對(duì)象大小靠近它們時(shí)才會(huì)顯示；當(dāng)你放開text filed時(shí)它們就消失了。

6. 如有必要，點(diǎn)擊text field來(lái)顯示調(diào)整大小的句柄。
   你通過拖拽用戶界面元素的調(diào)整大小句柄來(lái)調(diào)整它的大小，它們是出現(xiàn)在元素邊線上的小的白色正方形。通過選擇元素來(lái)顯示這些句柄。當(dāng)前，這個(gè)text field已經(jīng)被選擇了，因?yàn)槲覀儎倓偼Ｖ雇Ｖ雇献?。如果看到text filed像下圖一樣，那你就已經(jīng)準(zhǔn)備好調(diào)整它的大小了；如果沒有，那就在畫布上選中它。

   
   
   BBUI_textfield_resizehandles_2x.png

7. 調(diào)整text field左右邊緣直到你看到三條縱向的布局引導(dǎo)線：左緣引導(dǎo)線、水平中線引導(dǎo)線、以及右緣引導(dǎo)線。

   
   
   BBUI_textfield_finalsize_2x.png
   
   

   盡管你有一個(gè)text field在場(chǎng)景中，那是沒有向用戶說(shuō)明要在這個(gè)字段里面輸入什么。
   使用text filed的占位文本來(lái)提示用戶輸入新餐的名字。

設(shè)置text filed的占位文本

1. 維持text field被選中的狀態(tài)，在實(shí)用工具區(qū)域（utility area）打開Attributes 檢查器。
   當(dāng)你在檢查器選擇器條上點(diǎn)擊左起第四個(gè)按鈕的時(shí)候，Attributes 檢查器就出現(xiàn)了。
   它讓你編輯在storyboard中的對(duì)象屬性。

   
   
   BBUI_inspector_attributes_2x.png
2. 在Attribute檢查器中，找到標(biāo)記為Placeholder的字段，并且鍵入Enter meal name。

進(jìn)一步探索
在發(fā)布的應(yīng)用中，任何能夠被用戶看到的字符串（類似于text field的占位符文本）都應(yīng)該是本地化的。更多信息查看 Build Apps for the World。

3. 按下回車鍵讓新的占位符文本顯示在text field中。
   你的場(chǎng)景應(yīng)該看上去是這樣的：

   
   
   BBUI_textfield_withplaceholder_2x.png
   
   

   當(dāng)你編輯text field的屬性的時(shí)候，你也可以編輯當(dāng)用戶點(diǎn)擊text field時(shí)出現(xiàn)的系統(tǒng)鍵盤的屬性。

配置text field的鍵盤

1. 確保text field仍然被選中。
2. 在Attribute檢查器中，找到標(biāo)記為Return Key的字段，并選擇Done（如有必要向下滾動(dòng)）。
   這個(gè)改變將讓鍵盤上默認(rèn)的Return鍵改為Done鍵，這樣會(huì)讓用戶更加明白操作。

3. 在Attributes檢查器中，選擇Auto-enable Return Key復(fù)選框（如有必要，向下滾動(dòng)）。
   這個(gè)改變可以使得在text field輸入文本之前用戶不能點(diǎn)擊Done鍵，確保用戶永遠(yuǎn)不會(huì)讓餐名為空。
   Attributes 檢查器現(xiàn)在顯示的鍵盤設(shè)置如下所示：

   
   
   BBUI_keyboardattributes_2x.png
   
   

   接下來(lái)，在場(chǎng)景的上部增加一個(gè)標(biāo)簽（UILabel）。標(biāo)簽是不交互的；它只是在用戶界面上靜態(tài)的現(xiàn)實(shí)文本。為了幫助理解如何定義用戶界面元素之間的交互，你將設(shè)置這個(gè)標(biāo)簽顯示用戶在text field中輸入的文本。這是個(gè)好方法，它可以測(cè)試text filed獲取了用戶的輸入，并正確的處理了它。

添加label到你的場(chǎng)景

1. 在對(duì)象庫(kù)中，在過濾字段中鍵入label，快速找到label對(duì)象。
2. 從對(duì)象庫(kù)中拖拽一個(gè)Label對(duì)象到場(chǎng)景中。

3. 拖拽Label讓它在text filed的上方，并讓其的左側(cè)緣和text field的左側(cè)緣對(duì)齊。
   當(dāng)你看到如下所示時(shí)，停止拖拽：

   
   
   BBUI_label_place_2x.png
4. 雙擊這個(gè)label，并鍵入Meal Name。

5. 按下回車鍵讓文本顯示在label上。
   現(xiàn)在場(chǎng)景應(yīng)該如下所示：

   
   
   BBUI_label_rename_2x.png
   
   

   現(xiàn)在添加一個(gè)按鈕（UIButton）到場(chǎng)景。按鈕是交互的，所以用戶可以點(diǎn)擊它來(lái)觸發(fā)一個(gè)你設(shè)置的動(dòng)作。稍后，你將創(chuàng)建一個(gè)動(dòng)作，把label的文本重設(shè)為默認(rèn)值。

添加一個(gè)按鈕到場(chǎng)景

1. 在對(duì)象庫(kù)中，在過濾字段中輸入button來(lái)快速找到Button對(duì)象。

2. 從對(duì)象庫(kù)中拖拽Button對(duì)象到場(chǎng)景中。
   3 拖拽button讓它在text filed的下方，并讓其的左側(cè)緣和text field的左側(cè)緣對(duì)齊。
   當(dāng)看到如下所示時(shí)，停止拖拽：

   
   
   BBUI_button_place_2x.png
3. 雙擊button，并鍵入Set Default Label Text.。
4. 按下回車鍵讓button顯示新的文本。

5. 輸入文本后按鈕可能會(huì)發(fā)生移動(dòng)，如有移動(dòng)時(shí)，復(fù)位它。
   現(xiàn)在，你的場(chǎng)景應(yīng)該看上去如下所示：

   
   
   BBUI_button_rename_2x.png
   
   

   了解你添加的元素是如何真切的安排在場(chǎng)景中是有好處的。查看大綱視圖，來(lái)看哪些用戶界面元素已經(jīng)被添加到場(chǎng)景中。

查看大綱視圖

1. 在storyboard中，找到大綱視圖開關(guān)。

   
   
   BBUI_outlineview_toggle_2x.png
2. 如果大綱視圖是折疊的，就點(diǎn)擊開關(guān)展開它。
   需要時(shí)，可使用大綱視圖開關(guān)來(lái)折疊或展開大綱視圖。

大綱視圖，它出現(xiàn)在畫布的左側(cè)，讓你看到storyboard中對(duì)象的層級(jí)表示。

你應(yīng)該能夠看到你剛添加的text field，label，以及button都列在層級(jí)中。但是為什么你添加的用戶界面元素都嵌套在View之下呢？

視圖不僅顯示在屏幕上并對(duì)用戶的輸入作出反應(yīng)，它們還能作為其他視圖的容器。視圖被安排在一個(gè)被稱為視圖層的層級(jí)結(jié)構(gòu)中。視圖層定義了視圖相對(duì)于其他視圖的布局。在視圖層中，視圖中包含的視圖被稱為subview，而包含了一個(gè)視圖的父視圖被稱為這個(gè)視圖的superview。一個(gè)視圖可以有多個(gè)subviews，但是只能有一個(gè)superview。

BBUI_outlineview_2x.png

通常，每個(gè)場(chǎng)景都有自己的視圖層。每個(gè)視圖層的頂部都是內(nèi)容視圖（content view）。在當(dāng)前的場(chǎng)景中，內(nèi)容視圖被稱為View，是這個(gè)視圖控制器的最高層視圖。
text filed、label、以及button都是這個(gè)內(nèi)容視圖的子視圖。所有你放置在這個(gè)場(chǎng)景中視圖都將是這個(gè)內(nèi)容視圖的子視圖（盡管它們自己也能嵌套子視圖）。

預(yù)覽你的界面

周期性地預(yù)覽你的應(yīng)用可以檢查是不是所有的事都符合你的預(yù)期。你可以使用助理編輯器（assistant editor）來(lái)預(yù)覽應(yīng)用界面，它是顯示在主編輯器旁邊的一個(gè)輔助編輯器。

預(yù)覽界面

1. 點(diǎn)擊位于Xcode工具條中靠近Xcode右上角的Assistant按鈕，來(lái)打開助理編輯器。

   
   
   assistant_editor_toggle_2x.png

2. 如果你想要更大的工作空間，點(diǎn)擊Xcode工具條中的Navigation和Utilities按鈕來(lái)折疊導(dǎo)航器和實(shí)用區(qū)（utility area）。

   
   
   navigator_utilities_toggle_on_2x.png
   
   

   你也可以折疊大綱視圖。

3. 在編輯器選擇器欄中，它出現(xiàn)在助理編輯器的頂部，把助理編輯器從Automatic切換到Preview > Main.storyboard(Preview)。

   
   
   BBUI_assistant_editorselectorbar_2x.png
   
   
   BBUI_assistant_editorselectorbarpreview_2x.png
   
   

   正如你在助理編輯器中看到的那樣，這個(gè)預(yù)覽看上去和畫布幾乎相同。但是，這并不意味著沒有新東西。畫布和預(yù)覽都顯示了相同的屏幕尺寸（iPhone 7）和相同的方向（肖像，portrait）。如果你想檢查界面是否自適應(yīng)，你需要預(yù)覽不同的屏幕尺寸和不同方向。

   
   
   BBUI_preview_same_2x.png

4. 想要預(yù)覽風(fēng)景（landscape）方向，點(diǎn)擊預(yù)覽底部的旋轉(zhuǎn)（Rotate）按鈕。

   
   
   BBUI_preview_rotatebutton_2x.png
   
   

   很不幸，事情看起來(lái)不太對(duì)。Text field、label、以及button依舊保持著相同的尺寸，與屏幕左上角的位置關(guān)系也沒有改變。這意味著text field不再?gòu)倪叺竭叺奶畛淦聊弧?/p>
   

   BBUI_preview_rotated_2x.png

5. 想要預(yù)覽不同的屏幕尺寸，點(diǎn)擊助理編輯器底部的加號(hào)（Add）按鈕，選擇iPhone SE。

   
   
   BBUI_preview_addSE_2x.png

再一次，Text field、label、以及button依舊保持著相同的尺寸，與屏幕左上角的位置關(guān)系也沒有改變。但這次，text field延伸過了屏幕的右邊緣。

BBUI_preview_small_2x.png

要想創(chuàng)建一個(gè)自適應(yīng)的界面，你需要具體說(shuō)明界面如何適應(yīng)不同的屏幕尺寸。例如，當(dāng)界面界面旋轉(zhuǎn)到風(fēng)景（landscape）方向時(shí)，text field應(yīng)該伸長(zhǎng)。當(dāng)界面顯示在iPhone SE上時(shí)，text field應(yīng)該縮短。使用自動(dòng)布局（Auto Layout）你可以輕松的指定這些類型的界面規(guī)則。

（未完待續(xù)......）