設(shè)計(jì)用戶界面

設(shè)計(jì)用戶界面

視圖是構(gòu)建用戶界面的基石。理解如何使用視圖，以優(yōu)美且實(shí)用的方式清晰地呈現(xiàn)您的內(nèi)容十分重要。想要開發(fā)一個(gè)成功的應(yīng)用程序，至關(guān)重要的一點(diǎn)便是創(chuàng)建一個(gè)優(yōu)秀的用戶界面，有效地展示應(yīng)用程序的內(nèi)容。在本章中，您將會(huì)學(xué)習(xí)如何在串聯(lián)圖中創(chuàng)建和管理視圖來定義您的界面。

視圖層次

視圖不僅顯示在屏幕上并對(duì)用戶的輸入作出響應(yīng)，它們還可以充當(dāng)其他視圖的容器。因此，應(yīng)用程序中的視圖可按層次結(jié)構(gòu)進(jìn)行排列，我們將其稱為視圖層次。視圖層次定義了視圖相對(duì)于其他視圖的布局。在該層次內(nèi)，包含在某個(gè)視圖中的視圖實(shí)例稱為分視圖，而包含視圖的父視圖則被稱為該視圖實(shí)例的超視圖。雖然一個(gè)視圖實(shí)例可以有多個(gè)分視圖，但它只能有一個(gè)超視圖。

位于視圖層次頂部的是窗口對(duì)象。窗口由 UIWindow 類的實(shí)例表示，它可以作為基本的容器，您可以將要在屏幕上顯示的視圖對(duì)象添加到其中。窗口本身不會(huì)顯示任何內(nèi)容。如果要顯示內(nèi)容，請(qǐng)將內(nèi)容視圖（及其分視圖的層次）添加到窗口。

為了讓用戶看見內(nèi)容視圖及其分視圖，必須將內(nèi)容視圖插入到窗口的視圖層次中。使用串聯(lián)圖時(shí)，系統(tǒng)會(huì)自動(dòng)將內(nèi)容視圖插入到窗口的視圖層次中。應(yīng)用程序?qū)ο髸?huì)載入串聯(lián)圖，創(chuàng)建相關(guān)視圖控制器類的實(shí)例，解壓縮每個(gè)視圖控制器的內(nèi)容視圖層次，然后將初始視圖控制器的內(nèi)容視圖添加到窗口中。在下一章中，您會(huì)學(xué)到有關(guān)管理視圖控制器的更多內(nèi)容。目前，您只需專注于在串聯(lián)圖的單個(gè)視圖控制器中創(chuàng)建層次即可。

使用視圖構(gòu)建界面

設(shè)計(jì)應(yīng)用程序時(shí)，了解將何種視圖用于何種目的十分重要。例如，用來收集用戶的輸入文本的視圖（如文本欄）與可能用來顯示靜態(tài)文本的視圖（如標(biāo)簽）是不同的。使用 UIKit 視圖進(jìn)行繪圖的應(yīng)用程序很容易創(chuàng)建，因?yàn)槟梢钥焖俳M裝一個(gè)基本界面。UIKit 視圖對(duì)象是 UIView 類或其中一個(gè)子類的實(shí)例。UIKit 框架提供了許多類型的視圖，來幫助呈現(xiàn)和組織數(shù)據(jù)。

每個(gè)視圖都有其特定的功能，不過 UIKit 大體可分為以下七種常見類型：

類型	用途	示例
內(nèi)容	顯示特定類型的內(nèi)容，例如圖像或文本。	圖像視圖，標(biāo)簽
集	顯示視圖集或視圖組。	集視圖，表格視圖
控制	執(zhí)行操作或顯示信息。	按鈕，滑塊，開關(guān)
欄	導(dǎo)航或執(zhí)行操作。	工具欄，導(dǎo)航欄，標(biāo)簽欄
輸入	接收用戶輸入的文本。	搜索欄，文本視圖
容器	充當(dāng)其他視圖的容器。	視圖，滾動(dòng)視圖
模態(tài)	中斷應(yīng)用程序的正常流程，允許用戶執(zhí)行某種操作。	操作表單、提醒視圖

您可以使用 Interface Builder，以圖形方式構(gòu)建視圖。Interface Builder 提供了一個(gè)資源庫，其中包含了標(biāo)準(zhǔn)視圖、控制，以及構(gòu)建界面所需要的其他對(duì)象。從資源庫拖出這些對(duì)象之后，您可以將它們放到畫布上，并根據(jù)需要進(jìn)行排列。接著可使用檢查器配置這些對(duì)象，然后再將它們存儲(chǔ)到串聯(lián)圖中。您可以立即看到結(jié)果，無需編寫代碼以及生成并運(yùn)行應(yīng)用程序。

