開始工作

在這篇教程中，我們會將一個為iOS 6設計的app《Treasure Hunt》升級適配iOS 7。

Treasure Hunt是一個社交應用，允許使用者分享藏寶圖，使用者們可以沉浸於一起解決謎題以及尋找寶藏。這有點像地謎藏寶遊戲，它是一種有趣的戶外活動，玩家們使用他們的移動裝置來記錄座標，將藏匿物品的盒子藏起來，然後其他玩家來尋找寶物盒子。但是Treasure Hunt並不使用GPS座標，而是使用一種古老傳統的手繪藏寶圖。

以下是app在iOS 6.1系統下的樣子：

這個app除了用來尋找歷史上的寶藏，比如說大名鼎鼎的加勒比海盜基德船長傳說中再17世紀後期埋藏的寶藏，人們還可以上傳一些他們自己喜歡的藏寶圖，比如說生日派對的禮物，尋找復活節的雞蛋，或者其他物品，提供一些謎題，讓其他人來尋找這些物品，無論是尋找金山還是僅僅是一包糖果，人們都能從尋找中的到樂趣。如果《達芬奇密碼》中的主角們有了這個app！

注意:如果上面的描述讓你希望下載Treasure Hunt到手機中，然後去尋找黃金的話，你將會失望的。這只是一個例子工程，它裡面的藏寶圖都不是真的。抱歉了，寶藏獵人們！

如果這是一個真實的app，那麼app就會連線一個伺服器，從伺服器中下載分享的地圖，支援使用者交流他們的社交活動。這些都不是本教程的範圍，所以這app只是簡單的模擬連線到了伺服器。

最重要的一點是通過Treasure Hunt這個app，本教程可以向你演示在將你的app適配iOS 7中可能遇到的困難，然後告訴你它們的解決方式。

點此下載這個Treaure Hunt iOS 6版本的原始碼。如果你想要看看Treasure Hunt如何在iOS 6上進行工作的，最佳方法是使用Xcode 4.6開啟app。這樣它會在iOS 6模擬器上執行，效果最好。

如果你使用Xcode 5開啟app，app就會依靠iOS 7 SDK執行，有些功能可能不能來工作，而這就是你需要在本教程中瞭解如何解決的內容。

如果你已經解除安裝了Xcode 4.6也沒有關係，只要你不對app在iOS 7以前的版本上是如何工作的感到好奇，你也不需要Xcode 4.6。

app在Xcode 5中執行，你可能會注意到一些奇怪的地方，不過沒有關係，我們馬上就要修復它們。

為什麼要升級適配iOS 7？

如果你已經有一個app在App Store中表現不錯，那麼為什麼你需要升級它適配iOS 7呢？這個決定取決於一些東西。如果你的app的設計風格和iOS 7相差不是很大的話，也沒有必要太著急。你只需要在下一次更新中改一改UI就可以了。然是如果你的app是擬物風格，擁有很多細節，充分渲染的紋理，就想Treasure Hunt一樣，那麼你可能就需要考慮以下幾點了。

1.app的UI和iOS 7的風格完全不適合。你需要全新設計的UI來配合iOS 7的風格。設計和時尚一樣，如果你的app不緊跟最新的潮流，那麼使用者就會去開始尋找那些看上去最新的app。

2.即使你不想重新設計使用者介面，某些標準的UIKit元素，比如說警示視窗，action shhet以及彈出鍵盤現在顯示的新風格，會和app的現存風格非常不協調。

3.在Xcode 4.6上使用iOS 6 SDK進行編譯的app在iOS 7上執行時是採用一種特殊的模擬模式，它試圖儲存app原來的樣子。但是一旦你升級到了Xcode 5，在iOS 7SDK上編譯，你的app就會開始出現狀況了。新的SDK對

4.標準的UI元素的尺寸和視覺做了很多的改變。你要考慮修復這些問題。

5.iOS 7引入了很多新的特性，比如說動態型別（Dynamic Type），它可以允許使用者決定螢幕上的字型大小。如果 你的app不支援這個功能，使用者就會開始尋找替代品。

6.如果你的app支援手勢定製，那麼他們可能會和iOS 7新的系統手勢相沖突，比如說新的調出控制中心的手勢以及滑動退回導航控制器。你可能需要重新定製一下你的手勢，讓他們可以在iOS 7上共存。

