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

使用 Empty Application 模板有助于理解 iOS 應(yīng)用程序的基本結(jié)構(gòu)，以及如何將內(nèi)容呈現(xiàn)給用戶。了解完所有組件的工作方式后，您可以將其他模板用在自己的應(yīng)用程序上，來節(jié)省一些配置時(shí)間。

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

1.從 /Applications 目錄打開 Xcode。

Xcode 歡迎窗口會(huì)出現(xiàn)。

http://wiki.jikexueyuan.com/project/ios-developer-library/images/welcome_to_xcode_window_2x.png" alt="" />

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

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

http://wiki.jikexueyuan.com/project/ios-developer-library/images/project_template_window_2x.png" alt="" />

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

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

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

http://wiki.jikexueyuan.com/project/ios-developer-library/images/new_project_window_2x.png" alt="" />

請(qǐng)使用以下值：

Product Name：ToDoList
Xcode 會(huì)使用您輸入的產(chǎn)品名稱給您的項(xiàng)目和應(yīng)用程序命名。
Company Identifier：您的公司標(biāo)識(shí)符（如果有）。如果沒有，請(qǐng)使用 com.example。
Class Prefix：XYZ

Xcode 會(huì)使用類前綴名稱來命名為您創(chuàng)建的類。Objective-C 類的名稱必須是代碼中唯一的詞，并區(qū)別于任何可能在框架或捆綁包中使用的詞。為使類名稱保持唯一性，通常要為所有類添加前綴。Apple 已經(jīng)為框架類保留了兩個(gè)字母組成的前綴，所以請(qǐng)使用三個(gè)字母或更長(zhǎng)的前綴。

6.從“Devices”彈出式菜單中選取“iPhone”。

前文中已經(jīng)提到，使用 iPhone 界面創(chuàng)建應(yīng)用程序是最簡(jiǎn)單的入門方式。為 iPad 創(chuàng)建應(yīng)用程序或創(chuàng)建通用應(yīng)用程序的技術(shù)與此相同。

7.點(diǎn)按“Next”。

8.在出現(xiàn)的對(duì)話框中，選取項(xiàng)目的存放位置，然后點(diǎn)按“Create”。

Xcode 會(huì)在工作區(qū)窗口中打開新項(xiàng)目，窗口的外觀類似：

http://wiki.jikexueyuan.com/project/ios-developer-library/images/workspace_window_2x.png" alt="" />

熟悉 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í)間來熟悉 Xcode 工作區(qū)窗口。在接下來的整個(gè)教程中，您將會(huì)用到下面窗口中標(biāo)識(shí)出的控制。點(diǎn)按不同的按鈕，體驗(yàn)一下它們的工作方式。如果要了解有關(guān)界面某個(gè)部分的更多信息，請(qǐng)閱讀其幫助文章。方法是按住 Control 鍵點(diǎn)按 Xcode 中的區(qū)域，然后從出現(xiàn)的快捷菜單中選取文章。

http://wiki.jikexueyuan.com/project/ios-developer-library/images/xcode_overview_2x.png" alt="" />

運(yùn)行 iOS Simulator

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

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

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

在 iOS Simulator 中運(yùn)行應(yīng)用程序

1.從 Xcode 工具欄的“Scheme”彈出式菜單中選取“iPhone Retina (4-inch)”。

http://wiki.jikexueyuan.com/project/ios-developer-library/images/scheme_popup_2x.png" alt="" />

繼續(xù)瀏覽菜單，查看 iOS Simulator 中的其他硬件選項(xiàng)。

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

http://wiki.jikexueyuan.com/project/ios-developer-library/images/xcode_toolbar_full_2x.png" alt="" />

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

