重要：這是針對(duì)于正在開發(fā)中的API或技術(shù)的預(yù)備文檔(預(yù)發(fā)布版本)。蘋果提供這份文檔的目的是幫助你按照文中描述的方式對(duì)技術(shù)的選擇及界面的設(shè)計(jì)開發(fā)進(jìn)行規(guī)劃。這些信息有可能發(fā)生變化，因此根據(jù)本文檔的軟件開發(fā)應(yīng)當(dāng)基于最終版本的操作系統(tǒng)和文檔進(jìn)行測(cè)試。該文檔的新版本或許會(huì)隨著API或相關(guān)技術(shù)未來(lái)的發(fā)展而進(jìn)行更新。

翻譯自蘋果官網(wǎng):

https://developer.apple.com/library/prerelease/ios/referencelibrary/GettingStarted/DevelopiOSAppsSwift/Lesson2.html#//apple_ref/doc/uid/TP40015214-CH5-SW1

本教程讓你熟悉 Xcode 開發(fā)工具。對(duì)項(xiàng)目結(jié)構(gòu)有個(gè)初步了解，并學(xué)習(xí)如何使用 Xcode 的一些基本組件來(lái)為我們的 app 構(gòu)建一個(gè)簡(jiǎn)單的界面然后在模擬器中查看它。最后，app 應(yīng)該像這樣：

[圖片上傳失敗...(image-bcde35-1608214722107)]

學(xué)習(xí)目標(biāo):

學(xué)完本教程，你將學(xué)會(huì)：

• 在 Xcode 中創(chuàng)建新項(xiàng)目
• 認(rèn)識(shí) Xcode 項(xiàng)目模板創(chuàng)建的一些重要文件的功能
• 在項(xiàng)目中打開和切換文件
• 在模擬器中運(yùn)行 app
• 在 storyboard 中添加、移動(dòng)界面控件并調(diào)整它們的尺寸
• 使用自動(dòng)布局構(gòu)建一個(gè)自適應(yīng)用戶屏幕尺寸的界面

創(chuàng)建新項(xiàng)目

Xcode 隨附了幾個(gè)內(nèi)建應(yīng)用程序模板，可用于開發(fā)常見(jiàn)的 iOS 應(yīng)用程序，如游戲、基于標(biāo)簽瀏覽的應(yīng)用程序和基于表格視圖的應(yīng)用程序。這些模板大都預(yù)先配置了界面和源代碼文件，可作為您進(jìn)行開發(fā)工作的起點(diǎn)。本教程會(huì)從最基礎(chǔ)的模板開始：Single View Application。

步驟

1. 從 /Applications 目錄打開 Xcode。

   Xcode 歡迎窗口會(huì)出現(xiàn)。如果出現(xiàn)的是項(xiàng)目窗口，而不是歡迎窗口，請(qǐng)不要著急；這說(shuō)明您可能曾在 Xcode 中創(chuàng)建或打開過(guò)項(xiàng)目。您只需在接下來(lái)的步驟中，使用菜單項(xiàng)來(lái)創(chuàng)建項(xiàng)目。

   [圖片上傳失敗...(image-863682-1608214722107)]

2. 在歡迎窗口中，點(diǎn)按 Create a new Xcode project（或選取 File > New > Project）。
   Xcode 將打開一個(gè)新窗口并顯示對(duì)話框，讓您從中選取一個(gè)模板。

3. 在對(duì)話框左邊的 iOS 部分，選擇 Application 。

4. 在對(duì)話框的主區(qū)域中，點(diǎn)按 Single View Application，然后點(diǎn)按 Next。

   [圖片上傳失敗...(image-6ae01d-1608214722107)]

5. 在出現(xiàn)的對(duì)話框中，給應(yīng)用程序命名并選取應(yīng)用程序的其他選項(xiàng)。

   • Product Name：FoodTracker
     Xcode 會(huì)使用您輸入的產(chǎn)品名稱給您的項(xiàng)目和應(yīng)用程序命名。
   • Organization Name: 公司或你自己的名字?？梢灾每?。
   • Organization Identifier: 公司標(biāo)識(shí)符（如果有）。如果沒(méi)有，請(qǐng)使用 com.example。
   • Bundle Identifier: 根據(jù) product name 和 organization identifier 自動(dòng)生成。
   • Language: Swift
   • Devices: Universal
     Universal app 可以同時(shí)運(yùn)行在 iPhone 和 iPad 兩種設(shè)備上。
   • Use Core Date: 不選中。
   • Include Unit Tests: 選中。
   • Include UI Tests: 不選中。

   [圖片上傳失敗...(image-b9f1da-1608214722107)]