7.蘋果是一家關心未來的公司，而iOS 6很明顯的是代表過去的。如果你想要被蘋果注意到，那麼app升級到適配iOS 7則是必須的。想讓App Store 推薦沒有采用iOS 7風格的app是不太可能的。適配 iOS 7會讓你在App Store取得成功的機會變大。

8.icon是不一樣的，你需要一個新的使用新圓角的120*120畫素的icon。所以，至少請更新你的圖示。

適配到iOS 7可能需要花費很多工作，尤其是如果你需要變換一個全新的UI。擁抱這些變化吧。如果不這麼做的話，你的app遲早可能遭遇到被遺棄的風險。而你的app顯然是值得更好的待遇。

從頭做起
iOS 7的一個重要主題就是依從（deference）；意思就是介面要完全為使用者服務。蘋果非常明確的指出app需要關注與自身的內容。對Treasure Hunt來說，內容就是藏寶圖。如果你有一個影象處理的app，那麼內容就是照片。如果你的app是記事app，那麼內容就是筆記。iOS 7是內容為王。UI元素是襯托內容的，不能喧賓奪主。

在考慮把app升級適配iOS 7的時候，如果重新考慮一下對你的app來說什麼是真正重要的，什麼是不太重要的會是很好的切入點。在iOS 7的世界，使用者對你的app還會有比較好的體驗嗎？也許現在是改變app的導航結構的好時機。把兩個分離的視窗合併成一個或者讓使用者使用手勢直接對內容進行操作而不是依靠按鈕和滑塊。

很多系統app，比如說日曆以及照片，現在是使用通過對內容變焦的方式來做導航。你可以從年，變焦進入次年中的月份，然後從月份變焦進入周，進入日，這種方式很直接，很吸引人，但是需要運用動畫。當你啟動一個app的時候，app icon變焦放大到啟動畫面。同樣反之，關閉app的時候也可以使用一個變焦縮小的動畫。變焦是iOS 7的一個重要的概念，如果你app也可以利用這點的話，那麼就應該考慮是否使用這種新的方式了。

Treasure Hunt需要改變的內容沒有那麼多。這裡只對UI做一些小的變化，螢幕的介面結構不會有大的調整。但是在考慮升級自己的app的時候，你可以考慮一下抓住這個機會，不僅僅只是調整UI，而是通過升級提高使用者體驗。

開始使用Xcode 5

注意：在Xcode 5中開啟工程之前，事先做一個備份很重要。Xcode 5會對你的storyboard檔案做一些形式上的變化，而往往有些時候你想要對老版本進行修改，但是一旦Xcode 5開啟專案之後，再使用之前的版本就無法對它們進行修改了。當然，你也可以使用版本控制，但是稍微麻煩一些，所以請確保事先備份。

在Xcode 5中開啟Treasure Hunt。這一步應該沒有什麼問題。然後按建立app（這是在你的鍵盤上的cmd鍵，在B鍵旁邊）。這個時候應該看不到任何警告或是錯誤提示。

現在來看看app在iOS 7上是什麼樣子的吧。使用iPhone Retina（4-inch）模擬器執行app。見下圖。

 現在app看起來是這個樣子：

這裡有三個大的問題：

1.在app的主介面，+ bar icon是藍色的，而且Edit標籤和bar按鈕的形狀不符。顯示羊皮紙的table vie cell的背景並不是透明的而是不透明的白色。選擇的tab bar icon也是藍色的，而且顯示的位置不對。

2.Edit Map介面原本狀態所在的位置現在只有一塊黑色的橫條，而且其他 的佈局看上去不是很整潔。

3.第三個介面，是Map Detail螢幕。這次status bar倒是顯示出來了，但是和地圖重疊了，很難看清楚。工具欄看上去也不是很好，之前的陰影圖片現在只是在頂部的一個黑色的橫條，而標籤上字的顏色也導致字看的不太清楚。

Treasure Hunt還有一些其他的介面，他們都有類似的問題。更糟糕的是，app原本紋理豐富的擬物化設計不再適合 iOS 7的整體風格。其他的iOS 7app都是採用極簡化的設計。這和Treasure Hunt的設計風格實在是不搭。

下圖是線索羊皮紙的彈出框，使用者可以在上面給藏寶圖新增線索以及評論。下圖完全顯示了兩種完全不同視覺風格的不協調。