如果是首次運(yùn)行應(yīng)用程序，Xcode 會(huì)詢問您是否要在 Mac 上啟用開發(fā)者模式。開發(fā)者模式可讓 Xcode 訪問特定的調(diào)試功能，無需每次都輸入密碼。請(qǐng)決定是否要啟用開發(fā)者模式，然后按照提示操作。如果選取不啟用，可能稍后會(huì)要求您輸入密碼。本教程假定已啟用了開發(fā)者模式。

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

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

iOS Simulator 會(huì)按照您的指定，以 iPhone 模式打開。在模擬的 iPhone 屏幕上，iOS Simulator 會(huì)打開您的應(yīng)用程序。（如果此時(shí)在 Xcode 調(diào)試程序中看到一則信息，請(qǐng)不必?fù)?dān)心，稍后的教程中會(huì)有解釋。）

http://wiki.jikexueyuan.com/project/ios-developer-library/images/ios_simulator_blank_2x.png" alt="" />

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

探索完應(yīng)用程序后，請(qǐng)選取“iOS Simulator”>“Quit iOS Simulator”（或按下 Command-Q）來退出 iOS Simulator。

檢查源代碼

Empty Application 模板附帶了少量現(xiàn)成的源代碼，用于設(shè)置應(yīng)用程序環(huán)境。大多數(shù)工作都由 UIApplicationMain 函數(shù)來完成，它在項(xiàng)目的 main.m 源文件中會(huì)被自動(dòng)調(diào)用。UIApplicationMain 函數(shù)會(huì)創(chuàng)建一個(gè)應(yīng)用程序?qū)ο髞碓O(shè)置應(yīng)用程序基礎(chǔ)結(jié)構(gòu)，以配合 iOS 系統(tǒng)運(yùn)作。包括創(chuàng)建一個(gè)運(yùn)行循環(huán)，將輸入事件傳遞給應(yīng)用程序。

您不需要直接處理 main.m 源文件，但是了解一下它的工作方式也是頗有趣味的。

查看 main.m 源文件

1.請(qǐng)確定項(xiàng)目導(dǎo)航器已在導(dǎo)航器區(qū)域中打開。

項(xiàng)目導(dǎo)航器會(huì)顯示項(xiàng)目中的所有文件。如果項(xiàng)目導(dǎo)航器未打開，請(qǐng)點(diǎn)按導(dǎo)航器選擇欄最左邊的按鈕。

http://wiki.jikexueyuan.com/project/ios-developer-library/images/navigator_selector_bar_2x.png" alt="" />

2.點(diǎn)按項(xiàng)目導(dǎo)航器中“Supporting Files”文件夾旁邊的顯示三角形，打開文件夾。

3.選擇 main.m。

Xcode 會(huì)在窗口的主編輯器區(qū)域打開源文件，外觀類似于：

http://wiki.jikexueyuan.com/project/ios-developer-library/images/main_file_2x.png" alt="" />

如果連按該文件，它會(huì)在單獨(dú)的窗口中打開。您可以根據(jù)需要進(jìn)行選擇：點(diǎn)按文件一次，將其在主項(xiàng)目窗口中打開；或是連按文件，將其在單獨(dú)的窗口中打開。

main 中的 main.m 函數(shù)會(huì)調(diào)用自動(dòng)釋放池 (autorelease pool) 中的 UIApplicationMain 函數(shù)。

@autoreleasepool {
   return UIApplicationMain(argc, argv, nil, NSStringFromClass([XYZAppDelegate class]));
}

@autoreleasepool 語(yǔ)句支持應(yīng)用程序的內(nèi)存管理。自動(dòng)引用計(jì)數(shù) (Automatic Reference Counting, ARC) 利用編譯器追蹤對(duì)象的所有者，使內(nèi)存管理變得簡(jiǎn)單；@autoreleasepool 是內(nèi)存管理基礎(chǔ)結(jié)構(gòu)的一部分。

調(diào)用 UIApplicationMain 會(huì)創(chuàng)建應(yīng)用程序的兩個(gè)重要初始組件：

