App升級iOS7體會

本文轉自App升級iOS7體會。

xcode5 GM版已經發布，雖然仍是pre-release版，但離最終版不遠了。對於沒有用到新特性的app面臨的最大問題就是UI的變化。Apple提供了UI Transition Guide給開發者，本來打算翻譯一下，沒想到國內早就有譯文了（唉～看來NDA對於某些人而言，等於NULL）。 鑑於此，這裏側重於Apple提供的cheklist以及app在升級過程當中遇到的問題。

管窺全豹

扁平化的設計已經「流傳」了好久，iOS7上標準控件（UIKit）有了翻天覆地的變化：按鈕沒有邊，狀態欄透明，導航欄變半透明，alert/progress/picker徹底是新的表現形式等等。固然，庫也更新了很多。印象最深的就是試圖控制器中view的尺寸是全屏：即view的尺寸是320×480,包含了頂部的status bar。這一點之因此深入，是由於以前作過view全屏和非全屏之間的切換。在iOS7裏，全屏應該更容易實現。 Apple推出xcode5後，有可能4在不久的未來不能再發布App。在最近這段時間須要說明的是：用xcode4打包的App在iOS7上運行除了alert/preogress等控件是iOS7的樣子，其餘仍是舊的形式。

Apple宣稱iOS7的設計遵循三大主題：

1. Deference:UI幫助用戶理解和使用內容，但不要喧賓奪主（不要讓用戶重UI而不重內容）
2. Clarity：文字要清晰，icon要清楚地言名答意，修飾要適當不可多此一舉，總之要以實現功能爲先來推進設計
3. Depth： 視覺的層次感和現實的運動感，能夠增強用戶的好感和理解

在（重）設計App前，還須要考慮：

• 是否使用Auto Layout
• App是否須要支持iOS6

ps:Apple彷佛只爲開發者「考慮」了ios6上App的升級，不知道還有不少地方的人還在爲4.3，5.x的系統奮鬥！ 爲了更好的區分App類型，從使用控件的角度，Apple將App分紅三種類型：

• standard：標準型，控件全是UIKit提供的
• custom：自定義型，不包含任何UIKit提供的控件
• Hybrid： 混合型，UIkit和非UIkit的控件兼而有之

標準型的話，須要作的修改可能相對少一點，可是由於iOS7的變化太大了，仍是會有「莫名」的問題：

1. nav bar帶有背景圖片：背景圖片是某種深色的帶漸變的效果，iOS7上直接致使上面的按鈕（返回鍵，添加的功能鍵）不見了，可是能點擊
2. 某個subview到statu bar後去了

這些問題經過文檔都能比較容易的解決，標準型App升級主要遇到的是：佈局，對於交互方面的修改升級不會太大。 對於非標準型控件來講，我以爲最大的問題就是風格要和系統協調（說了句廢話）。這主要仍是設計師費神的事情了，我和設計師溝通的結果就是認爲App的配色須要好好修改，你們仁者見仁，智者見智吧。

項目評估（Scoping the Project）

如下就是Apple提供的cheklist。

App必須作的

• 更新icon：120×120；150×150（for ipad）；注意ios7下icon不支持高亮和陰影；並且icon的圓角方式也和之前的不同
• 更新啓動畫面：頁面尺寸要包含狀態欄
• 要支持retina顯示

App應當作的

• 確保在透明的UI環境下，內容清楚可見，好比bar，鍵盤還有透明的狀態欄。視圖控制器的全屏特性也要注意（其實就是要考慮狀態欄消失時的佈局）
• 從新設計自定義的bar button
• 準備無邊界的按鈕： 從新考慮按鈕是否還須要背景圖片之類
• 檢查硬編碼的UI值：好比大小／位置等，嘗試經過系統的方法來肯定這些值
• 檢查UI控件更新致使的問題：如進度條變窄， group型table不是分組顯示的了
• 採用動態類型（Dynamic Type）：iOS7下用戶能夠調整字體大小。所以當使用了Dynamic Type，你須要讓文本響應用戶的調整（這個還沒試驗）
• 作好用戶會從下向上滑進入控制中心的準備：系統檢測到從下向上的手勢，就會進入控制中心，而不會把事件傳遞到App。若是手勢沒有喚起控制中心，那事件會——有些輕微的延遲，傳遞到App
• 從新審視陰影，漸變，貝塞爾漸變。由於iOS7中光滑和層次感是美學中心，——再也不推崇擬物化的風格
• 能夠的話，更新App來支持iOS6: 如使用Auto Layout，storyboards； 不要使用過時的API