6. 點(diǎn)擊 Next。

7. 在出現(xiàn)的對(duì)話框中，選取項(xiàng)目的存放位置，然后點(diǎn)按 Create。
   Xcode 會(huì)在工作區(qū)窗口中打開新項(xiàng)目，窗口的外觀如下：

[圖片上傳失敗...(image-dbf5e6-1608214722107)]

在工作區(qū)窗口，你可能看到一個(gè)三角形警告消息，說(shuō)“沒(méi)有代碼簽名標(biāo)志”。提醒你沒(méi)有為 iOS 開發(fā)設(shè)置 Xcode 證書,但不要擔(dān)心，本教程并不需要證書。

熟悉 Xcode

Xcode 包括了您創(chuàng)建應(yīng)用程序時(shí)所需的一切。它不僅整理了創(chuàng)建應(yīng)用程序時(shí)所需的文件，還提供了代碼和界面編輯器，可讓您構(gòu)建和運(yùn)行應(yīng)用程序，并擁有強(qiáng)大的集成調(diào)試程序。

請(qǐng)花幾分鐘時(shí)間來(lái)熟悉 Xcode 工作區(qū)窗口。在接下來(lái)的整個(gè)教程中，您將會(huì)用到下面窗口中標(biāo)出的區(qū)域。不要被所有這些嚇倒，當(dāng)某個(gè)區(qū)域需要用到時(shí)再去詳述更多相關(guān)信息。

[圖片上傳失敗...(image-322788-1608214722107)]

運(yùn)行模擬器

由于項(xiàng)目是基于 Xcode 模板創(chuàng)建的，因此基本的應(yīng)用程序環(huán)境已經(jīng)自動(dòng)為您設(shè)置好了。即使沒(méi)有編寫任何代碼，也可以構(gòu)建和運(yùn)行 Single View Application 模板，而無(wú)需進(jìn)行任何額外的配置。

構(gòu)建和運(yùn)行您的 app，可以使用 Xcode 自帶的 iOS 模擬器。顧名思義，iOS 模擬器可模擬在 iOS 設(shè)備上運(yùn)行 app，讓您初步了解它的外觀和行為。

它可模擬多種不同類型的硬件，包括屏幕大小不同的 iPad、iPhone 等等。因此，您可以模擬在任何一款開發(fā)目標(biāo)設(shè)備上運(yùn)行 app。在本教程中，我們選擇使用“iPhone 6”。

在 iOS 模擬器中運(yùn)行 app

1. 從 Xcode 工具欄的 Scheme 彈出菜單中選取 iPhone 6。

   在 Scheme 彈出菜單中可以選擇你喜歡的 Simulator 或 Device 來(lái)運(yùn)行你的 app，但請(qǐng)確保選擇了 iPhone 6 Simulator，而不是 iOS Device。

   [圖片上傳失敗...(image-51f003-1608214722107)]

2. 點(diǎn)按 Xcode 工具欄左上角的 Run 按鈕。

   [圖片上傳失敗...(image-6894bb-1608214722107)]

   或者可以選取 Product > Run（或按下 Command-R）。

   如果是首次運(yùn)行 app，Xcode 會(huì)詢問(wèn)您是否要在 Mac 上啟用開發(fā)者模式。開發(fā)者模式可讓 Xcode 訪問(wèn)特定的調(diào)試功能，無(wú)需每次都輸入密碼。請(qǐng)決定是否要啟用開發(fā)者模式，然后按照提示操作。

   [圖片上傳失敗...(image-fbbdc4-1608214722107)]

   如果選擇不啟用，可能稍后會(huì)要求您輸入密碼。本課程假定已啟用了開發(fā)者模式。

3. 構(gòu)建過(guò)程完成后，請(qǐng)看 Xcode 工具欄。

   Xcode 會(huì)在工具欄中間的活動(dòng)顯示窗口中顯示有關(guān)構(gòu)建過(guò)程的消息。

Xcode 完成項(xiàng)目生成后，模擬器會(huì)自動(dòng)啟動(dòng)。首次啟動(dòng)時(shí)可能需要幾分鐘時(shí)間。