UIApplication 類的實(shí)例，稱為應(yīng)用程序?qū)ο蟆?/p>

應(yīng)用程序?qū)ο罂晒芾響?yīng)用程序事件循環(huán)，并協(xié)調(diào)其他高級(jí)的應(yīng)用程序行為。定義在 UIKit 框架中的這個(gè)類，不要求您編寫任何額外的代碼，就可以達(dá)成其任務(wù)。

XYZAppDelegate 類的實(shí)例，稱為應(yīng)用程序委托。

Xcode 創(chuàng)建此類，作為設(shè)置 Empty Application 模板的一部分。應(yīng)用程序委托會(huì)創(chuàng)建一個(gè)呈現(xiàn)應(yīng)用程序內(nèi)容的窗口，并為響應(yīng)應(yīng)用程序內(nèi)的狀態(tài)轉(zhuǎn)換提供位置。這個(gè)窗口是您編寫自定應(yīng)用程序級(jí)代碼的地方。與所有的類一樣，XYZAppDelegate 類在應(yīng)用程序的兩個(gè)源代碼文件中被定義：接口文件 XYZAppDelegate.h；實(shí)現(xiàn)文件 XYZAppDelegate.m。

以下是應(yīng)用程序?qū)ο蠛蛻?yīng)用程序委托互動(dòng)的方式。應(yīng)用程序啟動(dòng)時(shí)，應(yīng)用程序?qū)ο髸?huì)調(diào)用應(yīng)用程序委托上已定義的方法，使自定代碼有機(jī)會(huì)執(zhí)行其操作，這正是運(yùn)行應(yīng)用程序的有趣之處。為了深入理解應(yīng)用程序委托的角色，請(qǐng)從接口文件開始查看其源代碼。如果要查看應(yīng)用程序委托的接口文件，請(qǐng)?jiān)陧?xiàng)目導(dǎo)航器中選擇 XYZAppDelegate.h。應(yīng)用程序委托的界面包含了單一屬性：window。有了這個(gè)屬性，應(yīng)用程序委托才會(huì)跟蹤能呈現(xiàn)所有應(yīng)用程序內(nèi)容的窗口。

下一步，請(qǐng)查看應(yīng)用程序委托的實(shí)現(xiàn)文件。請(qǐng)?jiān)陧?xiàng)目導(dǎo)航器中選擇 XYZAppDelegate.m。應(yīng)用程序委托的實(shí)現(xiàn)包含了一些重要方法的“骨架”。這些預(yù)定義的方法可讓應(yīng)用程序?qū)ο笈c應(yīng)用程序委托進(jìn)行溝通。在一個(gè)重要的運(yùn)行時(shí)事件（例如，應(yīng)用程序啟動(dòng)、低內(nèi)存警告和應(yīng)用程序終止）中，應(yīng)用程序?qū)ο髸?huì)調(diào)用應(yīng)用程序委托中相應(yīng)的方法，使其有機(jī)會(huì)進(jìn)行適當(dāng)?shù)捻憫?yīng)。您無需執(zhí)行任何特殊的操作，來確定這些方法是否會(huì)在正確的時(shí)間被調(diào)用，因?yàn)閼?yīng)用程序?qū)ο髸?huì)幫您處理這部分的工作。

這些自動(dòng)實(shí)現(xiàn)的方法都具有一個(gè)默認(rèn)的行為。就算將骨架實(shí)現(xiàn)留空，或?qū)⑺鼜?XYZAppDelegate.m 文件中刪除，這些行為在方法被調(diào)用時(shí)，都會(huì)默認(rèn)執(zhí)行。您可以使用這些骨架來放置附加的自定代碼，以在方法被調(diào)用時(shí)執(zhí)行。例如，XYZAppDelegate.m 文件中的第一個(gè)方法包含了幾行代碼，用于設(shè)置應(yīng)用程序的窗口，并讓應(yīng)用程序首次運(yùn)行時(shí)顯示白色的背景顏色。在本教程中，您不會(huì)使用到任何自定應(yīng)用程序委托代碼，因此可以移除這段代碼。

