作為一名交互或視覺設計師，你希望順應當前大環境的發展趨勢，向移動領域拓展自己的視野和能力，于是決定挽起袖子學習iOS應用開發。興奮之余，你開始做一些初步的研究，但是很快發現，除非自己有足夠豐富的編程經驗，否則要實現目標還真不是件易事。

確實是這樣。蘋果提供的開發文檔主要是面向技術人員的，市面上多數iOS開發書籍都會一上來就問你是否掌握了足夠的Objective-C知識，而網上各種教程的質量又參差不齊，其中有不少還是面向著很舊版本的iOS系統及開發工具的。

本文的目的就是幫助各位設計師在最短的時間內，以實戰的方式探索iOS應用開發工具及相關的基礎知識。我們將一同了解應用開發流程中的一些重要環節，包括理論講解及方法演示，即使你沒什么編程經驗也沒問題。

我們的實戰案例是一款非常簡單的、用來展示設計作品的應用，如下圖所示：

本地(原生)開發方式

所謂“本地”，即是指通過蘋果原生的開發工具(SDK)及Objective-C語言開發iPhone和iPad應用的方式。在我們對這套方法進行探索之前，最好稍微花點時間了解一下還有哪些替代方案，以及我們之所以選擇原生開發方式的原因。

也許很多人已經聽說過Web App及“混合型應用”這樣的說法，這些就是所謂的“替代方案”。我們確實可以使用基于HTML5、CSS、JavaScript的Web前端開發技術打造應用，這其中最為常見的解決方案包括Titanium Mobile、PhoneGap、jQuery Mobile以及Sencha Touch等框架。通過這種方式開發的應用通常具有很好的跨平臺特性。

不過，通過這種非原生方式開發的應用有著明顯的弊端?；跒g覽器(Web App)或“原生應用殼”(混合型應用)的運作方式使它們的效率無法與本地應用媲美，而且對硬件功能的訪問及利用能力也是非常有限的。此外，代碼框架本身 也是需要學習的，它們有著各自不同的使用方式，在框架之外還有各種擴展庫需要摸索。另外，框架本身的質量和成熟程度也是必須考慮的因素。

還有其他一些第三方開發方案可以考慮，例如Cocos 2D for iPhone和PugPig。這類方案允許你將框架文件與Objective-C對象建立關聯，以達到特定的目標，例如創建游戲或雜志類應用等。要使用這類技術，你最好也要對蘋果本地開發工具包具有基本程度的了解。

準備工作

正式起步前的準備工作包括兩方面：

硬件：一臺運行著最新或新近版本OS X系統的Mac機，包括MacBook(Pro/Air)、Mac mini、iMac或是Mac Pro均可。

軟件：蘋果的Xcode應用。

Xcode可以從Mac應用商店(Mac App Store)或是蘋果的開發者站點中免費下載到，大約1.5GB的樣子。

圖片資源

在等待Xcode下載完成的過程中，我們可以同步開始圖片方面的工作。

由于要為普通屏幕(320×480)和Retina屏幕(640×960)各自準備一套圖像資源(最新的iPhone5規格為640×1136)， 我們應該在Photoshop中盡量多的使用矢量圖形(vector shape)、圖層樣式(layer style)以及智能對象(smart object)等技術，以確保圖像的無損縮放。比較合理的流程是從Retina版本入手進行構建，然后等比縮放到普通版本的規格。在縮放過程中，一些元素 的細節有可能發生變形，記得做好手動調整。

另外，我們還可以在網上找到很多原生風格的iPhone界面PSD模板，其中比較著名的一款是來自Teehan和Lax的iPhone 4 GUI PSD。如果要打造的應用在界面方面以iOS原生風格為主，那么這類模板可以幫助我們節省掉很多時間。即使你更傾向于定制化的用戶界面，這些模板同樣可以在控件規格、布局規則等方面提供精確的參考。(相關閱讀：先了解規則，再尋求創新 - 關于iOS應用界面自定義)

在Photoshop或是你更習慣的圖像編輯工具中創建一個新文檔，規格如下：

尺寸：640×960(pixels)

DPI：72

色彩模式：RGB

