Start Developing iOS Apps Today系列（二）

Start Developing iOS Apps Today系列之入門

2、教程：基礎

      本教程描述了什麼是應用程序、建立簡單用戶界面的過程，以及如何添加自定行爲，將界面轉變成可運行的應用程序。

遵循本教程，可瞭解 iOS 應用程序開發的基礎內容，包括：

• 如何使用 Xcode 來建立和管理項目

• 如何識別 Xcode 項目的關鍵部分

• 如何將標準用戶界面元素添加到應用程序

• 如何構建和運行應用程序

完成教程後，您會獲得相似於下圖的應用程序：

      開發 iPad 應用程序的工具和技術與 iPhone 徹底相同。爲簡單起見，本教程只針對 iPhone。教程使用 Xcode 5.0 和 iOS SDK 7.0。

建立新項目

      要開發應用程序，首先請建立一個新的 Xcode 項目。

      Xcode 隨附了幾個內建應用程序模板，可用於開發常見的 iOS 應用程序，如遊戲、基於標籤瀏覽的應用程序和基於表格視圖的應用程序。這些模板大都預先配置了界面和源代碼文件，可做爲您進行開發工做的起點。本教程會從最基礎的模板開始：Empty Application。

      使用 Empty Application 模板有助於理解 iOS 應用程序的基本結構，以及如何將內容呈現給用戶。瞭解完全部組件的工做方式後，您能夠將其餘模板用在本身的應用程序上，來節省一些配置時間。

建立新的空項目

1. 從/Applications目錄打開 Xcode。

   Xcode 歡迎窗口會出現。

   若是出現的是項目窗口，而不是歡迎窗口，請不要着急；這說明您可能曾在 Xcode 中建立或打開過項目。您只需在接下來的步驟中，使用菜單項來建立項目。

2. 在歡迎窗口中，點按「Create a new Xcode project」（或選取「File」>「New」>「Project」）。

   Xcode 將打開一個新窗口並顯示對話框，讓您從中選取一個模板。

3. 在對話框左邊的 iOS 部分，選擇「Application」。

4. 在對話框的主區域中，點按「Empty Application」，而後點按「Next」。

5. 在出現的對話框中，給應用程序命名並選取應用程序的其餘選項。

   請使用如下值：

   • Product Name：ToDoList

     Xcode 會使用您輸入的產品名稱給您的項目和應用程序命名。

   • Company Identifier：您的公司標識符（若是有）。若是沒有，請使用com.example。

   • Class Prefix：XYZ

     Xcode 會使用類前綴名稱來命名爲您建立的類。Objective-C 類的名稱必須是代碼中惟一的詞，並區別於任何可能在框架或捆綁包中使用的詞。爲使類名稱保持惟一性，一般要爲全部類添加前綴。Apple 已經爲框架類保留了兩個字母組成的前綴，因此請使用三個字母或更長的前綴。

6. 從「Devices」彈出式菜單中選取「iPhone」。

   前文中已經提到，使用 iPhone 界面建立應用程序是最簡單的入門方式。爲 iPad 建立應用程序或建立通用應用程序的技術與此相同。

7. 點按「Next」。

8. 在出現的對話框中，選取項目的存放位置，而後點按「Create」。

   Xcode 會在工做區窗口中打開新項目，窗口的外觀相似：

熟悉 Xcode

      Xcode 包括了您建立應用程序時所需的一切。它不只整理了建立應用程序時所需的文件，還提供了代碼和界面元素編輯器，可以讓您構建和運行應用程序，並擁有強大的集成調試程序。

      請花幾分鐘時間來熟悉 Xcode 工做區窗口。在接下來的整個教程中，您將會用到下面窗口中標識出的控制。點按不一樣的按鈕，體驗一下它們的工做方式。若是要了解有關界面某個部分的更多信 息，請閱讀其幫助文章。方法是按住 Control 鍵點按 Xcode 中的區域，而後從出現的快捷菜單中選取文章。