從checklist能夠看出Apple此次推陳出新的力度很大，個人感受是之後的App最低只要適配iOS6，可是對於天朝不知道5.x以及之前的系統用戶佔比有多大了。還有，之後的開發必定要使用autolayout還有sb。在iOS7新建工程的模版裏已經沒有xib了，都是默認sb，還有都是默認ARC。

支持iOS6

Apple所指的實際上是支持ios7前的系統，只不過他「眼裏」如今只有ios6了。這裏列舉的方法，對於5.x的系統大部分也是使用的

使用IB來支持多版本App

在Assitantor模式下，xcode5提供給開發者ios7和ios7前兩種佈局，只要點擊preview（如圖），右下角能夠點擊切換 

ios7引入了Asset Catalog來更好的管理圖片，這個會專門說。

選擇性加載資源

這個之前版本升級的時候也遇到過，就是更新的時候有些API不用了，可是老系統裏還能使用，這時須要區分系統了。

if (floor(NSFoundationVersionNumber) <= NSFoundationVersionNumber_iOS_6_1) {
   // Load resources for iOS 6.1 or earlier

} else {
   // Load resources for iOS 7 or later

}

 

Updating the UI（更新UI）

這裏按照Apple文檔的脈絡，挑選那些我遇到的問題。

Using View Controllers

最主要變化就是view是320×480的尺寸。使用 wantsFullScreenLayout 的須要改過來，不然這個在iOS7上會有錯誤。下面分帶bar和不帶bar的情形，說一下layout須要注意的地方。

1帶有nav bar：

若是按以前的frame將y設置爲0，有可能subview會被bar擋住。若是要是subview加在bar底的話能夠經過設置：

self.edgesForExtendedLayout = UIRectEdgeNone;

這樣就能夠了，在viewDidAppear裏你能夠發現，view的frame已經去掉了bar佔用的高度了。

此外，iOS7中的nav bar默認是帶透明的。可是若是選擇了非透明的bar呢？這時，viewcontroller的view會默認去掉bar和statu bar的高度。可是這時，若是想讓view的尺寸全屏又該如何呢。這時只要設置：

self.extendedLayoutIncludesOpaqueBars = YES;

這個屬性的英文自己解釋得很到位了，就很少說了。

2不帶有nav bar：

這時statu bar不管如何都是佔據掉20的高度，因此subview的佈局須要計算在內。

此外，UIViewController還添加了automaticallyAdjustsScrollViewInsets, topLayoutGuide/bottomLayputGuide等屬性。有須要的能夠自行測試

Using Tine Color

ios6，bar的tintcolor使用tintColor；ios7則要使用barTintColor（ios7裏bar的tintcolor用於設置BarButtonitem）。對於支持多個iOS的App，須要區分。此外，UIView新添加了tintColor的屬性。若是給window設置tintcolor：

self.window.tintColor = [UIColor redColor];

那麼，nav bar上的按鈕顏色會變成紅色。若是view沒有設置這個屬性（一般爲nil），那麼默認使用父view的tintColor。對於頂層的window，tintColor是由系統定義的。須要提醒的是不能經過appearence的方式來設置tintColor。

Using Fonts

聽說使用Dynamic Type後，能夠

• 系統會自動徵對字體大小來調整字符間距和行高
• 能夠設置帶有語義的文本，好比制訂headline，body，footer等
• 用戶在Settings裏修改大小，那麼文字會實時動態的響應

在iOS7中，用戶能夠設置字體大小到本身認爲合適的地方。若是程序想響應這種變化的話：

1. 使用preferredFontForTextStyle:來生成字體
2. 響應UIContentSizeCategoryDidChangeNotification Notification

Using Gesture Recognizers

ios7新添了在runtime的時候，指定動做失敗的delegate。Apple舉例說明：系統自己有從下向上顯示控制中心的功能，那麼在App裏若是view也添加了這樣的手勢操做，那麼能夠在delegate裏動態設置爲nil從而先響應系統的。

 

Apple文檔中剩下的部分，詳細闡述了一些控件，control，和view的變化，文檔裏附有詳細的異同比較並有圖例。這裏就再也不一一贅述了。

我我的從中學到的：

1. nav bar帶背景要慎重處理，自定義的bar button item須要多試幾回，須要圖片的要好好設計
2. statu bar和view的全屏的處理
3. 要用ib的話，就用storeboard
4. 使用Auto Layout

2013-09-13