模擬器以你指定的 iPhone 模式開啟。在模擬的 iPhone 屏幕上，模擬器啟動(dòng)了你的 app。在 app 完成啟動(dòng)前，你會(huì)短暫看到一個(gè)帶有 app 名字 FoodTracker 的啟動(dòng)界面。

[圖片上傳失敗...(image-89ca76-1608214722108)]

之后會(huì)看到這樣的界面

[圖片上傳失敗...(image-6c1ae0-1608214722108)]

一如其名，Single View Application 模板并未包括過(guò)多的代碼，僅會(huì)顯示一個(gè)白色的屏幕。其他模板會(huì)有更多復(fù)雜的行為，因此在擴(kuò)展模板制作自己的 app 之前，先要弄清楚模板的用處，這一點(diǎn)很重要。而要做到這一點(diǎn)，一個(gè)很好的方式，就是先不做任何修改，直接運(yùn)行模板。

請(qǐng)選取 Simulator > Quit Simulator（或按下 Command-Q）來(lái)退出模擬器。

檢查源代碼

Single View Application 模板附帶了少量現(xiàn)成的源代碼來(lái)設(shè)置 app 環(huán)境，首先，讓我們看下 AppDelegate.swift 文件。

查看 AppDelegate.swift 源文件

1. 確保在導(dǎo)航區(qū)域打開了項(xiàng)目導(dǎo)航。
   項(xiàng)目導(dǎo)航會(huì)顯示項(xiàng)目中的所有文件。如果項(xiàng)目導(dǎo)航未打開，請(qǐng)點(diǎn)按導(dǎo)航選擇欄最左邊的按鈕。（或者選擇 View -> Navigators -> Show Project Navigator。）

   [圖片上傳失敗...(image-ca7c47-1608214722108)]

2. 如果需要，點(diǎn)擊項(xiàng)目導(dǎo)航旁邊的提示三角打開 FoodTracker 文件夾。

3. 選擇 AppDelegate.swift。
   Xcode 會(huì)在主編輯器窗口區(qū)域打開源文件。

   [圖片上傳失敗...(image-e1c5cd-1608214722108)]

   或者，雙擊 AppDelegate.swift 文件在單獨(dú)的窗口中打開它。

App Delegate 源文件

AppDelegate.swift 源文件有兩個(gè)主要功能：

• 為你的 app 創(chuàng)建入口以及一個(gè) run loop 來(lái)傳遞事件。這項(xiàng)工作由文件的頂部 UIApplicationMain 屬性完成（@UIApplicationMain）。UIApplicationMain 創(chuàng)建一個(gè) application 對(duì)象負(fù)責(zé)管理 app 和 app delegate 對(duì)象的生命周期。
• 定義 AppDelegate 類，它創(chuàng)建 window 供你的 app 的內(nèi)容進(jìn)行渲染，并響應(yīng) app 狀態(tài)轉(zhuǎn)換。 AppDelegate 類主要用于寫自定義系統(tǒng)級(jí)代碼的。

AppDelegate 類包含一個(gè)屬性：window。它使用這個(gè)屬性來(lái)保持窗口跟蹤并在窗口中繪制 app 的內(nèi)容。window 屬性是可選的，意味著有時(shí)候它是空的。

var window: UIWindow?

AppDelegate 類也包含一些重要模板方法的實(shí)現(xiàn)。這些預(yù)定義的方法允許 application 對(duì)象與 app delegate 交流。

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool
func applicationWillResignActive(application: UIApplication)
func applicationDidEnterBackground(application: UIApplication)
func applicationWillEnterForeground(application: UIApplication)
func applicationDidBecomeActive(application: UIApplication)
func applicationWillTerminate(application: UIApplication)

在 app 狀態(tài)變化過(guò)程中 - 例如，app 啟動(dòng)狀態(tài)，過(guò)渡到后臺(tái)狀態(tài)，和 app 終止?fàn)顟B(tài) - application 對(duì)象會(huì)調(diào)用 app delegate 中相應(yīng)的方法，給它一個(gè)機(jī)會(huì)來(lái)做合適的響應(yīng)。你不需要做任何特別的事情來(lái)確保這些方法在正確時(shí)間被調(diào)用 - application 對(duì)象為你做了這部分工作了。