運行 iOS Simulator

      因爲項目是基於 Xcode 模板建立的，所以基本的應用程序環境已經自動爲您設置好了。即便沒有編寫任何代碼，也能夠構建和運行 Empty Application 模板，而無需進行任何額外的配置。

      構建和運行您的應用程序，可使用 Xcode 自帶的 iOS Simulator 應用程序。顧名思義，iOS Simulator 可模擬在 iOS 設備上運行應用程序，讓您初步瞭解它的外觀和行爲。

      它可模擬多種不一樣類型的硬件，包括屏幕大小不一樣的 iPad、iPhone 等等。所以，您能夠模擬在任何一款開發目標設備上運行應用程序。在本教程中，咱們選擇使用「iPhone Retina (4-inch)」。

在 iOS Simulator 中運行應用程序

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

   繼續瀏覽菜單，查看 iOS Simulator 中的其餘硬件選項。

2. 點按 Xcode 工具欄左上角的「Run」按鈕。

   或者，能夠選取「Product」>「Run」（或按下 Command-R）。

   若是是首次運行應用程序，Xcode 會詢問您是否要在 Mac 上啓用開發者模式。開發者模式可以讓 Xcode 訪問特定的調試功能，無需每次都輸入密碼。請決定是否要啓用開發者模式，而後按照提示操做。若是選取不啓用，可能稍後會要求您輸入密碼。本教程假定已啓用 了開發者模式。

3. 構建過程完成後，請看 Xcode 工具欄。

   Xcode 會在工具欄中間的活動顯示窗口中顯示有關構建過程的消息。

     Xcode 完成項目生成後，iOS Simulator 會自動啓動。首次啓動時可能須要幾分鐘時間。

     iOS Simulator 會按照您的指定，以 iPhone 模式打開。在模擬的 iPhone 屏幕上，iOS Simulator 會打開您的應用程序。（若是此時在 Xcode 調試程序中看到一則信息，請沒必要擔憂，稍後的教程中會有解釋。）

      一如其名，Empty Application 模板並未包括過多的代碼，僅會顯示一個白色的屏幕。其餘模板會有更多複雜的行爲，所以在擴展模板製做本身的應用程序以前，先要弄清楚模板的用處，這一點很 重要。而要作到這一點，一個很好的方式，就是先不作任何修改，直接運行模板。

      探索完應用程序後，請選取「iOS Simulator」>「Quit iOS Simulator」（或按下 Command-Q）來退出 iOS Simulator。

檢查源代碼

      Empty Application 模板附帶了少許現成的源代碼，用於設置應用程序環境。大多數工做都由UIApplicationMain函數來完成，它在項目的main.m源文件中會被自動調用。UIApplicationMain函數會建立一個應用程序對象來設置應用程序基礎結構，以配合 iOS 系統運做。包括建立一個運行循環，將輸入事件傳遞給應用程序。

      您不須要直接處理main.m源文件，可是瞭解一下它的工做方式也是很有趣味的。

查看 main.m 源文件

1. 請肯定項目導航器已在導航器區域中打開。

   項目導航器會顯示項目中的全部文件。若是項目導航器未打開，請點按導航器選擇欄最左邊的按鈕。

2. 點按項目導航器中「Supporting Files」文件夾旁邊的顯示三角形，打開文件夾。

3. 選擇main.m。

   Xcode 會在窗口的主編輯器區域打開源文件，外觀相似於：

   若是連按該文件，它會在單獨的窗口中打開。您能夠根據須要進行選擇：點按文件一次，將其在主項目窗口中打開；或是連按文件，將其在單獨的窗口中打開。

      main中的main.m函數會調用自動釋放池 (autorelease pool) 中的UIApplicationMain函數。

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

      @autoreleasepool語句支持應用程序的內存管理。自動引用計數 (Automatic Reference Counting, ARC) 利用編譯器追蹤對象的全部者，使內存管理變得簡單；@autoreleasepool是內存管理基礎結構的一部分。

      調用UIApplicationMain會建立應用程序的兩個重要初始組件：