由于本文的焦點主要將集中在開發的基礎知識上，所以在視覺設計方面不做深入探討。更多關于iOS界面設計技術及流程方面的信息，可以參考Marc Edwards的Designing for iPhone 4 Retina Display一文。

關于圖片導出的小貼士

雖然你可以在應用中使用多種格式的圖片，不過鑒于alpha通道及無損壓縮等方面的考慮，我們最為推薦的仍是PNG格式。

多數情況下，要將按鈕導出為不包含文案的背景圖片，以便更加靈活的在開發環境中調整文字屬性，或是對多語種進行支持。

對于按鈕的背景圖片，要確保實際按鈕的部分(不包括陰影或外發光等效果的區域)處于背景圖片的正中，因為我們在Xcode的Interface Builder當中很難對背景圖片及前景文字之間的位置關系進行精密的調整。很多時候，我們需要在制作背景圖片的過程中，在按鈕的另外一側添加一塊空白的 區域，以彌補陰影效果所占據的空間，確保按鈕自身處于正中央。

在設計方案允許的情況下，盡可能將那些在視覺上疊加在一起的元素直接保存在一張背景圖片當中，而不要留到開發環節里再進行層疊處理，否則成本將會變 的很高。另外，這樣做也有助于減少資源文件的數量，提高應用運行的效率，減少內存占用。只有那些需要對用戶行為進行交互響應的界面元素需要獨立的背景圖片 或是動畫效果。

在所有適用于Retina屏的圖片文件名中增加特殊的后綴“@2x”作為標示，使系統能夠進行識別：

image.png：適用于普通屏幕。

image@2x.png：適用于Retina屏幕。

可以嘗試使用SuperSlicr這樣的自動化批處理腳本對PSD中的UI元素進行格式化及導出。

所有的資源文件都會保存在app包(app bundle)的同一個路徑當中，所以文件名不能有重復的情況。

Photoshop不大擅長對PNG圖片進行壓縮。可以試著使用imageOptim這樣的工具減小圖片尺寸，然后再導入到Xcode當中。另外，Xcode本身也會對導入過來的圖片進行一定程度的壓縮，不過有時反而會增加圖片的尺寸。

Xcode概覽

Xcode已經安裝好了？

接下來我們去下載一套用于本次案例學習的模板文件，其中包括一些PSD、PNG資源，還有一些用來起步的代碼文件。進入里面的Begin Here文件夾，找到Portfolio.xcodeproj文件，雙擊打開。

文件加載成功之后，點擊左側導航欄(Navigator)中的項目(Portfolio,1 target,iOS SDK)，這時我們就可以在編輯區中看到這個項目的概況信息了，如下圖所示。關于這些概況信息的用處，我們稍后解釋。

點擊左側導航欄當中項目名稱旁邊的箭頭，我們可以看到一個資源列表，里面包含了當前項目所涉及到的所有資源文件，例如代碼和圖片等。我們把注意力放在Portfolio路徑當中，其中有三個類型的文件：

.h文件：頭文件(header，也可稱為interface文件)。

.m文件：消息文件(message，也可稱為implementation文件)。

.xib文件：在Interface Builder中進行界面可視化編輯的XML文件，出于歷史原因，通常也被稱為NIB文件。

中間編輯區(Editor)所呈現的內容會根據當前正在執行的任務而發生變化。當我們像之前那樣點擊了導航欄中的項目名稱時，這里展示的就是目標概 況(Target Summary)，其中包括當前應用的一些基本信息，例如設備類型、iOS版本、屏幕定向方案等等。此外，應用的圖標及加載圖片也是在這里進行設置的；我 們將會在后文中進行演示。

在導航欄中單擊Portfolio路徑中的AppDelegate.m文件，編輯區就會相應的進入代碼編輯狀態。

接下來單擊Portfolio路徑中的MainWindow.xib文件，這時編輯區所呈現的就是用于編輯用戶界面的Interface Builder，如下圖所示。我們通常會在這里對應用界面做最基本的構建。

右側的檢查器(Inspector)當中共有6組工具，其中后面4組是開發工作當中最常用 的，從右到左依次為連接檢查器(Connection Inspector)、規格檢查器(Size Inspector)、屬性檢查器(Attributes Inspector)、識別檢查器(Identity Inspector)。