這些自動(dòng)實(shí)現(xiàn)的方法中的每一個(gè)都有默認(rèn)的功能。如果讓模板實(shí)現(xiàn)為空或者從 AppDelegate 類中刪除它，當(dāng)方法被調(diào)用時(shí)你會(huì)得到默認(rèn)的功能。添加自定義代碼到這些模板方法，當(dāng)方法被調(diào)用了代碼相應(yīng)會(huì)執(zhí)行。在本課中，你不會(huì)使用任何自定義 app delegate 代碼，所以你不需要對(duì) AppDelegate.swift 文件做任何修改。

View Controller 源文件

Single View Application 模板生成了另外一個(gè)源文件： ViewController.swift 文件。在項(xiàng)目導(dǎo)航中選擇 ViewController.swift 查看。

[圖片上傳失敗...(image-87e108-1608214722108)]

文件定義了 UIViewController 的子類 ViewController。此刻，這個(gè)類簡(jiǎn)單繼承 UIViewController 定義的所有功能。為了覆寫或擴(kuò)展這些功能，覆寫 UIViewController 定義的方法(就像你看到的 ViewController.swift 文件中的 viewDidLoad() 和 didReceiveMemoryWarning() 方法)，或者實(shí)現(xiàn)自定義的方法。

盡管模板為你生成了 didReceiveMemoryWarning() 方法，在本教程并不會(huì)用到，所以刪掉它吧。

現(xiàn)在，ViewController.swift 代碼應(yīng)該像這樣：

import UIKit
 
class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    
}

稍后會(huì)在這個(gè)文件中寫代碼。

打開 Storyboard

準(zhǔn)備好使用 storyboard 工作吧。它是 app 用戶界面的可視化描述，顯示界面的內(nèi)容和界面間的跳轉(zhuǎn)。當(dāng)設(shè)計(jì)界面的時(shí)候可以實(shí)時(shí)看到效果 - 所見(jiàn)即所得。

打開 storyboard

• 在項(xiàng)目導(dǎo)航中，選擇 Main.storyboard。
  Xcode 會(huì)在編輯區(qū)的可視化界面編輯器 Interface Builder 中打開 storyboard。storyboard 的背景就是畫板(canvas)。使用畫板來(lái)添加和排列 UI 控件。

storyboard 應(yīng)該類似這樣：

[圖片上傳失敗...(image-d8a038-1608214722108)]

至此，app 的 storyboard 中包含了一個(gè)場(chǎng)景(scene),代表 app 滿屏的內(nèi)容。在場(chǎng)景的左邊有個(gè)箭頭表示這個(gè)場(chǎng)景是 storyboard 的入口，意味著當(dāng) app 啟動(dòng)的時(shí)候這個(gè)場(chǎng)景最先加載。現(xiàn)在，你看到場(chǎng)景僅僅包含單一控制器管理的視圖。不久你會(huì)學(xué)到更多關(guān)于視圖和視圖控制器的用處。

在 iPhone 6 模擬器中運(yùn)行你的 app，會(huì)在設(shè)備屏幕上看到場(chǎng)景中的視圖。但是在畫板中查看場(chǎng)景時(shí)，你會(huì)注意到它的尺寸并不是 iPhone 6 屏幕那么大。因?yàn)楫嫲逯械膱?chǎng)景是界面的廣義描繪，它可以被用于表示任何方向的任何設(shè)備。使用它創(chuàng)建一個(gè)自適應(yīng)界面，該界面會(huì)自動(dòng)調(diào)節(jié)大小，以便能適配當(dāng)前設(shè)備和方向。

構(gòu)建基本 UI

是時(shí)候構(gòu)建基本界面了。開始為場(chǎng)景做一個(gè) UI 讓你添加一份新的食物到你的食物跟蹤 app，F(xiàn)oodTracker。

Xcode 提供了可以添加到 storyboard 中的對(duì)象庫(kù)。有些如 button 和 text fields 等能顯示在界面中。其他的，如視圖控制器和手勢(shì)，主要用于定義 app 的功能而不是顯示在屏幕上。

在 UI 中顯示的控件被稱為視圖，視圖向用戶展示內(nèi)容。它們是構(gòu)建你的 UI 的基本模塊，它們用一種清晰優(yōu)雅的方式展示你的內(nèi)容,視圖有一些很有用內(nèi)置行為，包括在屏幕上顯示和響應(yīng)用戶的輸入。

iOS 中所有視圖對(duì)象都是 UIView 或它的一個(gè)子類。許多 UIView 的子類有高度定制的外觀和功能。通過(guò)往你的場(chǎng)景中添加 UITextField，一個(gè)UIView 的子類。它讓用戶輸入單行文本來(lái)作為食物的名字。

