視圖調(diào)試是蘋果在Xcode 6中做了不少的優(yōu)化之一。
通常，App用戶界面的行為不會符合開發(fā)者期望的那樣，比如或者不展示視圖，或者沒有正確地展示。
下面介紹用Xcode的視圖調(diào)試功能來簡化開發(fā)者對問題界面的確認(rèn)和修復(fù)。
Demo 工程
開始之初先從github（https://github.com/tutsplus/ViewDebugging） 上下載示例工程并打開ViewDebugging.xcodeproj。該工程包含一個簡單的包含少數(shù)視圖控制器的可點擊的應(yīng)用程序、應(yīng)用程序委托以及一個storyboard。該app是為iPhone而設(shè)計，但受益于iOS 8的自適應(yīng)布局,所以界面展示在任何設(shè)備上都沒有問題。
您剛剛下載的應(yīng)用程序示例工程是一個簡單的to-do list應(yīng)用程序，包含可查看其他信息的簡單屏幕，比如該示例工程中的項目數(shù)，用戶頭像以及@***的推特操作。點擊Xcode左上角的運行按鈕將展示在iOS模擬器中運行的應(yīng)用程序。
很快會注意到用戶界面中存在問題-表視圖中沒有展示任何數(shù)據(jù)。在工程導(dǎo)航面板中打開FirstViewController.swift并找到以下代碼：
var mockNotesDataSource: [String] = ["Do some laundry", "Finish homework", "Walk the dog", "Learn about view debugging"]
{
didSet
{
self.tableView.reloadData()
}
}
可以看到mockNotesDataSource變量是表視圖的數(shù)據(jù)源。使用Swift的屬性觀察者功能，在數(shù)據(jù)源發(fā)生改變時，表視圖會自動重新加載。通過查看以上代碼片段，你會發(fā)現(xiàn)應(yīng)該應(yīng)用中應(yīng)該有4個項目需要展示，但現(xiàn)在不展示數(shù)據(jù)就說明某些地方出現(xiàn)了差錯。
啟用視圖調(diào)試
問題似乎與用戶界面有關(guān)。運行app過程中，按下底部的Debug View Hierarchy 按鈕，或者從菜單中選擇Debug > View Debugging > Capture View Hierarchy 來啟動視圖調(diào)試。
啟動視圖調(diào)試后，Xcode會對應(yīng)用程序的視圖層次拍一個快照并展示三維原型視圖來探究用戶界面的層級。該三維視圖除了展示app的視圖層次外，還展示每個視圖的位置、順序和視圖尺寸，以及視圖間的交互方式。
示例工程在Xcode中的三維視圖展示正常，但表視圖單元格似乎有點太寬了。
暫停應(yīng)用程序調(diào)試并在左側(cè)選中Main.Storyboard來修復(fù)問題。點擊表視圖并選中Editor > Resolve Auto Layout Issues > Reset to Suggested Constraints.
編譯并再次運行應(yīng)用程序以確定用戶界面展示正常。點擊Debug View Hierarchy按鈕更進一步了解視圖調(diào)試的功能。
視圖調(diào)試功能
點擊并拖拽三維渲染圖的任意一邊，可旋轉(zhuǎn)或者傾斜用戶界面，向左或者向右傾斜可選中某個表視圖。
選中后，Xcode會高亮該視圖，并在會在右邊展示Object 和Size檢查器。查看在跳轉(zhuǎn)欄頂部并確認(rèn)UITableView是右邊最后一個項目。
Object 和 Size檢查器包括大量有用的信息。過去開發(fā)者需要依賴日志語句或者斷點來檢查視圖的配置。
打開右邊的Size inspector（規(guī)格檢查器），下方是Auto Layout，可以看到視圖上已經(jīng)應(yīng)用了正確的約束。在Object inspector中，我們可以檢查所選視圖的屬性。
在Xcode的調(diào)試區(qū)有9個視圖調(diào)試過程中要用到的按鈕和滑塊兒。
從左到右控件排序：
調(diào)整視圖間距：調(diào)整不同視圖間的間距。
展示被剪切的內(nèi)容：當(dāng)前展示視圖中被剪切的部分。
展示約束：展示選中視圖的約束。
重置查看區(qū)域：將3D渲染透視圖恢復(fù)至默認(rèn)狀態(tài)。
調(diào)整查看模式：選擇性地展示3D渲染透視圖，比如僅展示內(nèi)容，僅展示框架以及同時展示內(nèi)容和框架。
縮小：縮小3D渲染透視圖
恢復(fù)：將3D渲染透視圖恢復(fù)至默認(rèn)尺寸。
放大：放大3D渲染透視圖
調(diào)整可視視圖范圍：隱藏視圖或展示視圖，一步步解析3D渲染視圖，向左或者向右滑動滑塊兒有相反的效果。
建議花一點時間上手操作下這些空間，并理解各自的用處
視圖層排序
再次編譯和運行應(yīng)用程序，并點擊用戶界面底部的"More"標(biāo)簽。第一眼看去界面看起來還OK，但是它沒有按照開發(fā)者的定義準(zhǔn)確執(zhí)行，圖片上的模糊效果沒有展示出來。我們可以通過調(diào)試視圖層次來更好地確定問題所在。
向左或者向右拖拽視圖來查看具體情況，接著將view spacing slider向右拖動。
這樣一來，不同視圖間的間距變大了，層次也更加清晰，我們看到在圖片"下方"還隱藏著另一個視圖，選中隱藏的視圖，它就是"丟失"的視覺效果視圖。
打開Main.storyboard 并選中Second View Controller Scene。在左側(cè)的文檔概覽面板中，展開Second View Controller的視圖對象以查看子視圖的排序。
Xcode在文檔概覽中按照遞升順序堆疊視圖，換句話說，列表頂層的視圖是視圖層次的基礎(chǔ)。
修復(fù)問題很簡單。運行時，Blur Effect View隱藏在Sky Image之下，因為它是視圖層次的第一個視圖。在文檔概覽中點擊并拖拽 Blur Effect View，結(jié)果會如下圖展示一樣：
再次運行應(yīng)用程序就能看到模糊效果了。應(yīng)用程序的用戶界面看起來符合設(shè)計的初衷。我們還可以查看iOS模擬器的其他調(diào)試功能，看看還完善了其他什么地方或功能。
iOS模擬器調(diào)試功能
編譯并運行應(yīng)用程序，選中模擬器，從 Debug菜單中選擇Color Blended Layers選項。
然后會看到app的用戶界面被紅色和綠色覆蓋，顯示了哪些圖層可以被疊加覆蓋，以及哪些圖層是透明的?；旌蠈訉儆谟嬎忝芗鸵晥D，所以推薦盡可能地使用不透明的圖層。
蘋果在其文檔（iOS Simulator User Guide）中對此進行了注明，并在表視圖處理上使用了不透明圖層。滾動視圖時會有些表現(xiàn)不大好的地方，一個重要的原因就是使用了混合圖層，而如果內(nèi)容背景是不透明層，那么頁面滾動效果就會非常流暢和平穩(wěn)。
對于這款應(yīng)用程序來說，假使用戶有數(shù)百個項目要展示，可能會出現(xiàn)滾動性能不一致的情況。表視圖單元格當(dāng)前使用的是混合層。由于視圖控制器的視圖背景是白色，所以不管表視圖單元格使用的是混合層或者不透明層，終端用戶不會覺察到有什么不一樣。
打開Main.storyboard并選中To Do list Scene中的表視圖單元格屬性。在屬性檢查器（Attributes Inspector）中，向下滾動Drawing分區(qū)并勾選Opaque。
在啟用Color Blended Layers的狀態(tài)下編譯并運行應(yīng)用程序。由于表視圖單元格現(xiàn)在使用了不透明層，所以會用綠色覆蓋，以指示它們是不透明的。
除了標(biāo)記圖層外，還有其他一些有用的功能可幫開發(fā)者在iOS模擬器中調(diào)試應(yīng)用。以下是其中一些比較有用的：
Toggle Slow Animations in Frontmost App: 選中模擬器，打開Debug菜單選中Toggle Slow Animations in Frontmost App，該功能可以降低app中動畫的運行速度，適合調(diào)試包含復(fù)雜動畫的應(yīng)用程序。也可是使用快捷鍵Command-T來操作。
Color Copied Images:該選項可以給繪制時被Core Animation復(fù)制的圖片添加藍(lán)綠色疊加層。
Color Misaligned Images:如果圖片邊界沒有與目標(biāo)像素完美對齊，該功能可為圖片疊加上一層品紅色。如果圖片使用確定的比例大小繪制，那么該功能會為圖片添加一層黃色疊加。
Color Off Screen Rendered:.該選項為離屏渲染內(nèi)容添加一個黃色的疊加層。
很多開發(fā)者會忽略接入電話時應(yīng)用狀態(tài)欄的設(shè)計問題，你可以通過觸發(fā)通話中狀態(tài)欄來簡單測試。在iOS模擬器中，從Hardware菜單中選中Toggle In-Call Status Bar。
想查看app如何響應(yīng)事件，可按下Command-T來啟用slow animations，并按下Command-Y來展示電話接入時的狀態(tài)欄。倘若你的應(yīng)用程序使用了導(dǎo)航欄，那么操作系統(tǒng)會為你兼顧到這一塊兒。
除了給視圖著色外，還要記住iOS模擬器也可以調(diào)試Core Location問題。你可以在特定經(jīng)緯度模擬設(shè)備，
如果你的應(yīng)用程序使用iCloud來管理數(shù)據(jù)，你也可以手動觸發(fā)同步事件。
總結(jié)
本文中使用的demo app非常簡單，使用文中提到的技術(shù)可以幫你在未來節(jié)省不少時間。視圖調(diào)試可以幫你修正很多用戶界面中出現(xiàn)的問題。
除了Xcode和InterfaceBuilder之外，使用iOS模擬器的調(diào)試功能可以提升應(yīng)用性能和識別開發(fā)過程中的瓶頸。蘋果的人機交互指南（中文版 英文版）強調(diào)了積極響應(yīng)對app的重要性，能讓用戶覺得應(yīng)用易于使用和操作。蘋果對InterfaceBuilder的提升讓視圖調(diào)試變得前所未有的簡單。