彈出鍵盤的新的樣子和具有厚重紋理的線索羊皮紙之間衝突明顯。看上去並不好看。

單獨為iOS 7設計
為了簡化升級，讓我們假定現在這個app是隻能在iOS 7上執行。iOS 7的視覺和感覺和之前的版本非常不一樣，要想讓app看起來在兩種風格上都不錯的話很不容易。

要讓app只適配iOS 7，你需要設定iOS Deployment Target為7.0。在Xcode 4中你可能已經對這一步很熟悉了，但是現在使用Xcode 5，有一種新方法可以進行設定，因為Xcode 5在一片區域中同時合併了很多設定介面。

點選頂部的Treasure Hunt的icon，從Target ssettings跳轉到Project settings。一個工程可以包含很多target。如果你對工程的設定做改變，它會覆蓋這個工程中所有的target，除非你事先對某個target做了單獨的設定。

把 iOS Deployment Target從6.1變到7.0。

按來再次建立app。Xcode現在會有幾個警告資訊：

很顯然app使用的一個API不適配iOS 7。我們可以待會兒處理這個問題。除此之外，沒有編譯錯誤，所以整理來說狀況還不錯。

但是等等！這不是說現在app已經可以準備好提交App Store了。就和之前看到的一樣，還有很多的UI問題要解決。

你現在可以來一個一個處理這些問題了。處理的時候，最簡單的方法是移除所有的定製圖片，讓app返回到最初的原始框架狀態。這樣做可以讓你集中精神先處理最重要的問題。一旦所有的東西都處理好了的時候，就可以重新新增圖片了。

對Treasure Hunt來說，移除定製的圖片很簡單。iOS 6版本的定製圖片都是用程式碼控制的，只要用一個單獨的flag就可以控制它們的顯示。

開啟TreasureHunt-Prefix.pch然後找到下面這行：

1. #define CUSTOM_APPEARANCE 1 

把它變成：

1. #define CUSTOM_APPEARANCE 0 

建立然後執行app，如下所示：

現在它已經像是一個iOS 7app了，但是還是有很多UI問題。同時關閉了定製的圖片顯示意味著app是去它大部分的魅力。木質紋理可能不是很適合新的設計風格，但是它們也給了app一種個性。本章將教你如何在一個極簡化，缺乏紋理的世界裡如何保留原有的魅力。

請注意現在所有的編譯警告都消失了。編譯錯誤大部分都和UIAppearance API相關。現在app不再使用這個API，之前通過#define宣告已經解除了使用這個API。如果你在自己的app中使用了UIAppearance那麼就要注意了，很多iOS 6以及之前系統可以使用的東西現在要麼無法工作，要麼會有細微的變化。