另外一個最常用的操作莫過于Xcode左上角的“運行(Run)”按鈕了。這個操作會將項目代碼編譯成為應用，并在iOS設備模擬器中運行，以便我們直接查看程序的工作情況，而不必每次都部署到實際設備中。

不妨現在就點擊“運行”按鈕或使用快捷鍵Command+R，來看看我們的模板項目打包成應用之后的樣子：

什么也沒有。iPhone模擬器的工作機制與實際設備差不多，Home按鍵是可以點擊的， 其他的一些內置應用也都是可以正常工作的，包括Safari、照片、聯系人、Game Center、最新的Passbook等等，有興趣的話可以玩玩看。另外，我們還可以在“Stop”按鈕右側的下拉列表中選擇iPad作為模擬設備。

更多關于Xcode的使用方法，可以參考蘋果官方的“Xcode 4 User Guide”。

別走開，下頁繼續

#p#

將圖片導入Xcode

我們下載的模板包當中是包括圖片文件的，不過項目默認是不會將這些資源文件加載進來的，我們必須手動導入。方法有兩種：你可以在左側導航欄當中 Control單擊Images文件夾，選擇“Add Files to 'Portfolio'”，然后找到模板包當中PNGs路徑下的全部文件，執行添加(Add)；或者也可以首先在Finder中找到這些文件，然后全部拖 到Xcode導航欄的Images文件夾中。

如果采用第二種方式，在執行導入的時候，Xcode會提供一些操作選項，記得勾選其中的“Copy items into destination group's folder”，確保資源文件最終會被打包到應用項目當中。

應用界面的可視化編輯

iOS開發的圈子當中始終存在一個爭論——是完全通過代碼的方式創建應用更好，還是使用Interface Builder更加直觀的構建界面來的更好些。兩種方式都是可行的，而且它們在本質上可以說是互補而不是矛盾的關系，具體的開發策略還是由實際項目的特點所決定。

傾向于純代碼方式的開發者們也許真的忽視了可視化編輯工具在界面創建過程中所體現出的高效與直觀。對于我們這些習慣了Adobe系列工具的設計師來 說，可視化編輯的方式無疑是最好的切入點；而且我們的案例是很典型的基于視圖(view)的應用，在這里使用Interface Builder進行界面構建也是最合理的。

首先，我們來看看怎樣創建一些可以通過標簽欄(Tab Bar)進行切換的界面，或者說視圖(view)。在Xcode左側的導航欄中點擊MainWindow.xib，進入Interface Builder編輯模式。在右下角的庫(Library)中選擇“Show the Object Library”圖標(看上去像個立方體的那個)，在下面的列表中找到“View Controller”。

拖拽一個View Controller對象到編輯區左側的文檔結構列表(Document Outline)當中，并在"Tab Bar Controller"上面放開。此時后者會展開，一個View Controller嵌套在里面。

重復執行兩次這樣的操作，使Tab Bar Controller當中包含3個View Controller，此時我們也可以在編輯區當中看到，默認的View Controller的標簽欄里已經有了3個未命名的Tab，如下圖所示：

什么是View Controller?

View(視圖)和Controller(控制器)都是MVC開發模式(Model View Controller)的組成部分。這種開發模式旨在將程序的數據、業務邏輯與表現進行分離(類似前端的“內容、樣式、行為分離”)。其中"Model" 包括數據和算法等方面，“View”涉及軟件的人機交互界面，而“Controller”負責將這兩者銜接起來，對用戶行為進行處理；而View Controller即是指專門負責某個特定View的Controller。

創建類(Class)

我們需要創建一些“類”來生成視圖。在Objective-C這樣的面向對象編程語言當中，“類”用來定義對象(Object)所共有的屬性與方法。通過“類”，我們可以實例化出更多的同類對象。

在我們的案例當中，每個視圖都是一個對象，它們有各自的內容與行為特征。所以我們需要創建3個不同的類，以便對每個視圖的屬性和方法進行定義。這些類所扮演的就是View Controller的角色。