• UIApplication 類的實例，稱爲應用程序對象。

  應用程序對象可管理應用程序事件循環，並協調其餘高級的應用程序行爲。定義在 UIKit 框架中的這個類，不要求您編寫任何額外的代碼，就能夠達成其任務。

• XYZAppDelegate類的實例，稱爲應用程序委託。

  Xcode 建立此類，做爲設置 Empty Application 模板的一部分。應用程序委託會建立一個呈現應用程序內容的窗口，併爲響應應用程序內的狀態轉換提供位置。這個窗口是您編寫自定應用程序級代碼的地方。與全部的類同樣，XYZAppDelegate類在應用程序的兩個源代碼文件中被定義：接口文件XYZAppDelegate.h；實現文件XYZAppDelegate.m。

      如下是應用程序對象和應用程序委託互動的方式。應用程序啓動時，應用程序對象會調用應用程序委託上已定義的方法，使自定代碼有機會執行其操做，這正是運行 應用程序的有趣之處。爲了深刻理解應用程序委託的角色，請從接口文件開始查看其源代碼。若是要查看應用程序委託的接口文件，請在項目導航器中選擇XYZAppDelegate.h。應用程序委託的界面包含了單一屬性：window。有了這個屬性，應用程序委託纔會跟蹤能呈現全部應用程序內容的窗口。

      下一步，請查看應用程序委託的實現文件。請在項目導航器中選擇XYZAppDelegate.m。 應用程序委託的實現包含了一些重要方法的「骨架」。這些預約義的方法可以讓應用程序對象與應用程序委託進行溝通。在一個重要的運行時事件（例如，應用程序啓 動、低內存警告和應用程序終止）中，應用程序對象會調用應用程序委託中相應的方法，使其有機會進行適當的響應。您無需執行任何特殊的操做，來肯定這些方法 是否會在正確的時間被調用，由於應用程序對象會幫您處理這部分的工做。

      這些自動實現的方法都具備一個默認的行爲。就算將骨架實現留空，或將它從XYZAppDelegate.m文件中刪除，這些行爲在方法被調用時，都會默認執行。您可使用這些骨架來放置附加的自定代碼，以在方法被調用時執行。例如，XYZAppDelegate.m文件中的第一個方法包含了幾行代碼，用於設置應用程序的窗口，並讓應用程序首次運行時顯示白色的背景顏色。在本教程中，您不會使用到任何自定應用程序委託代碼，所以能夠移除這段代碼。

配置應用程序委託的實現文件

1. 請在XYZAppDelegate.m中查找application:didFinishLaunchingWithOptions:方法。

   它是文件中的第一個方法。

2. 從該方法中刪除前三行代碼，而後它會顯示爲：

   1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
   2. {
   3. return YES;
   4. }

      Xcode 會自動存儲更改。它會時刻跟蹤並存儲您的全部操做。（您能夠經過選取「Edit」>「Undo Typing」來撤銷所做的更改。）

建立串聯圖

      如今，您應該已經準備好建立應用程序的串聯圖了。串聯圖能直觀展現應用程序的用戶界面、顯示內容屏幕以及它們之間的轉換。您可使用串聯圖對驅動應用程序的流程或構思進行佈局。

      要了解串聯圖融入應用程序的方法，在本教程中您能夠手動建立一個，而後將其添加到應用程序內。與開始使用的 Empty Application 模板不一樣，其餘 Xcode 模板包含了預配置的串聯圖，提供了視圖、視圖控制器和相關的源文件，用於設置該類型的應用程序的基本架構。手動配置完串聯圖後，您將會看到各個部分是如何 配合工做的。而後，您就可使用預配置有串聯圖的項目模板，開始應用程序開發了，這會節省很多時間。

建立新的串聯圖

1. 選取「File」>「New」>「File」（或按下 Command-N）。

   這時將會出現一個對話框，提示您爲新文件選取模板。

2. 在左邊，選擇 iOS 下方的「User Interface」。