往場(chǎng)景中添加文本框

1. 打開對(duì)象庫(kù)。
   對(duì)象庫(kù)在 Xcode 右邊的實(shí)用工具區(qū)的底部。如果沒(méi)有看到它，點(diǎn)擊庫(kù)選擇欄左邊的第三個(gè)按鈕（或者選擇 View > Utilities > Show Object Library）

   [圖片上傳失敗...(image-651abe-1608214722108)]

   出現(xiàn)一個(gè)列表顯示每個(gè)對(duì)象的名字、描述和外觀。

2. 在對(duì)象庫(kù)的搜索框中輸入 text field 快速找到 Text Field對(duì)象。

3. 從對(duì)象庫(kù)中拖動(dòng) Text Field 對(duì)象到場(chǎng)景中。

   [圖片上傳失敗...(image-28bf08-1608214722108)]

   如果需要，選擇 Editor > Canvas > Zoom 來(lái)縮小畫板尺寸。

4. 拖動(dòng)文本框使它位于場(chǎng)景的前半部分，并與場(chǎng)景的左邊緣對(duì)齊。
   當(dāng)達(dá)到下圖效果停止拖動(dòng)。

   [圖片上傳失敗...(image-ce4e5-1608214722108)]

   藍(lán)色的布局引導(dǎo)線幫助你放置文本框。當(dāng)你拖動(dòng)文本框接近另一個(gè)對(duì)象或調(diào)整它的尺寸時(shí)布局引導(dǎo)線可見(jiàn)；而放開文本框線就消失了；

5. 如果需要，點(diǎn)擊文本框激活 resize handles。
   resize handles 是在控件邊緣出現(xiàn)的小白色方塊，通過(guò)拖動(dòng)它來(lái)調(diào)整 UI 控件的尺寸。選中對(duì)象激活控件的 resize handles。如果文本框像下面這樣，說(shuō)明已經(jīng)為調(diào)整大小做好準(zhǔn)備了；如果沒(méi)有，請(qǐng)?jiān)诋嫲逯羞x中它。

   [圖片上傳失敗...(image-1f45a7-1608214722108)]

6. 調(diào)整文本框左右邊距直到看到三個(gè)垂直布局引導(dǎo)線；左邊緣對(duì)齊、水平居中對(duì)齊和右邊緣對(duì)齊。

   [圖片上傳失敗...(image-ddbc29-1608214722108)]

盡管在場(chǎng)景中有文本框，但并沒(méi)有指引用戶在文本框中輸入什么。使用文本框的 placeholder 屬性來(lái)提示用戶輸入美食的名字。

配置文本框的 placeholder 文本

1. 選中文本框，在實(shí)用工具區(qū)打開屬性檢查器。
   當(dāng)你點(diǎn)擊檢查器選擇欄第四個(gè)按鈕打開屬性檢查器。它能讓你修改 storyboard 中對(duì)象的屬性。

   [圖片上傳失敗...(image-6b2049-1608214722108)]

2. 在屬性檢查器中，找到名為 Placeholder 的區(qū)域輸入 Enter meal name。

3. 回車確認(rèn)，會(huì)在文本框中顯示新的 placeholder 文本。

你的場(chǎng)景應(yīng)該如下：

[圖片上傳失敗...(image-a9e55b-1608214722108)]

當(dāng)修改文本框?qū)傩缘臅r(shí)候，還可以修改選中文本框時(shí)彈出的系統(tǒng)鍵盤的屬性。

配置文本框的鍵盤

1. 確保文本框仍然是選中狀態(tài)。
2. 在屬性檢查器中，找到名為 Reture Key 的區(qū)域并選擇 Done。
   把鍵盤默認(rèn)的 Return 鍵改成 Done 鍵,意思更加明白。
3. 在屬性檢查器中，選中 Auto-enable Return Key 復(fù)選框。
   這會(huì)讓用戶在文本框輸入文本之前不可點(diǎn)擊完成按鈕，確保用戶永遠(yuǎn)不會(huì)輸入一個(gè)空的字符串作為食物的名字。

下一步，在場(chǎng)景的頂部添加一個(gè)標(biāo)簽(UILabel)。標(biāo)簽不可交互；主要用于在界面中顯示靜態(tài)的文本。為了幫助你更好的理解 UI 控件間怎么交互的，請(qǐng)配置標(biāo)簽來(lái)顯示用戶在文本框中輸入的文字。這是很好的方式來(lái)測(cè)試用戶輸入的文字及對(duì)文字進(jìn)行適當(dāng)?shù)奶幚怼?/p>