要創建新的類，使用快捷鍵Command+N，在左側的列表中選擇“Cocoa Touch”中的“Objective-C class”，如下圖所示：

點擊“Next”，在“Class”文本框中將這個類命名為“HomeViewController”，在下面的“Subclass of”列表中選擇“UIViewController”，并勾選“With XIB for user interface”。

繼續點擊“Next”，在接下來的對話窗中，將類文件的保存路徑設置為“Begin Here>Portfolio”，點擊“Create”。

以相同的方法再創建兩個類，分別命名為“PortfolioViewController”和“ContactViewController”。之后，你可以手動在導航欄中對文件進行拖放排序，使它們看上去更符合邏輯：

為Tab與視圖建立關聯

回到MainWindow.xib當中，在文檔結構列表里選中我們之前添加的第一個View Controller，在右側的識別檢查器(Identity Inspector)中，展開“Class”下拉列表，選擇其中的“HomeViewController”。

接下來切換到屬性檢查器(Attributes inspector)，在“Title”中輸入“Home”，并在“NIB Name”中選擇“HomeViewController”。

在文檔結構列表中展開這個View Controller，選中其中的“Tab Bar Item”，然后到屬性檢查器當中將“Title”設置為“Home”，并在“Image”下拉列表中選擇我們之前導入的圖片文件之一，tab- icon-home.png，這里你并不需要特別為Retina屏幕指定帶有@2x后綴的文件，應用會在運行的時候自動識別。

以同樣的方法對另外兩個View Controller進行操作，將它們分別與“PortfolioViewController”、“ContactViewController”建立 關聯、掛上NIB文件，并為它們各自的Tab Bar Item設置相應的Title(Portfolio、Contact)與圖標(tab-icon-portfolio.png、tab-icon- contact.png)。

Tab在高亮狀態時的顏色也是可以定義的。在文檔結構列表中選中“Tab Bar”對象，然后在右側的屬性檢查器中找到“Image Tint”，在其中設置我們所需要的配色方案。不過這里所做的設置只有在iOS 5以上的系統中才會有效，對于iOS 4以及更低版本的系統來說，高亮狀態仍然時默認的藍色。

我們已經為Tab與視圖建立了關聯，要檢視它們能否正常工作，我們還需要在每個視圖當中添加一些范例內容。

在Xcode左側的導航欄中選擇HomeViewController.xib，然后從右側的對象庫中拖拽一個Label控件到編輯區當中的空白View上面。雙擊該控件，將文案更改為“Home”。

[[76507]]

在PortfolioViewController.xib與ContactViewController.xib當中也執行同樣的操作，Label的文案相應的更改為“Portfolio”和“Contact”。

現在點擊“Run”按鈕，或使用快捷鍵Command+R來運行一下叭。我們可以在iPhone模擬器中看到，應用的標簽欄已經可以正常的切換界面了。不賴！

別走開，下頁繼續

#p#

向視圖中添加圖片和文字

要通過Interface Builder向視圖當中添加圖片和文字，我們首先需要創建一些對應著不同類型內容的“容器”，也就是“Image View”與“Text View”。與添加View Controller的方式相同，我們也需要將這兩類View從右側的對象庫當中拖拽出來放到界面當中。我們還可以在規格檢查器(Size inspector)中對這些容器進行精準的定制，包括布局位置、尺寸等。

而在屬性檢查器(Attributes inspector)中，我們可以為圖片容器指定其中所要顯示的圖片，也可以控制文字容器的各種屬性。

接下來我們要向HomeViewController.xib當中添加圖片。首先刪除之前的Label控件，從庫中拖拽一個Image View到界面當中，在屬性檢查器當中的“Image”下拉列表里選擇“home-bg.png”，然后將“Mode”設置為“Top Left”。

到規格檢查器(Size inspector)中，確保其中的4個屬性值分別為“0”、“－20”、“320”、“480”，如下圖所示：

接下來，拖拽一個Text View到界面中，雙擊編輯其中的文案，例如更改為“A Catchy Slogan Here”，在屬性檢查器中設置為居中對齊，將字色設置為白色，并禁用背景色，然后將Font類型更改為“Custom”，將其他屬性設置為“Snell Roundhand,Regular,24”。