3. 點按「Storyboard」，而後點按「Next」。

4. 在「Devices」選項中，選擇「iPhone」。

5. 點按「Next」。

   這時會出現一個對話框，提示您選取一個位置併爲新串聯圖命名。

6. 在「Save As」欄中，將文件命名爲Main。

7. 請肯定將文件與項目存儲在同一個目錄中。

8. 在「Group」選項中，選擇「ToDoList」。

9. 對於「Targets」，選擇「ToDoList」旁邊的複選框。

   此選項可以讓 Xcode 在構建應用程序時包括新的串聯圖。

10. 點按「Create」。

      這時，一個新的串聯圖文件將建立完成，並被添加到項目中。您能夠在這個文件中工做，對應用程序的內容進行佈局。

      如今，須要讓 Xcode 知道您想將此串聯圖用做應用程序中的界面。開始時，應用程序對象會檢查該應用程序是否配置了主界面。若是已配置，應用程序對象會在應用程序啓動時載入已定義的串聯圖。

將串聯圖設爲應用程序的主界面

1. 在項目導航器中，選擇您的項目。

   在工做區窗口的編輯器區域，Xcode 會顯示項目編輯器，可以讓您查看和編輯與應用程序構建有關的細節。

2. 在「Targets」的下方，選擇「ToDoList」。

   若是「Project」和「Targets」列表未顯示在項目編輯器中，請點按編輯器面板左上角的顯示三角形。

3. 選擇「General」標籤。

4. 在「Deployment Info」的下方，找到「Main Interface」選項。

5. 選擇您的串聯圖：Main.storyboard。

將場景添加到串聯圖中

      如今，串聯圖已經建立完成，接下來讓咱們開始添加應用程序的內容吧。Xcode 提供了對象庫，您能夠將庫中的對象添加到串聯圖文件。其中的一些對象屬於視圖中的用戶界面元素，例如按鈕和文本欄。其餘的對象則定義了應用程序的行爲，但 它們不會顯示在屏幕上，如視圖控制器和手勢識別器。

      首先，請將視圖控制器添加到串聯圖中。視圖控制器管理了相應的視圖及其分視圖。在下一章，「應用程序」中，您將會了解到有關視圖角色和視圖控制器的更多信息。

將視圖控制器添加到串聯圖

1. 在項目導航器中，選擇Main.storyboard。

   Xcode 會在編輯器區域的 Interface Builder（其可視化界面編輯器）中打開串聯圖。因爲串聯圖是空的，所以您看到的是空白畫布。畫布可用來添加和排列用戶界面的元素。

2. 打開對象庫。

   對象庫出如今實用工具區域的底部。若是看不到對象庫，您能夠點按其按鈕，即庫選擇欄中左起第三個按鈕。（若是看不到實用工具區域，能夠選取「View」>「Utilities」>「Show Utilities」來顯示。）

   列表顯示每一個對象的名稱、描述和可視化表示。

3. 將「View Controller」對象從列表拖到畫布中。

   若是在對象庫中找不到標題爲「View Controller」的對象，請在列表下方的文本欄中鍵入內容來過濾對象列表。鍵入View Controller，那麼過濾後的列表中就只會顯示視圖控制器對象。

      如今，應用程序中的串聯圖包含了一個場景。畫布上指向場景左側的箭頭是「initial scene indicator」（初 始場景指示器），它表示此場景是應用程序啓動時首先載入的場景。如今，您在畫布上看到的場景包含了單個視圖，由視圖控制器管理。雖然是在 iOS Simulator 中運行應用程序，但實際上這也是您將在設備屏幕上看到的視圖。在 iOS Simulator 上運行應用程序有助於驗證全部配置正確與否。執行該操做前，請在場景中添加一些能夠在應用程序運行時看見的內容。

將標籤添加到場景

1. 在對象庫中，找到「Label」對象。

   若是曾在過濾文本欄中輸入過內容，那麼須要先清除原有內容，才能看到「Label」對象。您也能夠在過濾欄中鍵入「Label」來快速查找「Label」對象。