可以使用 UIKit 框架提供的標(biāo)準(zhǔn)視圖來顯示各種類型的內(nèi)容，但也可以自定義視圖，方法是子類化 UIView（或其后代）。自定視圖是 UIView 的子類，您可以自行在其中處理所有繪圖和事件處理任務(wù)。在這些教程中，您將不會(huì)使用自定視圖，但是在Defining a Custom View（定義自定視圖）中，可以了解到有關(guān)實(shí)現(xiàn)自定視圖的更多知識(shí)。

使用串聯(lián)圖來布局視圖

使用串聯(lián)圖在圖形環(huán)境中布局視圖的層次。您可以使用串聯(lián)圖，以一種直接且直觀的方式來處理視圖和構(gòu)建界面。

正如在第一個(gè)教程中所學(xué)到的，串聯(lián)圖由場(chǎng)景組成，每個(gè)場(chǎng)景有關(guān)聯(lián)的視圖層次。通過將視圖拖出對(duì)象庫并將其放在串聯(lián)圖場(chǎng)景中，可以自動(dòng)將它添加到該場(chǎng)景的視圖層次。視圖在該層次中的位置由您放置的位置決定。將視圖添加到場(chǎng)景后，您可以在畫布上對(duì)其進(jìn)行大小調(diào)整、操控、配置和移動(dòng)操作。

畫布還會(huì)顯示界面中對(duì)象的大綱視圖。大綱視圖顯示在畫布的左側(cè)，可讓您看到對(duì)象在串聯(lián)圖中的層次示意。

在串聯(lián)圖場(chǎng)景中以圖形方式創(chuàng)建的視圖層次實(shí)際上就是 Objective-C 對(duì)象的“緊縮”集合。運(yùn)行時(shí)，這些緊縮的對(duì)象會(huì)被解壓縮。運(yùn)行的結(jié)果就是配置了各種屬性的相關(guān)類（使用實(shí)用工具區(qū)域中各種檢查器以直觀方式來設(shè)置）的實(shí)例層次。

使用檢查器來配置視圖

在串聯(lián)圖中處理視圖時(shí)，檢查器面板是不可或缺的工具。檢查器面板顯示在對(duì)象庫上方的實(shí)用工具區(qū)域中。

每個(gè)檢查器都提供了配置界面中元素的重要選項(xiàng)。選擇串聯(lián)圖中的對(duì)象（例如視圖）后，可以使用各個(gè)檢查器來自定義該對(duì)象的不同屬性。

• File。讓您指定串聯(lián)圖的常規(guī)信息。
• Quick Help。提供有關(guān)對(duì)象的實(shí)用文稿。
• Identity。讓您指定對(duì)象的自定類并定義其輔助功能屬性。
• Attributes。讓您自定對(duì)象的可視化屬性。
• Size。讓您指定對(duì)象的大小以及 Auto Layout 屬性。
• Connections。讓您創(chuàng)建界面和源代碼之間的連接。

在第一個(gè)教程中，您使用了 Attributes 檢查器。而在接下來的整個(gè)教程中，您會(huì)繼續(xù)使用這些檢查器來配置串聯(lián)圖中的視圖和其他對(duì)象。特別需要指出的是，您可以使用 Attributes 檢查器來配置視圖，使用 Identity 檢查器來配置視圖控制器，使用 Connections 檢查器來創(chuàng)建視圖和視圖控制器之間的連接。

使用 Auto Layout 來定位視圖

開始在串聯(lián)圖中定位視圖時(shí)，您需要考慮各種情況。iOS 應(yīng)用程序會(huì)運(yùn)行在一系列不同的設(shè)備上，這些設(shè)備的屏幕大小、方向和語言各不相同。您應(yīng)該設(shè)計(jì)一個(gè)動(dòng)態(tài)而非靜態(tài)的界面，且該界面能無縫地響應(yīng)屏幕尺寸、設(shè)備方向、本地化語言以及制式的更改。

為了幫助您使用視圖來創(chuàng)建通用的界面，Xcode 提供了一種名為 Auto Layout 的工具。Auto Layout 是一種用來表示應(yīng)用程序的用戶界面中各種視圖之間關(guān)系的體系。它可讓您基于單個(gè)視圖或視圖組之間的約束來定義這些關(guān)系。

Auto Layout 菜單位于畫布的右下角，有四個(gè)部分。您可以使用該菜單來各種類型的約束添加到畫布上的視圖中，解決布局問題以及確定約束調(diào)整大小行為。

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