現在我們的HomeViewController.xib看上去大致是這樣的：

因為這三個界面都是被放置在Tab Bar Controller體系當中的，也就是說我們在設計這些單獨界面的時候必須考慮到底部標簽欄的占位。Xcode可以幫助我們在界面當中模擬這類全局元素 的占位情況。確保在Xcode左側的導航欄里選中HomeViewController.xib文件，在文檔結構列表中選擇“View”對象，然后在右側 的屬性檢查器(Attributes inspector)中找到最上面的“Simulate Metrics”一欄，在“Bottom Bar”中選擇“Tab Bar”，如下圖所示：

這個功能并不會向實際應用里又添加一個標簽欄，它只是為我們提供一個可視化的設計指引，幫助我們對界面元素進行更精準的定位。

接下來，我們可以向Portfolio及Contact界面中添加圖片和文字內容了。具體的樣式可以參考本文開始時的目標演示圖片，或參考模板包當中提供的PSD文件。

在Portfolio界面當中創建案例縮略圖，以及在Contact界面中創建聯系方式按鈕時，我們需要使用對象庫中的Round Rect Button控件，而不是之前那樣使用Image View；因為這些地方都是需要響應用戶的操作并由此觸發相關行為的，按鈕類的控件可以幫我們實現這個目標。將Round Rect Button拖拽到界面內，到右側的屬性檢查器當中，將按鈕類型(Type)設置為“Custom”，然后就可以通過下面的“Image”屬性為其設置具 體的背景圖片了；如果需要的話，還可以進入規格檢查器(Size inspector)當中對按鈕的尺寸進行設置，使其符合按鈕圖片的大小。

3個界面都打造完畢后，點擊“Run”按鈕或使用快捷鍵Command+R來運行應用，通過iPhone模擬器來檢視當前的工作成果。

其他技巧

在iPhone模擬器中點擊Home按鍵回到首屏，你會發現我們的App圖標只是一個干巴巴的白板，在應用被打開的時候也沒有任何額外的加載圖像。

回到Xcode中，點擊導航欄中的Portfolio項目圖標，此時內容區會呈現出應用的信息概況。在其中找到“App Icons”和“Launch Images”，這里就是我們為應用添加圖標和加載圖像的地方了。

設置的方法很簡單，在Finder里面找到模板包App Icons路徑下的相關圖片文件，直接拖拽到那4個空位當中就OK了。

如果要自己制作應用圖標，在尺寸方面要符合以下規格(以像素計)：

標準：57×57

Retina：114×114

加載圖像的尺寸則與屏幕一致：

標準：480×320

Retina：960×640

除了在iPhone當中顯示以外，應用圖標的使用環境還有很多，例如兩種規格的iPad、系統設置(Settings)、Spotlight搜索結果、iTunes等等。這篇文章很詳細的給出了這些上下文環境中所需的圖標規格，另外也可以參考iOS Human Interface Guidelines對于圖標規格及使用方法的說明。

值得一提的是，iOS會自動為你的圖標添加圓角和高光，所以在制作的時候你并不需要自己處理這些效果。如果不希望系統為圖標添加高光效果，可以在之前設置圖標的地方勾選“Prerendered”。下圖演示的是勾選“Prerendered”前后的效果對比：

要改變圖標下面顯示的應用名稱，點擊應用概況中的“info”選項卡，這里所呈現的就是應用的.plist文件當中的內容。.plist是一個XML文件，里面包含了應用的主要設置信息：

其中的一些信息，例如“Main nib file base name”，所指向的是應用在第一次打開時需要加載的資源文件。其他信息，例如“Bundle Identifier”，則與通過iTunes Connect向App Store提交應用時的相關環節有關。

在這些信息中找到“Bundle display name”一項，將右側的“${PRODUCT_NAME}”修改為你想要的名稱即可。

輔助編輯器(Assistand Editor)

到目前為止，我們的自定義按鈕是可以對點擊動作作出響應的，不過也僅此而已，它們還不會做任何其他事情。為了使它們能夠工作起來，我們需要借助輔助編輯器的幫助來寫一些代碼。