配置應(yīng)用程序委托的實(shí)現(xiàn)文件

請(qǐng)?jiān)?XYZAppDelegate.m 中查找 application:didFinishLaunchingWithOptions: 方法。它是文件中的第一個(gè)方法。
從該方法中刪除前三行代碼，然后它會(huì)顯示為：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    return YES;
}

Xcode 會(huì)自動(dòng)存儲(chǔ)更改。它會(huì)時(shí)刻跟蹤并存儲(chǔ)您的所有操作。（您可以通過選取“Edit”>“Undo Typing”來撤銷所作的更改。）

創(chuàng)建串聯(lián)圖

現(xiàn)在，您應(yīng)該已經(jīng)準(zhǔn)備好創(chuàng)建應(yīng)用程序的串聯(lián)圖了。串聯(lián)圖能直觀展示應(yīng)用程序的用戶界面、顯示內(nèi)容屏幕以及它們之間的轉(zhuǎn)換。您可以使用串聯(lián)圖對(duì)驅(qū)動(dòng)應(yīng)用程序的流程或構(gòu)思進(jìn)行布局。

要了解串聯(lián)圖融入應(yīng)用程序的方法，在本教程中您可以手動(dòng)創(chuàng)建一個(gè)，然后將其添加到應(yīng)用程序內(nèi)。與開始使用的 Empty Application 模板不同，其他 Xcode 模板包含了預(yù)配置的串聯(lián)圖，提供了視圖、視圖控制器和相關(guān)的源文件，用于設(shè)置該類型的應(yīng)用程序的基本架構(gòu)。手動(dòng)配置完串聯(lián)圖后，您將會(huì)看到各個(gè)部分是如何配合工作的。然后，您就可以使用預(yù)配置有串聯(lián)圖的項(xiàng)目模板，開始應(yīng)用程序開發(fā)了，這會(huì)節(jié)省不少時(shí)間。

創(chuàng)建新的串聯(lián)圖

選取“File”>“New”>“File”（或按下 Command-N）。
這時(shí)將會(huì)出現(xiàn)一個(gè)對(duì)話框，提示您為新文件選取模板。
在左邊，選擇 iOS 下方的“User Interface”。
點(diǎn)按“Storyboard”，然后點(diǎn)按“Next”。
在“Devices”選項(xiàng)中，選擇“iPhone”。
點(diǎn)按“Next”。
這時(shí)會(huì)出現(xiàn)一個(gè)對(duì)話框，提示您選取一個(gè)位置并為新串聯(lián)圖命名。
在“Save As”欄中，將文件命名為 Main。
請(qǐng)確定將文件與項(xiàng)目存儲(chǔ)在同一個(gè)目錄中。

http://wiki.jikexueyuan.com/project/ios-developer-library/images/save_storyboard_2x.png" alt="" />

在“Group”選項(xiàng)中，選擇“ToDoList”。
對(duì)于“Targets”，選擇“ToDoList”旁邊的復(fù)選框。此選項(xiàng)可讓 Xcode 在構(gòu)建應(yīng)用程序時(shí)包括新的串聯(lián)圖。
點(diǎn)按“Create”。

這時(shí)，一個(gè)新的串聯(lián)圖文件將創(chuàng)建完成，并被添加到項(xiàng)目中。您可以在這個(gè)文件中工作，對(duì)應(yīng)用程序的內(nèi)容進(jìn)行布局。

現(xiàn)在，需要讓 Xcode 知道您想將此串聯(lián)圖用作應(yīng)用程序中的界面。開始時(shí)，應(yīng)用程序?qū)ο髸?huì)檢查該應(yīng)用程序是否配置了主界面。如果已配置，應(yīng)用程序?qū)ο髸?huì)在應(yīng)用程序啟動(dòng)時(shí)載入已定義的串聯(lián)圖。