往場(chǎng)景中添加標(biāo)簽

1. 在對(duì)象庫(kù)的搜索框中輸入 label 快速找到標(biāo)簽。
2. 從對(duì)象庫(kù)中拖動(dòng)標(biāo)簽對(duì)象放到你的場(chǎng)景中。
3. 拖動(dòng)標(biāo)簽使其在文本框上方并與場(chǎng)景左邊緣對(duì)齊。
   當(dāng)場(chǎng)景像下面這樣停止拖動(dòng)：

[圖片上傳失敗...(image-90e22d-1608214722108)]

4. 雙擊標(biāo)簽并輸入 Meal Name。
5. 回車確認(rèn)標(biāo)簽顯示新的文字。

你的場(chǎng)景應(yīng)該像這樣:

[圖片上傳失敗...(image-ab12-1608214722108)]

往界面中添加按鈕（UIButton）。按鈕可交互，所以用戶可以點(diǎn)擊它來(lái)觸發(fā)你定義的一個(gè) action。之后，你會(huì)創(chuàng)建一個(gè)重置標(biāo)簽文本為默認(rèn)值的動(dòng)作。

添加按鈕到你的場(chǎng)景中

1. 在對(duì)象庫(kù)的搜索框中輸入 buton 快速找到 Button 對(duì)象。

2. 從對(duì)象庫(kù)往你的場(chǎng)景中拖動(dòng)按鈕。

3. 拖動(dòng)以使其在文本框下方并與場(chǎng)景的左邊緣對(duì)齊。
   當(dāng)達(dá)到如下效果停止拖動(dòng)：

   [圖片上傳失敗...(image-92f072-1608214722108)]

4. 雙擊按鈕輸入 Set Default Label Text。

5. 回車確認(rèn)在按鈕中顯示了新的文字。

現(xiàn)在，你的場(chǎng)景應(yīng)該像這樣：

[圖片上傳失敗...(image-2ecb03-1608214722108)]

查看大綱視圖中所有已經(jīng)添加到你的場(chǎng)景的界面對(duì)象，這樣就能更好的理解這些對(duì)象如何排列了。

查看大綱視圖

1. 在 storyboard 中，找到 outline view toggle。

[圖片上傳失敗...(image-e31927-1608214722108)]

2. 如果大綱視圖被折疊了，點(diǎn)擊切換(toggle)按鈕來(lái)展開它。
   你可以使用 outline view toggle 來(lái)折疊和展開大綱視圖。

畫板左邊的大綱視圖能讓你看到 storyboard 中對(duì)象分層表示。你應(yīng)該看到了剛才添加的文本框、標(biāo)簽和按鈕了，但是為什么這些 UI 對(duì)象要嵌套在另一個(gè)視圖中？

視圖不止用于屏幕顯示和響應(yīng)用戶輸入，也可以當(dāng)做其他視圖的容器。視圖放在一個(gè)叫做 view hierarchy 的視圖層次結(jié)構(gòu)中。這個(gè)層次結(jié)構(gòu)定義了視圖間的布局關(guān)系。在層次中有父視圖和子視圖。一個(gè)視圖可以擁有多個(gè)子視圖但是只能擁有一個(gè)父視圖。

[圖片上傳失敗...(image-5d73a-1608214722108)]

通常每個(gè)場(chǎng)景都有自己的視圖層次結(jié)構(gòu)。在視圖層次的頂層是個(gè)內(nèi)容視圖。在當(dāng)前場(chǎng)景中，這個(gè)內(nèi)容視圖是視圖控制器的頂層視圖。而文本框、標(biāo)簽和按鈕是它的子視圖。你放置在場(chǎng)景中所有其他視圖都是內(nèi)容視圖的子視圖（盡管它們自己可以有嵌套的子視圖）

預(yù)覽界面

定期預(yù)覽 app 來(lái)檢查它是否按照你期望的目標(biāo)來(lái)開發(fā)。通過(guò)使用輔助編輯器來(lái)預(yù)覽 app 的界面，它是顯示在主編輯器旁邊的第二個(gè)編輯器。

預(yù)覽界面

1. 點(diǎn)擊 Xcode 右上角工具欄中的 Assistant 按鈕來(lái)打開輔助編輯器。
   [圖片上傳失敗...(image-2f18e4-1608214722108)]