在Xcode左側的導航欄當中選擇ContactViewController.xib，然后到Xcode界面的右上角找到輔助編輯器按鈕，選中它：

在這種模式下，編輯界面會被分割為兩部分，其中左側是 ContactViewController.xib的可視化編輯界面，右側是與其對應的頭文件，即ContactViewController.h。我 們可以在下圖中看到，文檔結構列表和右側邊欄已經被收起了，以便為兩個編輯視圖提供更多的空間。你可以到Xcode菜單中的“View”一項中找到相關的 切換操作。另外你大概也發現了，圖中代碼編輯區的樣式風格與你的有所不同，這是因為我(英文原文作者)使用了“Dusk”主題；你可以在 Xcode→Preferences的“Fonts and Colors”更改代碼編輯區的主題。

別走開，下頁繼續

#p#

聲明屬性(Property)與方法(Method)

一個“類”通常包含特定的“屬性”和“方法”。我們可以將“屬性”理解為“類”所擁有的特性特征，而“方法”則是指“類”能做些什么。

當我們向ContactViewController中添加按鈕時，我們需要將這個按鈕聲明為ContactViewController類的屬性，并通過“方法”告訴按鈕在被點擊時應該做怎樣的反應。

在ContactViewController.h文件中，我們可以看到如下代碼：

其中，第一行代碼的作用是讓我們的類可以訪問UIKit框架當中的各種預置的UI類。

接下來一行(@interface)的作用是將ContactViewController聲明為UIViewController的一個子類。UIViewController是在UIKit庫中預先定義的，它的子類可以繼承它的所有特性(包括屬性和方法)。

我們可以在@interface與@end之間聲明各種自定義的屬性和方法。按住control鍵，從 ContactViewController.xib里的“WWW”按鈕上拖出一條導線，一直拉到.h文件的代碼中@interface與@end之間的 部分，釋放。這時會出現一個對話窗：

確保“Connection”當中所選的是“Outlet”，并在“Name”里輸入“websiteButton”，點擊“Connect”，Xcode會自動生成一段代碼。

接下來再執行一次相同的拖放操作，這次，在對話窗中為“Connection”選擇“Action”，并在“Name”中輸入“openWebsite”，點擊“Connect”，Xcode同樣會自動生成一段代碼。

到目前為止ContactViewController.h中的代碼看上去應該是這樣的：

還不賴，不過這些代碼都是什么意思？

@property用來聲明一個新的屬性，括號中是兩個參數，其中“retain”涉及內存管理，我們將在后文中講到；而“nonatomic”則 與多線程管理相關，多數的屬性都要聲明為nonatomic，禁用多線程。接下來是關于返回類型的聲明，其中“IBOutlet”代表這個屬性是綁定于用 戶界面中某個特定的控件的；“UIButton *websiteButton”的作用是將當前屬性命名為“websiteButton”，并使其繼承UIKit中定義的UIButton類。

接下來一行代碼用來聲明新的方法。其中的“- (IBAction)”同樣用來將方法與.xib文件中的界面控件綁定起來。“openWebsite”是這個方法的名稱，冒號后面的“(id)sender”是參數，用來傳遞產生動作的對象信息，不過我們現在用不到它。

也許你已經注意到了，我們在創建View Controller類的時候，名稱都是以大寫字母開頭的，但屬性和方法的名稱卻不是這樣。這是面向對象編程語言的一種公約，即“類的命名以大寫字母開頭，屬性(變量)和方法(函數)的命名以小寫字母開頭”。

我們之前演示的“拖動＋自動生成代碼”的方法是很方便的。我們當然也可以自己手動編碼，只是使用輔助編輯器會更加快捷一些。

屬性合成(Synthesis)與內存管理

現在，我們將編輯器切換回標準模式(Standard Editor)，彈擊選中ContactViewController.m，在大約12行的地方，你可以看到系統幫我們自動生成的代碼：

這會告訴編譯器在構建應用的時候為屬性生成設置器(setter)與訪問器(getter)，我們不需要手動編寫代碼就可以使程序具有訪問和設置屬性值的能力。

再下面，找到這兩行代碼：