將串聯(lián)圖設(shè)為應(yīng)用程序的主界面

1.在項(xiàng)目導(dǎo)航器中，選擇您的項(xiàng)目。

在工作區(qū)窗口的編輯器區(qū)域，Xcode 會(huì)顯示項(xiàng)目編輯器，可讓您查看和編輯與應(yīng)用程序構(gòu)建有關(guān)的細(xì)節(jié)。

2.在“Targets”的下方，選擇“ToDoList”。

http://wiki.jikexueyuan.com/project/ios-developer-library/images/select_target_2x.png" alt="" />

如果“Project”和“Targets”列表未顯示在項(xiàng)目編輯器中，請(qǐng)點(diǎn)按編輯器面板左上角的顯示三角形。

http://wiki.jikexueyuan.com/project/ios-developer-library/images/show_projects_and_targets_2x.png" alt="" />

3.選擇“General”標(biāo)簽。

4.在“Deployment Info”的下方，找到“Main Interface”選項(xiàng)。

5.選擇您的串聯(lián)圖：Main.storyboard。

將場(chǎng)景添加到串聯(lián)圖中

現(xiàn)在，串聯(lián)圖已經(jīng)創(chuàng)建完成，接下來讓我們開始添加應(yīng)用程序的內(nèi)容吧。Xcode 提供了對(duì)象庫(kù)，您可以將庫(kù)中的對(duì)象添加到串聯(lián)圖文件。其中的一些對(duì)象屬于視圖中的用戶界面元素，例如按鈕和文本欄。其他的對(duì)象則定義了應(yīng)用程序的行為，但它們不會(huì)顯示在屏幕上，如視圖控制器和手勢(shì)識(shí)別器。

首先，請(qǐng)將視圖控制器添加到串聯(lián)圖中。視圖控制器管理了相應(yīng)的視圖及其分視圖。在下一章，“App Development Process”中，您將會(huì)了解到有關(guān)視圖角色和視圖控制器的更多信息。

將視圖控制器添加到串聯(lián)圖

1.在項(xiàng)目導(dǎo)航器中，選擇 Main.storyboard。

Xcode 會(huì)在編輯器區(qū)域的 Interface Builder（其可視化界面編輯器）中打開串聯(lián)圖。由于串聯(lián)圖是空的，因此您看到的是空白畫布。畫布可用來添加和排列用戶界面的元素。

2.打開對(duì)象庫(kù)。

對(duì)象庫(kù)出現(xiàn)在實(shí)用工具區(qū)域的底部。如果看不到對(duì)象庫(kù)，您可以點(diǎn)按其按鈕，即庫(kù)選擇欄中左起第三個(gè)按鈕。（如果看不到實(shí)用工具區(qū)域，可以選取“View”>“Utilities”>“Show Utilities”來顯示。）

http://wiki.jikexueyuan.com/project/ios-developer-library/images/object_library_2x.png" alt="" />

列表顯示每個(gè)對(duì)象的名稱、描述和可視化表示。

3.將“View Controller”對(duì)象從列表拖到畫布中。

如果在對(duì)象庫(kù)中找不到標(biāo)題為“View Controller”的對(duì)象，請(qǐng)?jiān)诹斜硐路降奈谋緳谥墟I入內(nèi)容來過濾對(duì)象列表。鍵入 View Controller，那么過濾后的列表中就只會(huì)顯示視圖控制器對(duì)象。

