Start Developing iOS Apps Today系列（四）

Start Developing iOS Apps Today系列之設計與交互

4、設計用戶界面

      視圖是構建用戶界面的基石。理解如何使用視圖，以優美且實用的方式清晰地呈現您的內容十分重要。想要開發一個成功的應用程序，相當重要的一點即是建立一個優秀的用戶界面，有效地展現應用程序的內容。在本章中，您將會學習如何在串聯圖中建立和管理視圖來定義您的界面。

視圖層次

      視圖不只顯示在屏幕上並對用戶的輸入做出響應，它們還能夠充當其餘視圖的容器。所以，應用程序中的視圖可按層次結構進行排列，咱們將其稱爲視圖層次。視圖層次定義了視圖相對於其餘視圖的佈局。在該層次內，包含在某個視圖中的視圖實例稱爲分視圖，而包含視圖的父視圖則被稱爲該視圖實例的超視圖。雖然一個視圖實例能夠有多個分視圖，但它只能有一個超視圖。

      位於視圖層次頂部的是窗口對象。窗口由UIWindow類的實例表示，它能夠做爲基本的容器，您能夠將要在屏幕上顯示的視圖對象添加到其中。窗口自己不會顯示任何內容。若是要顯示內容，請將內容視圖（及其分視圖的層次）添加到窗口。

      爲了讓用戶看見內容視圖及其分視圖，必須將內容視圖插入到窗口的視圖層次中。使用串聯圖時，系統會自動將內容視圖插入到窗口的視圖層次中。應用程序對象會 載入串聯圖，建立相關視圖控制器類的實例，解壓縮每一個視圖控制器的內容視圖層次，而後將初始視圖控制器的內容視圖添加到窗口中。在下一章中，您會學到有關 管理視圖控制器的更多內容。目前，您只需專一於在串聯圖的單個視圖控制器中建立層次便可。

使用視圖構建界面

      設計應用程序時，瞭解將何種視圖用於何種目的十分重要。例如，用來收集用戶的輸入文本的視圖（如文本欄）與可能用來顯示靜態文本的視圖（如標籤）是不一樣 的。使用 UIKit 視圖進行繪圖的應用程序很容易建立，由於您能夠快速組裝一個基本界面。UIKit 視圖對象是UIView類或其中一個子類的實例。UIKit 框架提供了許多類型的視圖，來幫助呈現和組織數據。

      每一個視圖都有其特定的功能，不過 UIKit 大致可分爲如下七種常見類型：

類型	用途	示例
內容	顯示特定類型的內容，例如圖像或文本。	圖像視圖，標籤
集	顯示視圖集或視圖組。	集視圖，表格視圖
控制	執行操做或顯示信息。	按鈕，滑塊，開關
欄	導航或執行操做。	工具欄，導航欄，標籤欄
輸入	接收用戶輸入的文本。	搜索欄，文本視圖
容器	充當其餘視圖的容器。	視圖，滾動視圖
模態	中斷應用程序的正常流程，容許用戶執行某種操做。	操做表單、提醒視圖

      您可使用 Interface Builder，以圖形方式構建視圖。Interface Builder 提供了一個資源庫，其中包含了標準視圖、控制，以及構建界面所須要的其餘對象。從資源庫拖出這些對象以後，您能夠將它們放到畫布上，並根據須要進行排列。 接着可以使用檢查器配置這些對象，而後再將它們存儲到串聯圖中。您能夠當即看到結果，無需編寫代碼以及生成並運行應用程序。

      可使用 UIKit 框架提供的標準視圖來顯示各類類型的內容，但也能夠自定義視圖，方法是子類化UIView（或其後代）。自定視圖是UIView的子類，您能夠自行在其中處理全部繪圖和事件處理任務。在這些教程中，您將不會使用自定視圖，可是在Defining a Custom View（定義自定視圖）中，能夠了解到有關實現自定視圖的更多知識 in View Programming Guide for iOS。

使用串聯圖來佈局視圖

      使用串聯圖在圖形環境中佈局視圖的層次。您可使用串聯圖，以一種直接且直觀的方式來處理視圖和構建界面。

      正如在第一個教程中所學到的，串聯圖由場景組成，每一個場景有關聯的視圖層次。經過將視圖拖出對象庫並將其放在串聯圖場景中，能夠自動將它添加到該場景的視 圖層次。視圖在該層次中的位置由您放置的位置決定。將視圖添加到場景後，您能夠在畫布上對其進行大小調整、操控、配置和移動操做。

      畫布還會顯示界面中對象的大綱視圖。大綱視圖顯示在畫布的左側，可以讓您看到對象在串聯圖中的層次示意。

      在串聯圖場景中以圖形方式建立的視圖層次實際上就是 Objective-C 對象的「緊縮」集合。運行時，這些緊縮的對象會被解壓縮。運行的結果就是配置了各類屬性的相關類（使用實用工具區域中各類檢查器以直觀方式來設置）的實例層次。

使用檢查器來配置視圖

      在串聯圖中處理視圖時，檢查器面板是不可或缺的工具。檢查器面板顯示在對象庫上方的實用工具區域中。

      每一個檢查器都提供了配置界面中元素的重要選項。選擇串聯圖中的對象（例如視圖）後，可使用各個檢查器來自定義該對象的不一樣屬性。

• File。讓您指定串聯圖的常規信息。

• Quick Help。提供有關對象的實用文稿。

• Identity。讓您指定對象的自定類並定義其輔助功能屬性。

• Attributes。讓您自定對象的可視化屬性。

• Size。讓您指定對象的大小以及 Auto Layout 屬性。

• Connections。讓您建立界面和源代碼之間的鏈接。

      在第一個教程中，您使用了 Attributes 檢查器。而在接下來的整個教程中，您會繼續使用這些檢查器來配置串聯圖中的視圖和其餘對象。特別須要指出的是，您可使用 Attributes 檢查器來配置視圖，使用 Identity 檢查器來配置視圖控制器，使用 Connections 檢查器來建立視圖和視圖控制器之間的鏈接。

使用 Auto Layout 來定位視圖

      開始在串聯圖中定位視圖時，您須要考慮各類狀況。iOS 應用程序會運行在一系列不一樣的設備上，這些設備的屏幕大小、方向和語言各不相同。您應該設計一個動態而非靜態的界面，且該界面能無縫地響應屏幕尺寸、設備方向、本地化語言以及制式的更改。

      爲了幫助您使用視圖來建立通用的界面，Xcode 提供了一種名爲 Auto Layout 的工具。Auto Layout 是一種用來表示應用程序的用戶界面中各類視圖之間關係的體系。它可以讓您基於單個視圖或視圖組之間的約束來定義這些關係。

      Auto Layout 菜單位於畫布的右下角，有四個部分。您可使用該菜單來各類類型的約束添加到畫布上的視圖中，解決佈局問題以及肯定約束調整大小行爲。

      在第二個教程中，您將短暫地使用 Auto Layout 給 ToDoList 應用程序添加支持橫排模式的功能。