覺得眼熟？之前在ContactViewController.h當中，系統確實自動生成了類似的代碼，不過在.h文件中的代碼只是一種“聲明”，真正編寫方法函數還是要在.m文件中進行。具體來說，我們需要將按鈕的反映行為編寫到這里。

你還可以在.m文件中找到類似下面這樣的代碼：

這段代碼與內存管理有關。內存管理對于移動應用編程來說是非常重要的，因為移動設備在內存方面的資源確實很有限。當websiteButton屬性被定義 時，通過“retain”參數，系統會將一部分內存分配給這個屬性。“retain”的具體作用是告訴系統分配出一定的內存，并且在我們進一步下達命令之 前不要將這部分內存收回。

而“dealloc”方法只會在當前View的實例被銷毀時執行，所以在這個方法中添加“websiteButton release”就相當于告訴系統：“你可以在這里收回這部分內存資源了，我們不再需要它了”。如果沒有這行代碼，那么即使界面已經切換、 websiteButton不再存在，這部分內存依然在被占用；這種情況就叫做“內存泄漏(memory leak)”。如果在開發過程中不做相關處理，那么這種情況就會逐漸累加起來，導致程序運行效率低下甚至崩潰，或是造成系統電量損耗等其他不良后果。

幸運的是，對應著iOS 5以上版本的SDK當中增加了ARC機制(Automatic Reference Counting)，它可以幫助我們進行自動化的內存管理。在創建新項目的時候，你可以選擇是否啟用ARC。在當前案例中，我們并沒有用到它，因為我們要 在這里對相關知識進行簡要的介紹。

代碼綁定

之前使用輔助編輯器為按鈕自動創建屬性和方法的時候，系統不僅幫我們生成了相關的代碼，而且還對按鈕控件與相關代碼進行了綁定。

選擇ContactViewController.xib，展開文檔結構列表，在“Placeholders”下，選擇“File's Owner”，它所代表的就是整個ContactViewController類。現在到Xcode右側，打開連接檢查器(Connections inspector)，看上去應該是這樣的：

在“Outlets”當中，我們可以看到，websiteButton屬性已經被關聯到了.xib文件的按鈕控件上。

而在“Received Actions”里，openWebsite方法也已經與該按鈕的“Touch Up Inside”事件建立了關聯。這個事件所代表的就是用戶在界面中輕觸按鈕并抬起手指的整個動作，它是按鈕控件的默認事件。

手動編寫Objective-C代碼

接下來我們要告訴按鈕在被點擊之后應該做些什么。

在ContactViewController.m中，將定義openWebsite方法的代碼更新為：

在這段代碼中，我們做了兩件事。