現(xiàn)在，應(yīng)用程序中的串聯(lián)圖包含了一個(gè)場(chǎng)景。畫布上指向場(chǎng)景左側(cè)的箭頭是“initial scene indicator”（初始場(chǎng)景指示器），它表示此場(chǎng)景是應(yīng)用程序啟動(dòng)時(shí)首先載入的場(chǎng)景?，F(xiàn)在，您在畫布上看到的場(chǎng)景包含了單個(gè)視圖，由視圖控制器管理。雖然是在 iOS Simulator 中運(yùn)行應(yīng)用程序，但實(shí)際上這也是您將在設(shè)備屏幕上看到的視圖。在 iOS Simulator 上運(yùn)行應(yīng)用程序有助于驗(yàn)證所有配置正確與否。執(zhí)行該操作前，請(qǐng)?jiān)趫?chǎng)景中添加一些可以在應(yīng)用程序運(yùn)行時(shí)看見的內(nèi)容。

將標(biāo)簽添加到場(chǎng)景

1.在對(duì)象庫(kù)中，找到“Label”對(duì)象。

如果曾在過濾文本欄中輸入過內(nèi)容，那么需要先清除原有內(nèi)容，才能看到“Label”對(duì)象。您也可以在過濾欄中鍵入“Label”來快速查找“Label”對(duì)象。

2.將“Label”對(duì)象從列表拖到場(chǎng)景中。

http://wiki.jikexueyuan.com/project/ios-developer-library/images/dragging_label_2x.png" alt="" />

3.將標(biāo)簽拖到場(chǎng)景的中央，直到出現(xiàn)水平和垂直參考線。

看到以下圖標(biāo)時(shí)，停止拖移標(biāo)簽：

http://wiki.jikexueyuan.com/project/ios-developer-library/images/centering_text_field_2x.png" alt="" />

參考線表示目前標(biāo)簽已水平和垂直居中。（只有在參考線旁拖移對(duì)象或調(diào)整其大小時(shí)，參考線才可見；因此當(dāng)您松開標(biāo)簽時(shí)，參考線會(huì)消失。）

4.連按標(biāo)簽的文本，選中并進(jìn)行編輯。

5.鍵入“Hello, World!”并按下 Return 鍵。

如有需要，請(qǐng)將標(biāo)簽重新居中。

測(cè)試更改

最好在 iOS Simulator 中運(yùn)行應(yīng)用程序進(jìn)行定期檢查，看看是否一切都如預(yù)期般正常。此時(shí)，當(dāng)應(yīng)用程序啟動(dòng)時(shí)，應(yīng)會(huì)載入您在主串聯(lián)圖中創(chuàng)建的場(chǎng)景。點(diǎn)按 Xcode 中的“Run”按鈕。您看到的應(yīng)該大致是這樣的：

http://wiki.jikexueyuan.com/project/ios-developer-library/images/ios_simulator_test_your_changes_2x.png" alt="" />

如果看不到添加的標(biāo)簽，請(qǐng)確定所創(chuàng)建的串聯(lián)圖已配置為應(yīng)用程序的主界面，并確定在應(yīng)用程序委托中用于創(chuàng)建空白色窗口的代碼已移除。如有需要，請(qǐng)返回到前面，并重復(fù)相關(guān)章節(jié)中的步驟。

借此機(jī)會(huì)，您可以試驗(yàn)一下界面可添加的內(nèi)容。通過更改以下設(shè)置來探索 Interface Builder：

標(biāo)簽的文本
標(biāo)簽的字體
文本的顏色

構(gòu)建基本界面

現(xiàn)在您已經(jīng)知道如何在場(chǎng)景中添加內(nèi)容，接下來讓我們開始構(gòu)建場(chǎng)景的基本界面，將新項(xiàng)目添加到待辦事項(xiàng)列表中。

將項(xiàng)目添加到待辦事項(xiàng)列表需要一則信息：項(xiàng)目名稱。您可以從文本欄中獲得此信息。文本欄是界面元素，可讓用戶使用鍵盤輸入單行文本。但首先，您需要移除前面所添加的標(biāo)簽。

從場(chǎng)景移除標(biāo)簽

1.點(diǎn)按標(biāo)簽進(jìn)行選擇。

2.按下 Delete 鍵。