2. 點(diǎn)擊 Xcode 工具欄中 Navigator 和 Utilities 按鈕來(lái)收縮項(xiàng)目導(dǎo)航和實(shí)用工具區(qū),這樣就有更多的工作空間了。

   [圖片上傳失敗...(image-5014bb-1608214722108)]

   同樣可以收縮大綱視圖。

3. 在輔助編輯器頂部的編輯器選擇欄中，將輔助編輯器從 Automatic 切換為 Preview > Main.storyboard。

[圖片上傳失敗...(image-2dc8a2-1608214722108)]

正如在輔助編輯器中看到的那樣，文本框看起來(lái)不太正確。它超過(guò)了屏幕的邊界了。在故事板中它看起來(lái)是正確的，但為什么在 iPhone 預(yù)覽中會(huì)出現(xiàn)這種問(wèn)題呢？

[圖片上傳失敗...(image-25aa88-1608214722108)]

這時(shí)候需要為不同尺寸的 iPhone 和 ipad 屏幕構(gòu)建一個(gè)自適應(yīng)界面。例如，當(dāng)界面縮小到 iPhone 屏幕大小，文本框應(yīng)該收縮。當(dāng)界面變成 ipad 屏幕大小，文本框應(yīng)該更長(zhǎng)。您可以使用自動(dòng)布局來(lái)指定這些規(guī)則。

使用自動(dòng)布局(Auto Layout)

自動(dòng)布局是一個(gè)功能強(qiáng)大的布局引擎，它可以幫助您設(shè)計(jì)自適應(yīng)界面。向它表達(dá)你的意圖來(lái)描述場(chǎng)景中對(duì)象的位置，然后讓布局引擎決定如何最好地實(shí)現(xiàn)這一意圖。使用約束規(guī)則來(lái)描述你的意圖，說(shuō)明一個(gè)對(duì)象相對(duì)于另一個(gè)的位置，它應(yīng)該是什么大小，當(dāng)布局空間減少了這兩個(gè)對(duì)象應(yīng)該收縮。

與自動(dòng)布局相結(jié)合，有一個(gè)很有用的工具就是堆棧視圖（UIStackView）。用于在一個(gè)列或行中放置布局對(duì)象的集合。它能充分利用自動(dòng)布局的力量，創(chuàng)建動(dòng)態(tài)適應(yīng)設(shè)備方向、屏幕大小和可用空間變化的用戶界面。

您可以輕松地將現(xiàn)有的界面加入堆棧視圖中，添加必要的約束，以使堆棧視圖在不同的情況下顯示正確。

為食物場(chǎng)景添加自動(dòng)布局約束

1. 點(diǎn)擊 Standard 按鈕返回標(biāo)準(zhǔn)編輯器。

   [圖片上傳失敗...(image-152ed9-1608214722108)]

   點(diǎn)擊 Navigator 和 Utilities 按鈕展開項(xiàng)目導(dǎo)航和實(shí)用工具區(qū)。

2. 按住鍵盤的 Shift 鍵，選中文本框、標(biāo)簽和按鈕。

   [圖片上傳失敗...(image-4c1fc5-1608214722108)]

3. 在畫板的底部，單擊 Stack 按鈕。（或者選擇 Editor > Embed In > Stack View）。

   [圖片上傳失敗...(image-9b9672-1608214722108)]

   Xcode 將 UI 控件堆疊在堆棧視圖中并分析布局算出所有項(xiàng)應(yīng)該垂直而不是水平堆疊。

   [圖片上傳失敗...(image-448db6-1608214722108)]

4. 打開大綱視圖。選擇 Stack View 對(duì)象。

   [圖片上傳失敗...(image-e5096d-1608214722108)]

5. 在屬性檢查器的 Spacing field 中輸入 12?；剀嚧_認(rèn)。
   你會(huì)注意到垂直方向拉開了一些距離，以及與它們一起變長(zhǎng)的堆棧視圖

   [圖片上傳失敗...(image-561741-1608214722108)]

6. 打開畫板右下角的 Pin 菜單。

   [圖片上傳失敗...(image-d23382-1608214722108)]