注意：當你將Deployment Target改為iOS 7的時候，非Retina顯示屏iPhone（non-Retina iPhone）模擬器會從scheme picker中移除。這也就是說你無法將iOS 7 app在非Retina顯示屏iPhone，模擬器上進行測試。這看上去很不人性化，但是你要知道iOS 7系統無法在任何低解析度的iPhone或者iPod touch(iPhone 3GS或者更早版本）上執行。所有可以執行iOS 7系統的iPhone都有Retina顯示屏。

但是這是否意味著你不再需要為你的app支援非retina的圖片了呢？這個要看app的情況。如果你的app是iPad版本（或者Universal版本），那麼你仍然需要提供多個版本的圖片來支援iPad 2以及iPad mini。

請記住iPad可以在一中特殊的模擬器中執行任何的非universal iPhone版本。而這個模擬器的iOS 7版本忍讓使用Retina版的圖片。如果你的app是iPhone-only，那麼你就不需要準備多套圖了。

如果你決定了只准備一套給圖提供給app的iPhone版本，確保你的Retina圖片仍然遵循@2x.png的命名規則，否則UIKit無法對他們的大小自動進行調整。

修復table views

My Maps是app的主介面，它是使用者進入app首先看到的介面，所以你可以從My Maps介面開始為app升級iOS 7。這個介面展示了本地使用者建立的以及分享給其他Treasur Hunt使用者的藏寶圖。

My Maps介面，移除了繁複的紋理之後，如下圖：

看上去不是太糟糕。但是仍然有一些小的細節需要改善。讓我們從table view開始吧。table view cell中的文字應該是需要加粗的。蘋果在iOS 7中做過的一個重大變化就是字型的格式；iOS 7的app現在使用的字型更細。

還有一個更加不明顯的改變是table view cell的被選擇狀態的形式。如果你選擇了一行，那麼該行的文字會變成白色。這在iOS 7之前是很必要的，因為預設的行被選擇後顏色會變成非常飽和的藍色，但是現在行被選擇後已經變成了淺灰色了。在蘋果自己app 的table view中，如果行被選擇後，標籤文字的顏色不再改變。

你可以手動修復這兩種變化。但是這裡有一個更簡單的方法，開啟MainStoryboard.storyboard 檔案，找到 Resources組，選擇 My Maps View Controller。這是一個table view controller，它帶有單獨的一個原型cell，見下圖。

這個cell會採用基本（Basic）的風格，但是由於這個app在iOS 6中也是選擇的Basic風格。所以現在 只需要在Attributes（屬性）中把Style改為Custom，然後再改為Basic即可。見下圖。

我們注意到字型現在變細了。字型之前使用的是System Bold 20.0，現在變成了System 18.0。蘋果做了這個改變，所以我們也要一起改一下。新的字型顯示如下：

建立然後執行app，在table中選擇一個cell。你可以看到被選擇的行中的文字的顏色仍然是黑色，見下圖：

如果你的app使用了內建的cell風格，那麼可以重複這個步驟來變換所有的table view controller中的cell。

注意：你是否注意到在iOS 7中，table view cell間的分割線不再穿越整個介面了？這是由於內建的cell樣式所做的自動調整。如果你的app使用了定製的cell，你也可以通過對單獨的cell或者整個table view來設定separatorInset屬性來獲得同樣的效果。當你對table view上設定separatorInset的時候，空的cell也會獲得同樣的屬性。

這裡有一個需要注意的地方，那就是cell高度。在iOS 6中會用非常小的圖片來墊高或者削減高度，這麼做事為了符合背景的紋理，但是在iOS 7中，多餘的空間沒有用處而且看上去很彆扭。

再次開啟storyboard，在My Maps View Controller中選擇table view，而不要選擇cell。到Size  inspector介面中，在Table View Size部分，把Row Height從80調到60。建立並執行app，現在再看看table view。縮小了列的高度，app看上去整潔多了。見下圖所示：

Asset Catalogs

iOS 7引入了一種新功能幫助組織你的圖片：asset catalogs。一個asset catalog是一個特殊的資料夾，它有Xcode管理，可以很簡單的管理一張圖片的多個版本（比如：普通版，Retina版，4英寸iPhone版本，iPad版本等等），所有圖片只有一個檔名。

從Xcode的目錄欄，選擇 File → New → File…。從邊欄中選擇Resource，然後再選擇Asset Catalog。

點選Next。保持預設的名字：Media.xcassets，但是請確保你把它新增到了Treasure Hunt target。點選Create。現在已經在工程檔案清單中添加了一個新的藍色的資料夾。

注意：如果你以前在Xcode中還是用過 folder references，它的樣子也是藍色的資料夾，那麼你就應該注意到它和asset catolog是不一樣的。對folder references來說，你是負責管理它們的內容，而如果你通過Finder添加了一個新檔案到這個資料夾，那麼它會自動在Xcode中顯示出來。

然後，asset catalogs會推薦你使用Xcode的介面來對介面做改變，不推薦手動改變資料夾的結構。一個asset catalog包含的不僅僅是圖片檔案。比如說，它也可以包含用來描述catalog檔案結構的JSON檔案。

iOS 7設計的一個重大變化就是tab bar icon的樣式。如果你將現在My Maps介面的icon和系統內建的app比如說電話或是音樂進行比較，你就會發現，My Maps介面現在的icon看起來太寬太厚重了。新的bar icon的筆觸很輕，只有2畫素的寬度。你可以通過匯入一些tab bar icon的新圖片到asset catalog來進行調整。

在工程導航中選擇新的asset catalog，Media.xcassets。現有在asset catalog面板的底部有一個小小的+按鈕。點選+按鈕然後選擇Import。現在進入到Resources/New Images資料夾，然後選擇資料夾中的所有圖片。

點選Open完成匯入新圖片。現在新的圖片顯示在asset catalog了，把他們統一名稱，如下圖。

注意：如果你的asset catalog只有一新圖片一個專案，那麼重複上面的步驟，但是這次要從資料夾選擇單獨的圖片，不要選擇資料夾。

asset catalog可以幫助你更好的追蹤你的圖片，同時讓app載入圖片變得更有效率。你可以在catalog中儲存任何圖片，包括app icon以及啟動圖片。啟動圖片通過asset catalog載入和在iOS 7之前的系統中是一樣的。當你請求UIImage讓它載入一張圖片檔案，它會首先檢視asset catalog。

執行app然後你應該可以看到更乾淨的tab bar icons：

蘋果的內建app，例如音樂app，反選tab icon是很常見的，這只是讓選擇顯得更清楚一點。你現在已經添加了所需的圖片。在 View Controllers組中的MyMapsViewController.m新增下行到viewDidLoad:

1. self.tabBarItem.selectedImage = [UIImage imageNamed:@"MyMapsBarIcon-Selected"]; 

然後在SharedMapsViewController.m中新增下行到viewDidLoad。

1. self.tabBarItem.selectedImage = [UIImage imageNamed:@"SharedMapsBarIcon-Selected"]; 

建立然後執行，可以看到被選擇的tab bar現在有了一個反選的icon：

為了讓app看起來更好一些，你可以使用一張圖片來替代文字Treasure Hunt。在MyMapsViewController.m檔案中，新增下行到viewDIdLoad：

1. self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Crown"]]; 

上面的程式碼使用了新的皇冠圖片來替代文字。執行並且執行app，顯示如下圖。

這個皇冠的性質是app的新主題。你可以在其他的一些介面中看到它。

著色（Tint Color)