首先，我們在第59行的代碼中創建了一個臨時變量“webAddress”，用來存儲一段包含特定URL(http:''www.apple.com")的字符串。這里的寫法是一種比較快捷的方式，系統可以自動為NSURL實例分配內存，也會在需要的時候自動釋放。

而后面的代碼則告訴系統可以使用相關的應用(例如Safari)來打開這個鏈接。

對于Contact界面中的其他按鈕，我們也可以通過類似的步驟來設定響應規則。將上面代碼中的“openURL:”替換為“mailto:”，可以使應用觸發默認郵件客戶端執行相關的郵件工作，而“tel:”則可調出系統的撥號鍵盤界面，直接撥打預設好的電話號碼。

使界面以模態的方式呈現

當前的Portfolio界面中有一些作品的縮略圖，我們希望用戶在點擊它們的時候，對應的大圖可以彈出。

要實現這一點，我們可以創造模態視圖，使新界面以動畫過渡的方式呈現出來，并覆蓋在其他界面之上。

創建模態視圖

要創建模態視圖并不難。首先，我們要創建一個新的類，名字叫做BigImageViewController，具體方式與我們之前創建3個自定義類是相同的。

然后打開BigImageViewController.xib文件，向界面中添加一個Image View作為圖片容器，并將它的“Image”設置為portfolio-modal-bg.png圖片文件。接下來，在左上角添加一個類型為 “Custom”的圓角按鈕控件，使用button-close.png作為其背景，并將字色設置為白色，文案為“Close”。

然后在現有界面基礎上再添加一個Image View，大致尺寸和位置如下圖所示：

[[76516]]

切換至輔助編輯器模式，在新添加的空白Image View上執行Control+拖拽，并指向BigImageViewController.h代碼當中@interface與@end之間的部分，以此 方法分別建立名為“imageFrame”的Outlet，以及名為“closeView”的Action。系統將在.h文件中自動添加如下代碼：

而具體的closeView代碼還需要我們手動添加到.m文件當中：

這段代碼的作用是關閉當前已經激活的模態視圖界面。

加載模態界面的代碼

回到標準編輯器模式，打開PortfolioViewController.h文件，將代碼手動更新為：

我們新寫了一行#import代碼，用來將之前新建的BigImageViewController類引入到 PortfolioViewController當中，這樣我們就可以在Portfolio界面中與之通訊，在需要的時候告訴 BigImageViewController為自己創建一個實例。

我們還為PortfolioViewController創建了一個屬性和兩個方法，其中第二個方法openBigImage并不需要與.xib文件中的任何控件建立關聯，所以它的返回類型是“void”，而非“IBAction”。

你也許會覺得奇怪，為什么在這里創建屬性和方法的時候，我們沒有使用副主編輯模式，通過拖拽方法來實現。其實結果是相同的，只是我們在這里刻意使用手動編碼的方式來練習一下。所以接下來，我們還要到.m文件中手動輸入那些與“屬性合成”以及內存釋放相關的代碼：

這次還真是輸入了不少東西，我們來看看這些代碼的作用是什么。

selectImage1方法為bigImage屬性指定了具體的圖片，即image1-big.png文件。同時該方法還調用執行了openBigImageView方法。

在openBigImageView中，我們首先創建了一個BigImageViewController類的實例，并將其命名為 “bigImageView”。這個實例自身就是一個模態界面，它會以“翻轉(flip)”的動畫效果出現，并將bigImage作為具體的圖片放到其 imageFrame容器當中。

因為我們通過代碼手動為BigImageViewController的實例分配了內存，所以我們還要在適當的時候將這部分內存釋放。問題在于，我 們并不知道這些資源會被使用多久，因為大圖模態界面會打開多長時間是取決于用戶的。要解決這個問題，我們需要使用autorelease命令，它會告訴 iOS系統一直保持內存資源的分配狀況，直到確認“安全”的時候再進行釋放。

模態視圖的代碼綁定

現在我們需要將代碼綁定到XIB當中的控件上。選擇PortfolioViewController.xib文件，點擊文檔結構列表當中的“File's Owner”，然后打開右側的連接檢查器(Connections inspector)。

在“Received Action”中，我們可以看到之前編寫的selectImage1方法，它的右側是一個圓環。點擊這個圓環并進行拖拽，一直拖到界面當中的第一個縮略圖上面釋放，如下圖所示：

在彈出的列表當中選擇“Touch Up Inside”事件。

試著運行一下我們的應用叭，如果之前的工作沒有出現問題的話，現在我們應該可以在Portfolio界面中點擊第一個縮略圖并查看相應的大圖了。

接下來，你可以自己試著對另外三個縮略圖進行處理了。你需要創建selectImage2，selectImage3，selectImage4這 三個新的方法，不過對于openBigImage方法來說就不需要重復創建了，它是可以被共用的。另外你也可以嘗試為模態界面使用不同的動畫過渡效果，包括

UIModalTransitionStyleCoverVertical

UIModalTransitionStyleCrossDissolve

UIModalTransitionStyleFlipHorizontal

UIModalTransitionStylePartialCurl

如果你在這個過程中遇到麻煩，也可以打開模板包，在End Result路徑中找到最終完成版的文件進行參考。

總結

本文確實涵蓋了不少方面的內容，從Xcode的界面介紹、基本操作，到在Interface Builder中創建界面，以及實際代碼的編寫。我們通過一個簡單而具有代表性的案例了解了iOS應用開發當中的一些關鍵概念，包括類、屬性、方法、內存管理等。

本文只是引領你入門的一個小小的起點。在此基礎上，你可以通過更多的資源進一步深入學習iOS開發的相關知識與技能了。好運！