7. 點(diǎn)擊菜單中Spacing to nearest neighbor上面的兩個(gè)橫向約束和垂直 top 約束來(lái)選中它們。當(dāng)約束被選中就會(huì)變紅。

   [圖片上傳失敗...(image-7883c2-1608214722108)]

   這些約束表明間距最近的 leading、trailing、以及 top 邊界的間距。術(shù)語(yǔ) "nearest neighbor" 意思是最近的 UI 對(duì)象的邊界,UI 對(duì)象可以是父視圖或同級(jí)視圖。因?yàn)?“Constrain to margins” 復(fù)選框被選中，堆棧視圖將與它父視圖的左、右和頂部邊界有額外8個(gè)點(diǎn)的間距。

8. 在左、右框中輸入0，在頂部框中輸入60的間隙。

9. 在 Update Frames 旁邊的彈出菜單中，選擇 Items of New Constraints 。
   Pin menu 應(yīng)該像這樣:

   [圖片上傳失敗...(image-1e8876-1608214722108)]

10. 在 Pin 菜單中，點(diǎn)擊 Add 3 Constraints 按鈕。

    [圖片上傳失敗...(image-34c9cd-1608214722108)]

最后的場(chǎng)景 UI 應(yīng)該像這樣:

[圖片上傳失敗...(image-a56c1c-1608214722108)]

你會(huì)注意到，文本框并沒(méi)有像之前那樣超過(guò)場(chǎng)景的邊界了。

調(diào)整場(chǎng)景文本框的寬度

1. 選擇 storyboard 中食物場(chǎng)景的文本框。

2. 打開畫板右下角的 Pin 菜單。

   [圖片上傳失敗...(image-6d5a0a-1608214722108)]

3. 點(diǎn)擊Spacing to nearest neighbor上面的兩個(gè)水平約束來(lái)選中它們。當(dāng)選中后它們變成紅色。

4. 在左右框中輸入0。

5. 在 Update Frames 旁邊的彈出框中，選擇 Items of New Constraints。
   Pin 菜單應(yīng)該像這樣：

   [圖片上傳失敗...(image-1b8efd-1608214722108)]

6. 在 Pin 菜單中，點(diǎn)擊 Add 2 Constraints 按鈕。

   [圖片上傳失敗...(image-a7c33e-1608214722108)]

7. 選中文本框，在實(shí)用工具區(qū)打開尺寸檢查器。
   點(diǎn)擊檢查器欄第五個(gè)按鈕打開尺寸檢查器。它能讓你編輯 storyboard 中控件的尺寸和位置。

   [圖片上傳失敗...(image-8c1581-1608214722108)]

8. 在 Intrinsic Size 區(qū)域，選擇 Placeholder（這個(gè)區(qū)域在尺寸檢查器的底部，所以你需要滾動(dòng)才能看到它。）。
   文本框的尺寸基于它的內(nèi)容，而內(nèi)容定義了它的固有內(nèi)容尺寸(intrinsic content size)。固有內(nèi)容尺寸是指顯示視圖所有內(nèi)容所需的最小尺寸?，F(xiàn)在，文本框的內(nèi)容僅是其占位字符串，但是用戶實(shí)際輸入的內(nèi)容有可能比它長(zhǎng)。

   食物場(chǎng)景界面應(yīng)該像這樣:

   [圖片上傳失敗...(image-2bc54e-1608214722108)]

檢驗(yàn)：在模擬器中運(yùn)行你的 app。文本框不再超過(guò)屏幕的邊界了。點(diǎn)擊文本框并使用鍵盤輸入一些文本（通過(guò)按 Command-K 切換軟鍵盤）。如果旋轉(zhuǎn)設(shè)備( Command-左箭頭 或 Command-右箭頭)或在不同設(shè)備上運(yùn)行 app，文本框會(huì)按照設(shè)備方向和屏幕尺寸縮放到合適的大小。注意，在橫屏方向上狀態(tài)欄消失了。

[圖片上傳失敗...(image-9cd6dc-1608214722108)]

如果沒(méi)有得到你期望的效果，請(qǐng)使用自動(dòng)布局調(diào)試功能。單擊 Resolve Auto Layout Issues 圖標(biāo)，并選擇 Reset to Suggested Constraints 讓 Xcode 使用默認(rèn)的約束來(lái)更新界面。或單擊 Resolve Auto Layout Issues 圖標(biāo)，并選擇 Clear Constraints 來(lái)刪除界面對(duì)象的所有約束，然后再一次按照之前的步驟來(lái)設(shè)置約束。

[圖片上傳失敗...(image-80700c-1608214722108)]

注意:

為了看到本課的完整示例項(xiàng)目，下載文件并在 Xcode 中查看它。