讓我們看看iOS 6版本的Treasure Hunt和調整好的iOS 7版本吧。

新版本顯然更適合iOS 7的美學，但是和iOS 6版本所具有的豐富紋理比起來顯得有些平淡。雖說iOS 7的設計風格是更乾淨，色彩更明亮，但是我們的app還是可以有一些自己的風格。稍後我們會給app的外觀再做一些變化，但是現在先讓我們來處理app最基本而且最顯眼的部分：著色（Tint Color)。

在上面的截圖上iOS 7系統上所有的藍色都是基於app的tint color。在iOS 7中，tint color是用來表明哪些專案時可以觸控的。例如，在導航欄還有table view上的 + 以及Edit按鈕都是可以選擇的。著色還可以高亮活躍的專案，比如在選擇欄上的專案。但是在iOS 7中介面是完全為使用者服務的，在app中使用的顏色從現在開始變得非常重要。

tint color預設是藍色，但是通過改變它的顏色你可以立即讓app獲得自己獨特風格，同時成本很低。View是從它的父view繼承tint color的，所以只要在UIWindow例項中設定tintColor屬性，你就可以馬上改變所有view的tint color。而且，如果你的app使用了storyboard，你可以在Interface Builder中設定tint color，這麼做會更簡單。

開啟MainStoryboard.storyboard，然後啟用File inspector，它是inspector面板中的第一個個tab。把Global Tint設定改為一種明亮的棕色—— RGB色調是：red 140, green 70, blue 35——它可以代表木質藏寶箱的主題，如下圖：

建立然後執行app，看看新的tint clor生效的樣子：

現在看上去就比之前的好多了。你還需要確保選擇tint color的時候顏色不能太暗，要不然就很難區分活動的專案和不活動的專案，比如說黑色的標籤和會澤的tab bar icon。

注意：由於iOS 7中的一個bug，Map Detail介面中的segmented control無法獲取屬性調整好的tint color。所以你需要在 MapDetailViewController.m中增加兩行到viewDidLoad：

1. self.view.tintColor = [UIColor whiteColor];  
2. self.view.tintColor = [UIColor colorWithRed:140/255.0f green:70/255.0f blue:35/255.0f alpha:1.0f];  

接下來？

 現在我們已經完成了很多工作了。但是把app升級到iOS 7仍然有很多的工作需要做。更多的內容可以等待閱讀Raywenderich的新書iOS 7 by Tutorials。小編會繼續關注Rayweiderich網站，如果釋出相關文章，會繼續完善這一系列文章。感謝支援。