? ? ? ? 這節(jié)課讓你熟悉Xcode，它是你編寫應(yīng)用程序的工具。你會熟悉Xcode的項目結(jié)構(gòu)和學(xué)習(xí)如何瀏覽和使用之間的基本項目組成。在這一課，你會開始做一個簡單用戶界面（UI）的FoodTracker App在模擬器里查看它。當您完成時，您的應(yīng)用程序?qū)⒂幸粋€餐點的標簽名稱，一個可改變餐點的名稱文本字段，和一個可重置名稱的按鈕。?
學(xué)習(xí)目標
在課程結(jié)束時，你將能夠：
? ? ? ? ＊在Xcode創(chuàng)建一個項目
? ? ? ? ＊認識使用Xcode 項目模版創(chuàng)建關(guān)鍵目標文件
? ? ? ? ＊打開和切換項目中的文件
? ? ? ? ＊在iOS模擬器中運行應(yīng)用程序
? ? ? ? ＊在故事板上添加、移動和調(diào)整用戶界面元素的大小
? ? ? ? ＊使用屬性檢查器編輯在故事板中的UI元素的屬性
? ? ? ? ＊使用大綱視圖查看和重排UI元素
? ? ? ? ＊使用助理編輯預(yù)覽模式預(yù)覽故事板UI
? ? ? ? ＊使用自動布局來設(shè)置一個自動適應(yīng)用戶設(shè)備大小的UI。
創(chuàng)建一個新項目
? ? ? ? Xcode開發(fā)iOS應(yīng)用程序包括常見的幾種內(nèi)置的應(yīng)用程序模板，如游戲，以標簽為基礎(chǔ)的導(dǎo)航應(yīng)用程序，和應(yīng)用程序視圖表。大多數(shù)這些模板有預(yù)先設(shè)定的界面和源代碼文件。對于這一課，您將從最基本的模板開始：單視圖應(yīng)用程序。
著手創(chuàng)建一個新項目：
? ? ? ? 1.從應(yīng)用程序目錄里打開Xcode。
? ? ? ? 如果這是您第一次啟動Xcode，它會問你是否同意用戶協(xié)議和下載附加組件。按照提示通過這些屏幕到Xcode完全建立和準備開啟。
? ? ? ? 當Xcode啟動，直到歡迎窗口出現(xiàn)。
? ? ? ? ?如果出現(xiàn)的是一個項目窗口而不是歡迎窗口，不要擔心你可能在打開Xcode以前就創(chuàng)建或打開一個項目。只需在下一步的菜單項中創(chuàng)建項目。
? ? ? ? 2.在歡迎窗口，點擊“創(chuàng)建一個新的Xcode項目”（或選擇文件>新建>項目）。Xcode打開一個新窗口，顯示一個對話框，選擇一個模板。
? ? ? ? 3.在對話框頂部選擇iOS。
? ? ? ? 4.在應(yīng)用程序部分，選擇單視圖應(yīng)用程序，然后單擊Next。
5.在出現(xiàn)的對話框中，使用列出的值命名您的應(yīng)用程序，并為項目選擇其相應(yīng)選項：
? ? ? ? ＊ 產(chǎn)品名稱：FoodTracker （Xcode用你輸入的產(chǎn)品名稱命名你的項目和應(yīng)用程序。）
? ? ? ? ＊團隊：如果沒有自動填充，將團隊設(shè)置為無。
? ? ? ? ＊組織名稱：您組織的名稱或您自己的名稱。你可以留空。
? ? ? ? ＊組織標識符：如果您有一個組織標識符。如果沒有，你可以用com.example.
? ? ? ? ＊綁定標識符：此值是根據(jù)產(chǎn)品名稱和組織標識符自動生成的。
? ? ? ? ＊語言：Swift。
? ? ? ? ＊設(shè)備: Universal （一個Universal的應(yīng)用程序可以同時在iPhone和iPad上運行。）
? ? ? ? ＊Use Core Data: Unselected.
? ? ? ?＊Include Unit Tests: Selected.
? ? ? ?＊Include UI Tests: Unselected.
6.點擊 Next。
7.在出現(xiàn)的對話框中，選擇要保存項目的位置并單擊“創(chuàng)建”。
Xcode 在?workspace window（工作區(qū)窗口）里打開新項目.
? ? ? ? 工作區(qū)窗口（workspace window）可能會有一個消息，說“FoodTracker需要開發(fā)團隊簽名的錯誤圖標。”這樣的警告意味著你沒有成為iOS開發(fā)者，但是不要擔心，你可以不做，完成這些課程。您不需要開發(fā)團隊的簽名你可以在模擬器中運行應(yīng)用程序。
熟悉Xcode
? ? ? ? Xcode包括一切你需要創(chuàng)建一個應(yīng)用程序。它組織了創(chuàng)建應(yīng)用程序的所有文件和資源。它為代碼和用戶界面提供編輯器。另外，Xcode讓您建立，運行和調(diào)試你的應(yīng)用程序提供模擬器的iOS設(shè)備和功能強大的集成調(diào)試器。
花一些時間來熟悉Xcode工作的主要部分：
? ? ? ? ＊Navigator area.?提供對項目各個部分的快速訪問。
? ? ? ? ＊Editor area.編輯源代碼、用戶界面和其他資源。
? ? ? ? ＊Utility area.?提供有關(guān)選定項目和訪問現(xiàn)成資源的信息。公用事業(yè)區(qū)分為兩部分。頂部是“檢查面板”，在這里您可以查看和編輯關(guān)于導(dǎo)航器或編輯區(qū)域中選擇的項的信息。底部是“庫”窗格，您可以在其中訪問用戶界面元素、代碼片段和其他資源。
? ? ? ? ＊Toolbar.?用于構(gòu)建和運行應(yīng)用程序，查看運行任務(wù)的進度，以及配置工作環(huán)境。
不要擔心被這么多的術(shù)語搞混了，當需要使用時，每個區(qū)域都會被詳細地描述。
運行iOS模擬器
因為通過你的項目你在一個Xcode模板的基本的應(yīng)用環(huán)境自動為你設(shè)置。即使您沒有編寫任何代碼，也可以在沒有任何附加配置的情況下構(gòu)建和運行單個視圖應(yīng)用程序模板。
建立并運行你的應(yīng)用程序，使用iOS模擬器應(yīng)用程序，包括在Xcode。模擬器提供了一個你的應(yīng)用程序在設(shè)備上運行時的外觀和行為的概念。
模擬器可以為iPad和iPhone設(shè)計各種不同類型的硬件，所有屏幕尺寸和分辨率，這樣你就可以在你開發(fā)的每臺設(shè)備上模擬你的應(yīng)用程序。在這一課中，使用iPhone 7選項。
在模擬器中運行你的應(yīng)用程序
? ? ? ? 1.在該方案中的彈出菜單在Xcode工具欄，選擇iPhone 7。（該彈出菜單讓您選擇模擬器或設(shè)備，你想運行你的應(yīng)用程序。確保您選擇的是iPhone 7模擬器，而不是iOS設(shè)備。）
2.點擊位于Xcode工具欄的左上角運行按鈕。
? ? ? ? 如果你是第一次運行一個應(yīng)用程序，Xcode會詢問您是否要啟用開發(fā)者模式在您的Mac。開發(fā)者模式允許Xcode訪問某些調(diào)試功能，而無需每次輸入密碼。決定是否希望啟用開發(fā)人員模式并遵循提示。
? ? ? ? 如果您選擇不啟用開發(fā)人員模式，稍后可能會要求您輸入密碼。本課程假設(shè)開發(fā)人員模式已啟用。
3.觀察Xcode工具欄生成過程。（Xcode顯示構(gòu)建過程活動中觀察的消息，在中間的工具欄上。）
Xcode完成項目創(chuàng)建后，系統(tǒng)自動啟動。第一次啟動可能需要幾分鐘的時間。
模擬器在您指定的iPhone模式下打開，然后啟動應(yīng)用程序。最初，模擬器顯示應(yīng)用程序的啟動屏幕，然后切換到應(yīng)用程序的主界面。在未修改的單視圖應(yīng)用程序模板中，啟動屏幕和主界面是相同的。
現(xiàn)在，單視圖應(yīng)用程序模板做得不多，它只顯示一個白色屏幕。其他模板具有更復(fù)雜的行為。在擴展應(yīng)用程序之前，了解模板的用法是很重要的。在模擬器中運行您的應(yīng)用程序而不進行修改是開始理解的好方法。
退出模擬器選擇 Simulator > Quit Simulator (or pressing Command-Q).
預(yù)覽源代碼
單一視圖應(yīng)用程序模板附帶了一些設(shè)置應(yīng)用程序環(huán)境的源代碼文件。首先，在AppDelegate.swift文件看一看。
查看AppDelegate.swift源文件
? ? ? ?1.確保項目導(dǎo)航器在導(dǎo)航區(qū)域中打開。（項目導(dǎo)航器顯示項目中的所有文件。如果項目導(dǎo)航打不開，請在導(dǎo)航欄最左邊的按鈕選擇。另外也可以選擇View > Navigators > Show Project Navigator.）
2.如果有必要，可以通過點擊它旁邊的三角形打開FoodTracker在項目瀏覽器中的文件夾。
3.選擇AppDelegate.swift。（Xcode在主窗口的編輯區(qū)打開源文件。）
The App Delegate Source File ?應(yīng)用程序委托源文件
AppDelegate.swift源文件有兩個主要功能：
? ? ? ? ＊首先它定義了你的AppDelegate的類，app delegate?創(chuàng)建應(yīng)用程序內(nèi)容的窗口，并提供響應(yīng)應(yīng)用程序中狀態(tài)轉(zhuǎn)換的位置。
? ? ? ? ＊它為你的應(yīng)用程序創(chuàng)建一個入口點和一個為你的應(yīng)用程序提供輸入事件的運行循環(huán)。這項工作是由uiapplicationmain屬性做了（在UIApplicationMain），出現(xiàn)在文件的頂部。（使用uiapplicationmain屬性相當于調(diào)用uiapplicationmain函數(shù)和傳遞你的AppDelegate類的名字為代表的類的名稱。作為響應(yīng)，系統(tǒng)創(chuàng)建一個應(yīng)用程序?qū)ο?。?yīng)用程序?qū)ο筘撠煿芾響?yīng)用程序的生命周期。該系統(tǒng)還將為您的AppDelegate類的一個實例，并將其分配到應(yīng)用程序?qū)ο?。最后，系統(tǒng)啟動應(yīng)用程序。）
AppDelegate類自動創(chuàng)建當您創(chuàng)建一個新項目。除非你正在做的事情很不尋常的，你應(yīng)該使用這個類提供的Xcode初始化你的APP和響應(yīng)應(yīng)用程序級別的事件。AppDelegate類采用uiapplicationdelegate協(xié)議。該協(xié)議定義了一些用于設(shè)置應(yīng)用程序的方法，以響應(yīng)應(yīng)用程序的狀態(tài)更改，以及處理其他應(yīng)用程序級別的事件。
AppDelegate 類包含單獨一個屬性:?window.?
? ? ? ? var ?window: ?UIWindow?
此屬性存儲對應(yīng)用程序窗口的引用。此窗口表示應(yīng)用程序視圖層次結(jié)構(gòu)的根。它是所有應(yīng)用程序內(nèi)容繪制的地方。注意，窗口屬性是可選的，這意味著它在某個點上可能沒有值（nil）。
AppDelegate類還包含下列委托方法?methods的實現(xiàn):?
funcapplication(_application:UIApplication,didFinishLaunchingWithOptionslaunchOptions: [UIApplicationLaunchOptionsKey:Any]?) ->Bool
funcapplicationWillResignActive(_application:UIApplication)
funcapplicationDidEnterBackground(_application:UIApplication)
funcapplicationWillEnterForeground(_application:UIApplication)
funcapplicationDidBecomeActive(_application:UIApplication)
funcapplicationWillTerminate(_application:UIApplication)
這些方法讓應(yīng)用程序?qū)ο笈c應(yīng)用程序代表通信。在應(yīng)用程序狀態(tài)轉(zhuǎn)換過程中，例如，應(yīng)用程序啟動，轉(zhuǎn)換到后臺，以及應(yīng)用程序終止，應(yīng)用程序?qū)ο笳{(diào)用相應(yīng)的委托方法，給應(yīng)用程序一個響應(yīng)的機會。您不需要做任何特殊的事情，以確保在應(yīng)用程序?qū)ο鬄槟幚碓撟鳂I(yè)的正確時間調(diào)用這些方法。
每個委托方法都具有默認行為。如果從您的AppDelegate類離開模板實現(xiàn)空或刪除它，您可以將自己的代碼添加到類方法中，定義在調(diào)用方法時執(zhí)行的自定義行為。
模板還為每個類方法提供注釋。這些注釋描述了這些方法如何被應(yīng)用程序使用。您可以使用存根方法和注釋作為設(shè)計許多常見應(yīng)用程序級行為的藍圖。
在本課中，你不會使用任何自定義應(yīng)用程序委托的代碼，所以你不必為appdelegate.swift文件做任何更改。
The View Controller Source File?視圖控制器源文件
單視圖應(yīng)用程序模板的另一個源代碼文件：ViewController.swift。選擇viewcontroller.swift在項目瀏覽器中查看：
這個文件定義了一個名叫ViewController的自定義類的處理?，F(xiàn)在，這類只繼承了所有的行為定義的UIViewController。覆蓋或延伸的行為，你可以重寫定義在UIViewController的方法。
正如你可以看到在viewcontroller.swift文件，模板的實現(xiàn)重寫的viewdidload()和didreceivememorywarning()方法；然而，模板的類方法實現(xiàn)不做任何事情，除了調(diào)用這些方法的UIViewController。您可以添加自己的代碼來定制視圖控制器對這些事件的響應(yīng)。
雖然模板自帶的didreceivememorywarning()方法，如果你不需要，可以刪除它。
此刻，你的viewcontroller.swift代碼應(yīng)該是這個樣子：
importUIKit
classViewController:UIViewController{
overridefuncviewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
? ? }
}
您將在本課后面的源代碼文件中開始編寫代碼。
Open Your Storyboard 打開你的故事板
? ? ? ? 你可以開始為你的App使用故事板工作了。這是一個直觀的應(yīng)用程序的用戶界面，顯示屏幕的內(nèi)容以及它們之間的轉(zhuǎn)換。你用故事板奠定了流動或故事驅(qū)動程序。在構(gòu)建的過程中，您清晰地看到了正在構(gòu)建的內(nèi)容，立即得到關(guān)于什么是工作和什么不是什么的反饋，并立即對用戶界面進行可見的更改。
去打開你的故事板
? ? ? ? ＊在項目導(dǎo)航里，選擇main.storyboard。（用?Interface Builder在Xcode里打開故事板-一個可視化編輯器-在編輯區(qū)域。這個故事板的背景是畫布。您可以使用畫布添加和排列用戶界面元素。）
? ? ? ? 此刻，在你的App里的故事板上包含一個場景，這是在你的應(yīng)用程序的屏幕內(nèi)容。在畫布上的場景的左側(cè)有個箭頭，它是故事的切入點，這意味著，這一幕是應(yīng)用程序啟動時會首先加載。此場景包含由視圖控制器管理的單個視圖。您將更快地了解視圖和視圖控制器的作用。
當你在iPhone 7模擬器應(yīng)用程序中運行你的應(yīng)用程序時，這個場景中的視圖就是你在設(shè)備屏幕上看到的。然而，畫布上的場景可能與模擬器的屏幕的尺寸不相同。您可以在畫布底部選擇屏幕大小和方向。在這種情況下，它被設(shè)置為iPhone 7的肖像方向，所以畫布和模擬器是相同的。
盡管畫布顯示了特定的設(shè)備和方向，但重要的是要創(chuàng)建一個自適應(yīng)接口，一個自動調(diào)整的接口，使它看起來在任何設(shè)備和任何方向上都很好。當你開發(fā)你的界面時，你可以改變畫布的視圖，讓你看到你的界面如何適應(yīng)不同尺寸的屏幕。
Build the Basic UI（構(gòu)建基本UI）
? ? ? ? 現(xiàn)在是構(gòu)建基本界面接口的時候了。你將開始工作在讓你添加一個新的飯餐的一個用戶界面的場景跟蹤應(yīng)用程序：FoodTracker。
Xcode提供了一個對象庫，您可以添加到故事板文件。其中一些是出現(xiàn)在用戶界面中的元素，如按鈕和文本字段。其他，如視圖控制器和手勢識別，定義你的應(yīng)用程序的行為，但不出現(xiàn)在屏幕上。
出現(xiàn)在用戶界面中的元素稱為視圖（view）。視圖向用戶顯示內(nèi)容。它們是構(gòu)建用戶界面并以清晰、優(yōu)雅和有用的方式呈現(xiàn)內(nèi)容的基石。視圖有很多有用的內(nèi)置行為，包括屏幕顯示和對用戶輸入的響應(yīng)。
在iOS中所有的視圖對象的類型基本都是UIView或它的一個子類。許多UIView子類有高度專業(yè)化的外觀和行為。首先添加一個文本字段（UITextField），一個UIView子類，到你的場景里。文本字段允許用戶輸入一行文本，您將使用該文本作為用餐名稱。
在場景中添加文本字段
1. Choose Editor > Canvas,?并確保顯示邊界矩形被選中。（此設(shè)置使界面生成器在畫布周圍的所有視圖中繪制藍色邊框。許多視圖和控件具有透明的背景，因此很難看到它們的實際大小。系統(tǒng)視圖調(diào)整時引起的布局錯誤時，你可以預(yù)期更改的大小。啟用此設(shè)置可以幫助您準確地了解視圖層次結(jié)構(gòu)中正在發(fā)生的事情。）
2.?打開對象庫。（對象庫位于Xcode編輯區(qū)的右側(cè)底部。如果您沒有看到對象庫，請單擊它的按鈕，它是庫選擇器欄中左邊的第三個按鈕?；蛘?，選擇?View > Utilities > Show Object Library.）
3.?在對象庫中，在篩選器字段中鍵入文本字段，以便快速找到文本字段對象。
4.?將文本字段對象從對象庫拖到您的場景中。
5.?拖動文本字段，使其位于場景的上半部分，并與場景中的左邊緣對齊。當文本字段向左對齊時停止拖動文本字段。
藍色布局指南幫助您放置文本字段。只有當拖動或調(diào)整對象旁邊的對象時，布局指南才可見；當您放開文本字段時，它們就會消失。
6.?如果需要，單擊文本字段以顯示調(diào)整大小。（通過拖動它的大小調(diào)整來調(diào)整用戶界面元素的大小，這是在元素邊框上出現(xiàn)的小的白色方塊。通過選擇元素來顯示元素的大小調(diào)整。在這種情況下，文本字段應(yīng)該已經(jīng)被選中，因為您剛剛停止拖動它。如果您的文本字段看起來像下面的文本字段，您可以調(diào)整它的大??；如果沒有，請在畫布上選擇它。）
7.?調(diào)整文本字段的左、右邊緣，直到看到三個垂直布局指南：左邊距對齊、水平居中對齊和右對齊。
盡管您的場景中有文本字段，但沒有向用戶說明在該字段中輸入什么字段。使用文本字段的占位符文本提示用戶輸入新餐的名稱。
配置文本字段的占位符文本
1.?選擇文本字段后，在工具區(qū)域打開屬性檢查器。（當您在檢查器選擇器條的左邊單擊第四按鈕時，就會出現(xiàn)“屬性檢查器”。它可以讓你編輯你的腳本對象的屬性）
2.?在屬性檢查器中，找到標有占位符的字段，鍵入輸入：?Enter meal name。
3.?按回車顯示文本字段中的新占位符文本。
在編輯文本字段的屬性時，還可以編輯用戶選擇文本字段時顯示的系統(tǒng)鍵盤的屬性。
去配置文本字段的鍵盤
1.?確保文本字段仍然被選中。
2. 在屬性檢查器中，找到標記為返回鍵的字段并選擇完成（必要時向下滾動）。此更改將使鍵盤上的默認返回鍵對用戶更為顯著，將其更改為一個已完成的鍵。
3.?在屬性檢查器中，選擇“自動啟用返回鍵”復(fù)選框（必要時再次向下滾動）。此更改使用戶在輸入文本進入文本字段之前無法打開已完成的鍵，以確保用戶永遠不能輸入空字符串作為用餐名稱。
? ? ? ? ?下一步，添加一個標簽（UILabel）在畫面上方。標簽不是交互式的，它只是在用戶界面中顯示靜態(tài)文本。為了幫助您了解如何定義用戶界面中元素之間的交互，您將配置此標簽以顯示用戶進入文本字段的文本。這將是測試文本字段是否接受用戶輸入并適當處理的好方法。 ?
在場景中添加標簽
1.?在對象庫中，在篩選器字段中鍵入標簽以快速找到標簽對象。
2. 從對象庫中?拖動label 對象到場景中。
3.拖動標簽，使其位于文本字段的上方，并與場景中的左側(cè)邊距對齊。停止拖動標簽時，讓它符合準則。
4. 雙擊Label鍵入?Meal Name.
5.?按回車顯示標簽中的新文本。
現(xiàn)在，添加一個按鈕（UIButton）到場景。按鈕是交互式的，因此用戶可以點擊它來觸發(fā)您定義的操作。稍后，您將創(chuàng)建一個操作來將標簽文本重置為默認值。
在場景中添加一個按鈕
1.?在對象庫中，在篩選器字段中鍵入按鈕以快速找到按鈕對象。
2. 從對象庫中拖動按鈕控件到你的場景中。
3.?拖動按鈕，使其位于文本字段的下方，并與場景中的左側(cè)邊距對齊。停止拖動按鈕時，讓它扣符合準則。
4. 雙擊按鈕然后鍵入：? Set Default Label Text.
5. 按回車鍵顯示按鈕中的新文本。
6. 如果必要可重新定位按鈕。
? ? ? ? 這是很好的方法去了解您添加的元素實際上是如何安排在場景中的。查看大綱視圖，看看哪些用戶界面元素已添加到您的場景中。
查看大綱視圖
1. 在你的故事板，發(fā)現(xiàn)outline view toggle。
2.?如果大綱視圖已折疊，請單擊“切換”展開大綱視圖。您可以使用大綱視圖切換來折疊并展開所需的大綱視圖。
大綱視圖，它出現(xiàn)在畫布的左邊，提供您的腳本對象的分層表示。您應(yīng)該能夠看到剛才添加在層次結(jié)構(gòu)中的文本字段、標簽和按鈕。但是為什么您添加的用戶界面元素嵌套在視圖下呢？
視圖不僅顯示在屏幕上，而且對用戶輸入作出反應(yīng)，它們可以作為其他視圖的容器。視圖被安排在稱為視圖層次結(jié)構(gòu)的層次結(jié)構(gòu)中。視圖層次結(jié)構(gòu)定義視圖相對于其他視圖的布局。在這個層次，封閉在一個視圖的視圖稱為子視圖的父視圖，包括一個稱為它的父視圖的視圖。一個視圖可以有多個視圖的子視圖只有一個。
一般來說，每個場景都有自己的視圖層次結(jié)構(gòu)。在每個視圖層次結(jié)構(gòu)的頂部是一個內(nèi)容視圖。在當前場景中，內(nèi)容視圖被命名為視圖，視圖控制器中的頂層視圖。文本框、標簽、按鈕的內(nèi)容視圖的子視圖。你在這個場景中，將此內(nèi)容視圖的子視圖的所有其他視圖（盡管他們自己可以有嵌套的子視圖）。
Preview Your Interface 預(yù)覽你的界面
定期預(yù)覽你的應(yīng)用程序，檢查所有的東西都像你期望的樣子。您可以使用輔助編輯器預(yù)覽應(yīng)用程序界面，它將與主編輯器并排顯示一個輔助編輯器。
預(yù)覽界面
1.?點擊右上角附近的Xcode工具欄按鈕打開助理編輯助理。
2.?如果你想要更多的工作空間，點擊在Xcode工具欄的項目導(dǎo)航按鈕和實用面板按鈕，讓它們折疊起來。
3.?在編輯器選擇器欄中，它出現(xiàn)在助理編輯器的頂部，切換助理編輯器，或者選擇Preview > Main.storyboard (Preview).
正如您在助理編輯器中看到的，預(yù)覽看起來幾乎與畫布完全相同。然而，這并不能真正告訴你任何新的東西。畫布和預(yù)覽都顯示相同大小的屏幕（iPhone 7）和相同的方向（肖像）。如果你想檢查你的界面是否是自適應(yīng)的，你需要預(yù)覽不同大小的屏幕和不同的方向。
4. 若要預(yù)覽橫的方向，請單擊預(yù)覽底部的“旋轉(zhuǎn)”按鈕。
不幸的是，事情看起來不再正確了。文本字段、標簽和按鈕與屏幕左上角保持相同的大小和位置。這意味著文本字段不再將屏幕從頁邊空白處填充到頁邊空白處。
5.?若要預(yù)覽不同的屏幕大小，請單擊輔助編輯器底部的Add按鈕，然后選擇iPhone SE。
text field, label, and button再一次保持在相同的尺寸和位置上，并保持在屏幕的左上角. 但是，這一次，文本字段超過了屏幕右邊緣。
要創(chuàng)建一個自適應(yīng)界面，您需要指定界面如何調(diào)整到不同的屏幕大小。例如，當界面被旋轉(zhuǎn)到一個方向時，文本字段應(yīng)該增長。當界面顯示在iPhone SE上時，文本字段應(yīng)該縮小。您可以使用自動布局來輕松地指定這些接口規(guī)則。
Adopt Auto Layout ?采用自動布局
自動布局是一個強大的布局引擎，它幫助您設(shè)計自適應(yīng)布局，動態(tài)響應(yīng)對場景大小的任何更改。使用約束規(guī)則描述您的布局，該規(guī)則解釋了一個元素應(yīng)該相對于另一個元素的位置，或元素應(yīng)該是多大的位置。自動布局根據(jù)這些約束動態(tài)計算每個元素的大小和位置。
一個最簡單的定義你的布局方式是利用棧的觀點（uistackview）。堆棧視圖提供了一個精簡的接口，用于在列或行中排列視圖集合。堆棧視圖在引擎蓋下使用自動布局來計算它管理的所有視圖的大小和位置。這使您可以輕松地訪問自動布局的全部功能，同時大大減少了布局的復(fù)雜性。
采用自動布局，將現(xiàn)有的接口元素封裝到堆棧視圖中，然后添加在場景中放置堆棧視圖所需的約束。
在用餐場景中添加自動布局約束
1.?單擊標準按鈕返回標準編輯器。
拓展項目導(dǎo)航和實用面板通過點擊在Xcode工具欄上的導(dǎo)航和公用按鈕。
2.?在按下鍵盤上的shift鍵時，選擇文本字段、標簽和按鈕。
3.?在畫布的右下方，單擊“嵌入堆棧”按鈕。(或者，選擇 Editor > Embed In > Stack View.)
Xcode包裝用戶界面元素在堆棧，堆放在一起。Xcode分析你現(xiàn)有的布局圖，項目應(yīng)堆疊垂直、水平。
4.?如有必要，打開大綱視圖。選擇堆棧視圖對象。
5.?在屬性檢查器中，在間隔字段中鍵入8。按返回。您會發(fā)現(xiàn)用戶界面元素垂直地向外移動，堆棧視圖隨之增長。
6.?在畫布的右下方，打開添加新的約束菜單。
7.?在“間距到最近的鄰居”上方，單擊兩個水平約束和頂部垂直約束選擇它們。他們被選中時變紅了。
這些約束表示到最近的領(lǐng)先、拖尾和頂級鄰居的間距。在這樣的背景下，這個詞最近鄰方法最接近的用戶界面元素的邊界，可視圖，另一個用戶界面元素，或緣。因為“約束邊緣”復(fù)選框被選中，在這種情況下，堆棧視圖將被約束到父視圖的左、右緣。這提供了堆棧視圖和場景邊緣之間的空間。
另一方面，堆棧頂部相對于場景頂部布局指南受到限制。如果狀態(tài)欄可見，則頂部布局指南位于狀態(tài)欄的底部。如果不是，它位于場景的頂部。因此，您需要在堆棧視圖和布局指南之間添加一點空間。
8.?在左、右框中鍵入0，并在頂部框中鍵入20的間距。
9.?在更新框架旁邊的彈出菜單中，選擇新的約束項。這將使界面生成器在創(chuàng)建約束時自動更新受影響視圖的框架。
10.?在“添加新約束”菜單中，單擊添加3個約束按鈕。
label, text field, and button 已被左對齊并以適當?shù)拈g距布置, 但是text field 仍然沒有拉伸來填充屏幕的寬度。要解決這個問題，您需要添加一個附加約束。
調(diào)整堆棧中的文本字段寬度
1. 在你的故事板里, 選擇在菜單場景里的 text field .
2.?在畫布的右下方，再次打開“添加新約束”菜單。
3.?在“間距到最近的鄰居”上方，單擊右水平約束選擇它。它被選中時變成紅色。
4.?在右邊框中鍵入0。
5.?在更新框架旁邊的彈出菜單中，選擇新的約束項。
6.?在“添加新約束”菜單中，單擊添加1個約束按鈕。
檢查點：在IOS模擬器里運行您的應(yīng)用程序。旋轉(zhuǎn)模擬器：?choosing Hardware > Rotate Left and Hardware > Rotate Right (or Command-Left Arrow and Command-Right Arrow).?注意文本字段如何根據(jù)設(shè)備的方向和屏幕大小增長和縮小到合適的大小。還要注意狀態(tài)欄在景觀方向上是否消失了。
單擊文本字段內(nèi)，并使用屏幕鍵盤輸入文本。(如果你愿意, 你也可以用電腦上的鍵盤 ：選擇 Hardware > Keyboard > Connect Hardware Keyboard).
Debugging Auto layout?調(diào)試自動布局
如果您沒有得到預(yù)期的效果，請使用自動布局調(diào)試功能來幫助您?？梢允褂谩案聨卑粹o訪問這些功能，并解決“自動布局”問題菜單。
如果您收到關(guān)于錯位視圖的警告，請使用“更新幀”按鈕。這個按鈕更新選定的視圖的框架和它的所有子視圖。選擇場景的視圖控制器來更新場景中的所有視圖。您還可以選擇單擊“更新幀”按鈕僅更新所選視圖。
如果布局不符合您的預(yù)期，請單擊“解析自動布局”按鈕以調(diào)出調(diào)試命令菜單。此菜單中的所有命令都有兩種形式。一個影響當前選定的視圖。另一個影響當前視圖控制器中的所有視圖。如果所有的命令是灰色的，選擇場景的視圖控制器或一種觀點再次打開菜單。
選擇“重置”建議的約束有Xcode與有效制約集更新你的界面。選擇明確的約束來刪除用戶界面元素上的所有約束，然后嘗試按照前面的說明再次設(shè)置約束。
Wrapping Up 總結(jié)
在本課中，你已經(jīng)熟悉了一個Xcode項目的內(nèi)容，并與許多用于運行iOS應(yīng)用程序設(shè)計工具。您還構(gòu)建了一個簡單的用戶界面。
雖然該項目的場景還沒有做太多，但基本的用戶界面在那里，功能齊全。確保你的布局從一開始就是可靠的和可擴展的，這樣你就有了堅實的基礎(chǔ)。
? ? ? ? ? ? ? ? 注：這里提供完成本課中項目的樣本下載文件，可以在Xcode查看它。
? ? ? ? ? ? ? ? ? ? ? ?Download File
? ? ? ? PS：沒想到翻譯本文用了將近兩天的時間。近9000的文字量，圖片無數(shù)，本來打算放棄不翻譯了，因為對于熟悉Xcode人來說，本課程只需要幾分鐘就搞定了。我也不知道是什么力量吸引我把它翻譯完成，也許就是一種好奇，想看看到底iOS開發(fā)的根是什么樣子的僅此而已。后續(xù)的翻譯要看我的時間安排了，有空我就會翻譯，希望得到大家的交流，謝謝。
