本節書摘來自異步社群《ios 8開發指南（第2版）》一書中的第6章，第6.5節實戰演練——使用模闆single view application，作者 管蕾，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視
6.5 實戰演練——使用模闆single view application
ios 8開發指南（第2版）
apple在xcode中提供了一種很有用的應用程式模闆，可以快速地建立一個這樣的項目，即包含一個故事闆、一個空視圖和相關聯的視圖控制器。模闆single view application（單視圖應用程式）是最簡單的模闆，在本節的内容中将建立一個應用程式，本程式包含了一個視圖和一個視圖控制器。本節的執行個體非常簡單，先建立了一個用于擷取使用者輸入的文本框（uitextfield）和一個按鈕，當使用者在文本框中輸入内容并按下按鈕時，将更新螢幕标簽（uilabel）以顯示hello和使用者輸入。雖然本執行個體程式比較簡單，但是幾乎包含了本章讨論的所有元素：視圖、視圖控制器、輸出口和操作。
6.5.1 建立項目
首先在xcode中新建立一個項目，并将其命名為“hello”。
（1）從檔案夾developer/applications或launchpad的developer編組中啟動xcode。
（2）啟動後在左側導航選擇第一項“create a new xcode project”，如圖6-2所示。
（3）在彈出的新界面中選擇項目類型和模闆。在new project視窗的左側，確定選擇了項目類型ios中的application，在右邊的清單中選擇single view application，再單擊“next”按鈕，如圖6-3所示。
1．類檔案
展開項目代碼編組（名為hellonoun），并檢視其内容。會看到如下5個檔案：
其中檔案appdelegate.h和appdelegate.m組成了該項目将建立的uiapplication執行個體的委托，也就是說我們可以對這些檔案進行編輯，以添加控制應用程式運作時如何工作的方法。可以修改委托，在啟動時執行應用程式級設定、告訴應用程式進入背景時如何做，以及應用程式被迫退出時該如何處理。就本章這個示範項目來說，不需要在應用程式委托中編寫任何代碼，但是需要記住它在整個應用程式生命周期中扮演的角色。
其中檔案appdelegate.h的代碼如下：
上述兩個檔案的代碼都是自動生成的。
檔案viewcontroller.h和viewcontroller.m實作了一個視圖控制器（uiviewcontroller），這個類包含控制視圖的邏輯。一開始這些檔案幾乎是空的，隻有一個基本結構，此時如果您單擊xcode視窗頂部的run按鈕，應用程式将編譯并運作，運作後一片空白，如圖6-4所示。
注意：
如果在xcode中建立項目時指定了類字首，所有類檔案名都将以您指定的内容打頭。在以前的xcode版本中，apple将應用程式名作為類的字首。要讓應用程式有一定的功能，需要處理前面讨論過的兩個地方：視圖和視圖控制器。
2．故事闆檔案
除了類檔案之外，該項目還包含了一個故事闆檔案，它用于存儲界面設計。單擊故事闆檔案 mainstoryboardstoryboard，在interface builder編輯器中打開它，如圖6-5所示。
在mainstoryboard.storyboard界面中包含了如下3個圖示：
first responder（一個uiresponder執行個體）；
view controller（我們的viewcontroller類）；
應用程式視圖（一個uiview執行個體）。
視圖控制器和第一響應者還出現在圖示欄中，該圖示欄位于編輯器中視圖的下方。如果在該圖示欄中沒有看到圖示，隻需單擊圖示欄，它們就會顯示出來。
當應用程式加載故事闆檔案時，其中的對象将被執行個體化，成為應用程式的一部分。就本項目“hello”來說，當它啟動時會建立一個視窗并加載mainstoryboard.storyboard，執行個體化viewcontroller類及其視圖，并将其加入視窗中。
在檔案hellonoun-info.plist中，通過屬性main storyboard file base name（主故事闆檔案名）指定了加載的檔案是mainstoryboard.storyboard。要想核實這一點，讀者可展開檔案夾supporting files，再單擊plist檔案顯示其内容。另外，也可以單擊項目的頂級圖示，確定選擇了目标“hello”，再檢視頁籤summary中的文本框main storyboard，如圖6-6所示。
如果有多個場景，在interface builder編輯器中會使用很不明顯的方式指定了初始場景。在前面的圖6-6中，會發現編輯器中有一個灰色箭頭，它指向視圖的左邊緣。這個箭頭是可以拖動的，當有多個場景時可以拖動它，使其指向任何場景對應的視圖。這就自動配置了項目，使其在應用程式啟動時啟動該場景的視圖控制器和視圖。
總之，對應用程式進行了配置，使其加載mainstoryboard.storyboard，而mainstoryboard.story-board查找初始場景，并建立該場景的視圖控制器類（檔案viewcontroller.h和viewcontroller.m定義的viewcontroller）的執行個體。視圖控制器加載其視圖，而視圖被自動添加到主視窗中。
6.5.2 規劃變量和連接配接
要建立該應用程式，第一步是确定視圖控制器需要的東西。為引用要使用的對象，必須與如下3個對象進行互動：
一個文本框（uitextfield）、一個标簽（uilabel）、一個按鈕（uibutton）。
其中前兩個對象分别是使用者輸入區域（文本框）和輸出（标簽），而第3個對象（按鈕）觸發代碼中的操作，以便将标簽的内容設定為文本框的内容。
1．修改視圖控制器接口檔案
基于上述資訊，便可以編輯視圖控制器類的接口檔案（viewcontroller.h），在其中定義需要用來引用界面元素的執行個體變量以及用來操作它們的屬性（和輸出口）。我們将把用于收集使用者輸入的文本框（uitextfield）命名為user@property将提供輸出的标簽（urlabel）命名為useroutput。前面說過，通過使用編譯指令@property可同時建立執行個體變量和屬性，而通過添加關鍵字iboutlet可以建立輸出口，以便在界面和代碼之間建立連接配接。
綜上所述，可以添加如下兩行代碼：
但是，這并非我們需要完成的全部工作。為了支援在接口檔案中所做的工作，還需對實作檔案（viewcontroller.m）做一些修改。
2．修改視圖控制器實作檔案
對于接口檔案中的每個編譯指令@property來說，在實作檔案中都必須有如下對應的編譯指令@synthesize：
将這些代碼行加入到實作檔案開頭，并位于編譯指令@implementation後面，檔案viewcontroller.m中對應的實作代碼如下所示：
在確定使用完視圖後，應該使代碼中定義的執行個體變量（即userinput 和useroutput）不再指向對象，這樣做的好處是這些文本框和标簽占用的記憶體可以被重複利用。實作這種方式的方法非常簡單，隻需将這些執行個體變量對應的屬性設定為nil即可：
上述清理工作是在視圖控制器的一個特殊方法中進行的，這個方法名為viewdidunload，在視圖成功地從螢幕上删除時被調用。為添加上述代碼，需要在實作檔案viewcontroller.h中找到這個方法，并添加代碼行。同樣，這裡示範的是如果要手工準備輸出口、操作、執行個體變量和屬性時，需要完成的設定工作。
檔案viewcontroller.m中對應清理工作的實作代碼如下所示：
如果浏覽hellonoun的代碼檔案，可能發現其中包含綠色的注釋（以字元“//”打頭的代碼行）。為節省篇幅，通常在本書的程式清單中删除了這些注釋。
3．一種簡化的方法
雖然還沒有輸入任何代碼，但還是希望能夠掌握規劃和設定xcode項目的方法。是以，還需要做如下所示的工作。
确定所需的執行個體變量：哪些值和對象需要在類（通常是視圖控制器）的整個生命周期内都存在。
确定所需的輸出口和操作：哪些執行個體變量需要連接配接到界面中定義的對象？界面将觸發哪些方法？
建立相應的屬性：對于您打算操作的每個執行個體變量，都應使用@property來定義執行個體變量和屬性，并為該屬性合成設定函數和擷取函數。如果屬性表示的是一個界面對象，還應在聲明它時包含關鍵字iboutlet。
清理：對于在類的生命周期内不再需要的執行個體變量，使用其對應的屬性将其值設定為nil。對于視圖控制器中，通常是在視圖被解除安裝時（即方法viewdidunload中）這樣做。
當然可以手工完成這些工作，但是，在xcode中使用interface builder編輯能夠在建立連接配接時添加編譯指令@property和@synthesize、建立輸出口和操作、插入清理代碼。
将視圖與視圖控制器關聯起來的是前面介紹的代碼，但您可在建立界面的同時讓xcode自動為我們編寫這些代碼。建立界面前，仍然需要确定要建立的執行個體變量/屬性、輸出口和操作，而有時候還需添加一些額外的代碼，但讓xcode自動生成代碼可極大地加快初始開發階段的進度。
6.5.3 設計界面
添加對象
本節的示範程式“hello”的界面很簡單，隻需提供一個輸出區域、一個用于輸入的文本框以及一個将輸出設定成與輸入相同的按鈕。請按如下步驟建立該ui。
（1）在xcode項目導航器中選擇mainstoryboard.storyboard，并打開它。
（2）打開它的是interface builder編輯器。其中文檔大綱區域顯示了場景中的對象，而編輯器中顯示了視圖的可視化表示。
（3）選擇菜單view>utilities>show object library（control+option+command+3），在右邊顯示對象庫。在對象庫中確定從下拉清單中選擇了objects，這樣将顯示可拖放到視圖中的所有控件，此時的工作區類似于圖6-7所示。
（4）通過在對象庫中單擊标簽（uilabel）對象并将其拖曳到視圖中，在視圖中添加兩個标簽。
（5）第一個标簽應包含靜态文本hello，為此該标簽的輕按兩下預設文本label并将其改為“你好”。選擇第二個标簽，它将用作輸出區域。這裡将該标簽的文本改為“請輸入資訊”。将此作為預設值，直到使用者提供新字元串為止。我們可能需要增大該文本标簽以便顯示這些内容，為此可單擊并拖曳其搖桿。
我們還要将這些标簽居中對齊，此時可以通過單擊選擇視圖中的标簽，再按下option+ command+4組合鍵或單擊utility區域頂部的滑塊圖示，這将打開标簽的attributes inspector。
使用alignment選項調整标簽文本的對齊方式。另外還可能會使用其他屬性來設定文本的顯示樣式，例如字号、陰影、顔色等。現在整個視圖應該包含兩個标簽。
（6）如果對結果滿意，便可以添加使用者将與之互動的元素文本框和按鈕。為了添加文本框，在對象庫中找到文本框對象（uitextfield），單擊并将其拖曳到兩個标簽下方。使用搖桿将其增大到與輸出标簽等寬。
（7）再次按option+command+4組合鍵打開attributes inspector，并将字号設定成與标簽的字号相同。注意到文本框并沒有增大，這是因為預設iphone文本框的高度是固定的。要修改文本框的高度，在attributes inspector中單擊包含方形邊框的按鈕border style，然後便可随意調整文本框的大小。
（8）在對象庫單擊圓角矩形按鈕（uibutton）并将其拖曳到視圖中，将其放在文本框下方。輕按兩下該按鈕給它添加一個标題，如set label，再調整按鈕的大小，使其能夠容納該标題。您也可能想使用attributes inspector增大文本的字号。
最終ui界面效果如圖6-8所示，其中包含了4個對象，分别是兩個标簽、1個文本框和1個按鈕。
6.5.4 建立并連接配接輸出口和操作
現在，在interface builder編輯器中需要做的工作就要完成了，最後一步工作是将視圖連接配接到視圖控制器。如果按前面介紹的方式手工定義了輸出口和操作，則隻需在對象圖示之間拖曳即可。但即使就地建立輸出口和操作，也隻需執行拖放操作。
為此，需要從interface builder編輯器拖放到代碼中這需要添加輸出口或操作的地方，即需要能夠同時看到接口檔案veiwcontroller.h和視圖。在interface builder編輯器中還顯示了剛設計的界面的情況下，單擊工具欄的edit部分的assistant editor按鈕，這将在界面右邊自動打開檔案viewcontroller.h，因為xcode知道我們在視圖中必須編輯該檔案。
另外，如果使用的開發計算機是macbook，或編輯的是ipad項目，螢幕空間将不夠用。為了節省螢幕空間，單擊工具欄中view部分最左邊和最右邊的按鈕，以隐藏xcode視窗的導航區域和utility區域。您也可以單擊interface builder編輯器左下角的展開箭頭将文檔大綱區域隐藏起來。這樣螢幕将如圖6-9所示。
1．添加輸出口
下面首先連接配接用于顯示輸出的标簽。前面說過，我們想用一個名為useroutput的執行個體變量/屬性表示它。
（1）按住control鍵，并拖曳用于輸出的标簽（在這裡，其标題為<請輸入資訊>）或文檔大綱中表示它的圖示。将其拖曳到包含檔案viewcontroller.h的代碼編輯器中，當滑鼠光标位于@interface行下方時松開滑鼠鍵。當您拖曳時，xcode将指出如果您此時松開滑鼠鍵将插入什麼，如圖6-10所示。
（2）當松開滑鼠鍵時會要求我們定義輸出口。接下來首先確定從下拉清單connection中選擇了outlet，從storage下拉清單中選擇了strong，并從type下拉清單中選擇了uilabel。最後指定要使用的執行個體“變量/屬性”名（useroutput），最後再單擊connect按鈕，如圖6-11所示。
（3）當單擊connect按鈕時，xcode将自動插入合适的編譯指令@property和關鍵字ibout:put（隐式地聲明執行個體變量）、編譯指令@synthesize（插入到檔案viewcontroller.m中）以及清理代碼（也是檔案viewcontroller.m中）。更重要的是，還在剛建立的輸出口和界面對象之間建立連接配接。
（4）對文本框重複上述操作過程。将其拖曳至剛插入的@property代碼行下方，将type設定為uitextfield，并将輸出口命名為userinput。
2．添加操作
添加操作并在按鈕和操作之間建立連接配接的方式與添加輸出口相同。唯一的差别是在接口檔案中，操作通常是在屬性後面定義的，是以，您需要拖放到稍微不同的位置。
（1）按住control鍵，并将視圖中的按鈕拖曳到接口檔案（viewcontroller.h）中剛添加的兩個@property編譯指令下方。同樣，當您拖曳時，xcode将提供回報，指出它将在哪裡插入代碼。拖曳到要插入操作代碼的地方後，松開滑鼠鍵。
（2）與輸出口一樣，xcode将要求您配置連接配接，如圖6-12所示。這次，務必将連接配接類型設定為action，否則xcode将插入一個輸出口。将name（名稱）設定為setoutput（前面選擇的方法名）。務必從下拉清單event中選擇touch up inside，以指定将觸發該操作的事件。保留其他預設設定，并單擊connect按鈕。
到此為止，我們成功添加了執行個體變量、屬性、輸出口，并将它們連接配接到了界面元素。在最後還需要重新配置我們的工作區，確定項目導航器可見。
6.5.5 實作應用程式邏輯
建立好視圖并建立到視圖控制器的連接配接後，接下來的唯一任務便是實作邏輯。現在将注意力轉向檔案viewcontroller.m以及setoutput的實作上。setoutput方法将輸出标簽的内容設定為使用者在文本框中輸入的内容。我們如何擷取并設定這些值呢？uilabel和uitextfield都有包含其内容的text屬性，通過讀寫該屬性，隻需一個簡單的步驟便可将useroutput的内容設定為userinput的内容。
打開檔案viewcontroller.m并滾動到末尾，會發現xcode在建立操作連接配接代碼時自動編寫了空的方法定義（這裡是setoutput），我們隻需填充内容即可。找到方法setoutput，其實作代碼如下所示：
通過這條指派語句便完成了所有的工作。
接下來我們整理核心檔案viewcontroller.m的實作代碼：
上述代碼幾乎都是用xcode自動實作的。
6.5.6 生成應用程式
現在可以生成并測試我們的示範程式了，執行後的效果如圖6-13所示。在文本框中輸入資訊并單擊“單擊我”按鈕後，會在上方顯示我們輸入的文本，如圖6-14所示。