2. 將「Label」對象從列表拖到場景中。

3. 將標籤拖到場景的中央，直到出現水平和垂直參考線。

   看到如下圖標時，中止拖移標籤：

   參考線表示目前標籤已水平和垂直居中。（只有在參考線旁拖移對象或調整其大小時，參考線纔可見；所以當您鬆開標籤時，參考線會消失。）

4. 連按標籤的文本，選中並進行編輯。

5. 鍵入「Hello, World!」並按下 Return 鍵。

   若有須要，請將標籤從新居中。

測試更改

      最好在 iOS Simulator 中運行應用程序進行按期檢查，看看是否一切都如預期般正常。此時，當應用程序啓動時，應會載入您在主串聯圖中建立的場景。點按 Xcode 中的「Run」按鈕。您看到的應該大體是這樣的：

      若是看不到添加的標籤，請肯定所建立的串聯圖已配置爲應用程序的主界面，並肯定在應用程序委託中用於建立空白色窗口的代碼已移除。若有須要，請返回到前面，並重複相關章節中的步驟。

      藉此機會，您能夠試驗一下界面可添加的內容。經過更改如下設置來探索 Interface Builder：

• 標籤的文本

• 標籤的字體

• 文本的顏色

構建基本界面

      如今您已經知道如何在場景中添加內容，接下來讓咱們開始構建場景的基本界面，將新項目添加到待辦事項列表中。

      將項目添加到待辦事項列表須要一則信息：項目名稱。您能夠從文本欄中得到此信息。文本欄是界面元素，可以讓用戶使用鍵盤輸入單行文本。但首先，您須要移除前面所添加的標籤。

從場景移除標籤

1. 點按標籤進行選擇。

2. 按下 Delete 鍵。

   該標籤會從場景中移除。若是操做與指望不符，能夠選取「Edit」>「Undo Delete Label」。（每一個編輯器都有可撤銷上一個操做的「Edit > Undo」命令。）

      如今畫布又從新恢復爲空白，可建立用於添加待辦事項的場景。

將文本欄添加到場景

1. 若有須要，請打開對象庫。

2. 將「Text Field」對象從列表拖到場景中。

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

4. 若有須要，請點按文本欄來顯示調整大小控制柄。

   經過拖移調整大小控制柄（顯示在元素邊框上的白色小方塊）來調整 UI 元素的大小。您能夠選擇元素來顯示其調整大小控制柄。在本例中，由於您剛剛中止拖移，文本欄應該已被選定。若是文本欄外觀以下圖所示，就能夠調整它的大小；不然請在畫布上選擇它。

5. 調整文本欄的左側和右側邊緣，直到垂直參考線顯示。

   當看到畫布像下圖這樣時，中止調整文本欄大小：

      雖然場景中已經有了文本欄，可是還沒有告知用戶應當在欄中輸入什麼內容。使用文本欄的佔位符文本，提示用戶輸入新待辦事項的名稱。

配置文本欄的佔位符文本

1. 選定文本欄，打開實用工具區域中的「Attributes」檢查器 。

   選擇檢查器選擇欄中左起第四個按鈕時，「Attributes」檢查器會出現。它可以讓您編輯串聯圖中對象的屬性。

2. 在「Attributes」檢查器中，找到標有「Placeholder」的欄，而後鍵入「New to-do item」。

   若是要在文本欄中顯示新的佔位符文本，請按下 Return 鍵。

      檢查點：在 iOS Simulator 中運行應用程序，肯定一下所建立的場景是否令您滿意。您應該可以在文本欄中點按，並且可使用鍵盤輸入字符串。

小結

      如今，您學會了如何使用串聯圖來建立基本的界面。在接下來的教程中，會了解到如何給界面添加交互，以及如何編寫代碼來建立自定行爲。教程中的各個章節介紹了一些概念，可以讓您在處理本身的應用程序時學以至用。