在學(xué)習(xí)了查看視圖控制器和視圖后，我們要學(xué)習(xí)的是如何配置視圖，在開始之前想讓我們來添加一些用戶界面元素吧。
Xcode 提供了對象庫，你可以將庫中的對象添加到串聯(lián)圖文件，其中的一些對象屬于視圖中的用戶界面元素，例如按鈕和文本欄，其他對象為高級對象，例如視圖控制器和手勢識別器�！癏ello World View Controller”場景已經(jīng)包含了一個視圖，現(xiàn)在需要添加一個按鈕、一個標(biāo)簽和一個文本欄。
將對象庫中的用戶界面 (UI) 元素拖移到畫布上的視圖中，來添加用戶界面元素。UI 元素添加到視圖后，可以適度移動它們的位置和調(diào)整大小。
將 UI 元素添加到視圖并適當(dāng)進(jìn)行布局
1. 如有需要，選擇項目導(dǎo)航器中的 MainStoryboard.storyboard，在畫布上顯示“Hello World View Controller”場景。
2. 如有需要，打開對象庫。對象庫出現(xiàn)在實用工具區(qū)域的底部。如果看不到對象庫，你可以點按其按鈕，即庫選擇欄中從左邊起的第三個按鈕。
3. 在對象庫中，從“Objects”彈出式菜單中選取“Controls”。Xcode 將控制列表顯示在彈出式菜單下方。該列表顯示每個控制的名稱、外觀及其功能的簡短描述。
4. 從列表中拖一個文本欄、一個圓角矩形按鈕和一個標(biāo)簽到視圖上，一次一個。
5. 在視圖中，拖移文本欄將其放置在視圖的左上角附近。
在移動文本欄或任何其他 UI 元素時，會出現(xiàn)藍(lán)色的虛線（稱為對齊參考線），有助于將項目與視圖的中心和邊緣對齊。當(dāng)你看到視圖的左方和上方對齊參考線（如下圖所示）時，停止拖移文本欄：
6. 在視圖中，準(zhǔn)備調(diào)整文本欄的大小。
通過拖移調(diào)整大小控制柄（顯示在元素邊框上的小白方塊）來調(diào)整 UI 元素的大小。一般情況下，在畫布上或在大綱視圖中選擇一個元素，該元素的調(diào)整大小控制柄就會顯露出來。在本例中，因為你剛剛停止拖移，文本欄應(yīng)該已被選定。如果文本欄外觀如下圖所示，就可以調(diào)整它的大��；否則請在畫布上或在大綱視圖中選擇它。
7. 拖移文本欄右側(cè)的調(diào)整大小控制柄，直到視圖右側(cè)的對齊參考線出現(xiàn)。
當(dāng)看到畫布像下圖這樣時，停止調(diào)整文本欄大�。�
8. 在仍然選定文本欄時，打開“Attributes”檢查器（如有需要的話）。
9. 在“Text Field Attributes”檢查器頂部附近的“Placeholder”欄中，鍵入短語 Your Name。
顧名思義，“Placeholder”欄提供的淺灰色文本是為了幫助用戶理解能夠在文本欄中輸入何種信息。在運行的應(yīng)用程序中，用戶只要在文本欄內(nèi)輕按，占位符文本就會立即消失。
10. 還是在“Text Field Attributes”檢查器中，點按中間的“Alignment”按鈕，使文本欄的文本居中顯示。
在輸入占位符文本和更改對齊設(shè)置后，“Text Field Attributes”檢查器外觀應(yīng)該像這樣：
11. 在視圖中，拖移標(biāo)簽到文本欄下方，并使其左邊緣和文本欄的左邊緣對齊。
12. 拖移標(biāo)簽的右側(cè)調(diào)整大小控制柄，使標(biāo)簽與文本欄同寬。
比起文本欄，標(biāo)簽有更多的調(diào)整大小控制柄。這是因為你可以調(diào)整標(biāo)簽的高度和寬度，但只能調(diào)整文本欄的寬度�，F(xiàn)在不是要更改標(biāo)簽的高度，因此不要拖移標(biāo)簽四個角的調(diào)整大小控制柄。要拖移的是標(biāo)簽右側(cè)中間的那個調(diào)整大小控制柄。
13. 在“Label Attributes”檢查器中，點按中間的“Alignment”按鈕，使出現(xiàn)在標(biāo)簽中的文本居中顯示。
14. 拖移按鈕使其靠近視圖底部并且水平居中。
15. 在畫布上，連按該按鈕，然后輸入文本 Hello。
在添加文本欄、標(biāo)簽和按鈕 UI 元素，并對布局做出建議的修改后，你的項目看起來應(yīng)該是這樣的：
你可能注意到，當(dāng)你將文本欄、標(biāo)簽和按鈕添加到背景視圖時，Xcode 在名為 Constraints 的大綱視圖中插入了項目。Cocoa Touch 具有一個自動布局系統(tǒng)，讓你定義用戶界面元素的布局約束。這些約束定義用戶界面元素之間的關(guān)系，當(dāng)其他視圖的大小改變或設(shè)備擺放方向改變時，該關(guān)系影響各界面元素如何改變其位置和幾何形狀。現(xiàn)在不要改變你添加到用戶界面的視圖的默認(rèn)約束。
你還可以對文本欄進(jìn)行一些修改，使文本欄的行為符合用戶的期望。首先，因為用戶要輸入自己的姓名，你可以確保 iOS 對用戶鍵入的每個英文單詞的首字母實施大寫。其次，還可以確保與文本欄相關(guān)聯(lián)的鍵盤配置為輸入姓名（而不是數(shù)字），并且鍵盤顯示“Done”按鈕。
這些更改所遵循的原則是：因為在設(shè)計時，你已知道文本欄將包含何種類型的信息，你可以配置文本欄使它運行時的外觀和行為符合用戶的任務(wù)。這些配置都可以在“Attributes”檢查器中修改。
配置文本欄
1. 在視圖中，選擇文本欄。
2. 在“Text Field Attributes”檢查器中，進(jìn)行以下選擇：
·在“Capitalization”彈出式菜單中，選取“Words”。
·確�！癒eyboard”彈出式菜單設(shè)定為“Default”。
·在“Return Key”彈出式菜單中，選取“Done”。
選定以上選項后，“Text Field Attributes”檢查器應(yīng)該是這樣的：
在 Simulator 中運行應(yīng)用程序，以確定所添加的 UI 元素外觀正如所期望的樣子。如果點按“Hello”按鈕，該按鈕應(yīng)該高亮顯示；如果在文本欄內(nèi)點按，鍵盤應(yīng)該出現(xiàn)。不過，這時按鈕沒有任何功能，標(biāo)簽還是空的，而且鍵盤出現(xiàn)后無法使它消失。要添加此功能，需要在 UI 元素和視圖控制器之間進(jìn)行適當(dāng)?shù)倪B接。如何建立連接的問題我們會在明天的內(nèi)容中給大家解決。
注：因為只是在 Simulator 中（而不是在設(shè)備上）運行應(yīng)用程序，所以是通過點按來激活控制，而不是用手輕按的方式。
|