該標(biāo)簽會(huì)從場(chǎng)景中移除。如果操作與期望不符，可以選取“Edit”>“Undo Delete Label”。（每個(gè)編輯器都有可撤銷上一個(gè)操作的“Edit > Undo”命令。）

現(xiàn)在畫布又重新恢復(fù)為空白，可創(chuàng)建用于添加待辦事項(xiàng)的場(chǎng)景。

將文本欄添加到場(chǎng)景

1.如有需要，請(qǐng)打開對(duì)象庫(kù)。

2.將“Text Field”對(duì)象從列表拖到場(chǎng)景中。

http://wiki.jikexueyuan.com/project/ios-developer-library/images/dragging_text_field_2x.png" alt="" />

3.拖移文本欄，然后放置在距屏幕底部三分之二的位置。

http://wiki.jikexueyuan.com/project/ios-developer-library/images/moving_text_field_2x.png" alt="" />

4.如有需要，請(qǐng)點(diǎn)按文本欄來顯示調(diào)整大小控制柄。

通過拖移調(diào)整大小控制柄（顯示在元素邊框上的白色小方塊）來調(diào)整 UI 元素的大小。您可以選擇元素來顯示其調(diào)整大小控制柄。在本例中，因?yàn)槟鷦倓偼Ｖ雇弦?，文本欄?yīng)該已被選定。如果文本欄外觀如下圖所示，就可以調(diào)整它的大?。环駝t請(qǐng)?jiān)诋嫴忌线x擇它。

http://wiki.jikexueyuan.com/project/ios-developer-library/images/resize_handles_2x.png" alt="" />

5.調(diào)整文本欄的左側(cè)和右側(cè)邊緣，直到垂直參考線顯示。

當(dāng)看到畫布像下圖這樣時(shí)，停止調(diào)整文本欄大小：

http://wiki.jikexueyuan.com/project/ios-developer-library/images/extending_text_field_2x.png" alt="" />

雖然場(chǎng)景中已經(jīng)有了文本欄，但是尚未告知用戶應(yīng)當(dāng)在欄中輸入什么內(nèi)容。使用文本欄的占位符文本，提示用戶輸入新待辦事項(xiàng)的名稱。

配置文本欄的占位符文本

1.定文本欄，打開實(shí)用工具區(qū)域中的“Attributes”檢查器 http://wiki.jikexueyuan.com/project/ios-developer-library/images/inspector_attributes_2x.png" alt="" />

選擇檢查器選擇欄中左起第四個(gè)按鈕時(shí)，“Attributes”檢查器會(huì)出現(xiàn)。它可讓您編輯串聯(lián)圖中對(duì)象的屬性。

http://wiki.jikexueyuan.com/project/ios-developer-library/images/attributes_inspector_2x.png" alt="" />

2.在“Attributes”檢查器中，找到標(biāo)有“Placeholder”的欄，然后鍵入“New to-do item”。

如果要在文本欄中顯示新的占位符文本，請(qǐng)按下 Return 鍵。

檢查點(diǎn)：在 iOS Simulator 中運(yùn)行應(yīng)用程序，確定一下所創(chuàng)建的場(chǎng)景是否令您滿意。您應(yīng)該能夠在文本欄中點(diǎn)按，而且可以使用鍵盤輸入字符串。

http://wiki.jikexueyuan.com/project/ios-developer-library/images/ios_simulator_add_item_vc_2x_1.png" alt="" />

小結(jié)

現(xiàn)在，您學(xué)會(huì)了如何使用串聯(lián)圖來創(chuàng)建基本的界面。在接下來的教程中，會(huì)了解到如何給界面添加交互，以及如何編寫代碼來創(chuàng)建自定行為。教程中的各個(gè)章節(jié)介紹了一些概念，可讓您在處理自己的應(yīng)用程序時(shí)學(xué)以致用。

上一篇：添加數(shù)據(jù)下一篇：定義交互