蘋(píng)果在Xcode 6中做了不少明顯的改善和優(yōu)化，視圖調(diào)試就是其中之一。通常，App用戶(hù)界面的行為不會(huì)符合開(kāi)發(fā)者期望的那樣，比如或者不展示視圖，或者沒(méi)有正確地展示。本文講解如何使用Xcode的新的視圖調(diào)試功能來(lái)簡(jiǎn)化開(kāi)發(fā)者對(duì)問(wèn)題界面的確認(rèn)和修復(fù)。

1.Demo 工程

開(kāi)始之初先從github（https://github.com/tutsplus/ViewDebugging）上下載示例工程并打開(kāi)ViewDebugging.xcodeproj。該工程包含一個(gè)簡(jiǎn)單的包含少數(shù)視圖控制器的可點(diǎn)擊的應(yīng)用程序、應(yīng)用程序委托以及一個(gè)storyboard。該app是為iPhone而設(shè)計(jì)，但受益于iOS 8的自適應(yīng)布局,所以界面展示在任何設(shè)備上都沒(méi)有問(wèn)題。

您剛剛下載的應(yīng)用程序示例工程是一個(gè)簡(jiǎn)單的to-do list應(yīng)用程序，包含可查看其他信息的簡(jiǎn)單屏幕，比如該示例工程中的項(xiàng)目數(shù)，用戶(hù)頭像以及@***的推特操作。點(diǎn)擊Xcode左上角的運(yùn)行按鈕將展示在iOS模擬器中運(yùn)行的應(yīng)用程序。

很快會(huì)注意到用戶(hù)界面中存在問(wèn)題-表視圖中沒(méi)有展示任何數(shù)據(jù)。在工程導(dǎo)航面板中打開(kāi)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的屬性觀(guān)察者功能，在數(shù)據(jù)源發(fā)生改變時(shí)，表視圖會(huì)自動(dòng)重新加載。通過(guò)查看以上代碼片段，你會(huì)發(fā)現(xiàn)應(yīng)該應(yīng)用中應(yīng)該有4個(gè)項(xiàng)目需要展示，但現(xiàn)在不展示數(shù)據(jù)就說(shuō)明某些地方出現(xiàn)了差錯(cuò)。

啟用視圖調(diào)試

問(wèn)題似乎與用戶(hù)界面有關(guān)。運(yùn)行app過(guò)程中，按下底部的Debug View Hierarchy 按鈕，或者從菜單中選擇Debug > View Debugging > Capture View Hierarchy 來(lái)啟動(dòng)視圖調(diào)試。

啟動(dòng)視圖調(diào)試后，Xcode會(huì)對(duì)應(yīng)用程序的視圖層次拍一個(gè)快照并展示三維原型視圖來(lái)探究用戶(hù)界面的層級(jí)。該三維視圖除了展示app的視圖層次外，還展示每個(gè)視圖的位置、順序和視圖尺寸，以及視圖間的交互方式。

示例工程在Xcode中的三維視圖展示正常，但表視圖單元格似乎有點(diǎn)太寬了。

暫停應(yīng)用程序調(diào)試并在左側(cè)選中Main.Storyboard來(lái)修復(fù)問(wèn)題。點(diǎn)擊表視圖并選中Editor > Resolve Auto Layout Issues > Reset to Suggested Constraints.

編譯并再次運(yùn)行應(yīng)用程序以確定用戶(hù)界面展示正常。點(diǎn)擊Debug View Hierarchy按鈕更進(jìn)一步了解視圖調(diào)試的功能。

視圖調(diào)試功能

點(diǎn)擊并拖拽三維渲染圖的任意一邊，可旋轉(zhuǎn)或者傾斜用戶(hù)界面，向左或者向右傾斜可選中某個(gè)表視圖。

選中后，Xcode會(huì)高亮該視圖，并在會(huì)在右邊展示Object 和Size檢查器。查看在跳轉(zhuǎn)欄頂部并確認(rèn)UITableView是右邊最后一個(gè)項(xiàng)目。

Object 和 Size檢查器包括大量有用的信息。過(guò)去開(kāi)發(fā)者需要依賴(lài)日志語(yǔ)句或者斷點(diǎn)來(lái)檢查視圖的配置。

打開(kāi)右邊的Size inspector（規(guī)格檢查器），下方是Auto Layout，可以看到視圖上已經(jīng)應(yīng)用了正確的約束。在Object inspector中，我們可以檢查所選視圖的屬性。

在Xcode的調(diào)試區(qū)有9個(gè)視圖調(diào)試過(guò)程中要用到的按鈕和滑塊兒。

從左到右控件排序：

調(diào)整視圖間距：調(diào)整不同視圖間的間距。

展示被剪切的內(nèi)容：當(dāng)前展示視圖中被剪切的部分。

展示約束：展示選中視圖的約束。

重置查看區(qū)域：將3D渲染透視圖恢復(fù)至默認(rèn)狀態(tài)。

調(diào)整查看模式：選擇性地展示3D渲染透視圖，比如僅展示內(nèi)容，僅展示框架以及同時(shí)展示內(nèi)容和框架。

縮?。嚎s小3D渲染透視圖

恢復(fù)：將3D渲染透視圖恢復(fù)至默認(rèn)尺寸。

放大：放大3D渲染透視圖

調(diào)整可視視圖范圍：隱藏視圖或展示視圖，一步步解析3D渲染視圖，向左或者向右滑動(dòng)滑塊兒有相反的效果。

建議花一點(diǎn)時(shí)間上手操作下這些空間，并理解各自的用處。

視圖層排序

再次編譯和運(yùn)行應(yīng)用程序，并點(diǎn)擊用戶(hù)界面底部的"More"標(biāo)簽。第一眼看去界面看起來(lái)還OK，但是它沒(méi)有按照開(kāi)發(fā)者的定義準(zhǔn)確執(zhí)行，圖片上的模糊效果沒(méi)有展示出來(lái)。我們可以通過(guò)調(diào)試視圖層次來(lái)更好地確定問(wèn)題所在。

向左或者向右拖拽視圖來(lái)查看具體情況，接著將view spacing slider向右拖動(dòng)。

這樣一來(lái)，不同視圖間的間距變大了，層次也更加清晰，我們看到在圖片"下方"還隱藏著另一個(gè)視圖，選中隱藏的視圖，它就是"丟失"的視覺(jué)效果視圖。

打開(kāi)Main.storyboard 并選中Second View Controller Scene。在左側(cè)的文檔概覽面板中，展開(kāi)Second View Controller的視圖對(duì)象以查看子視圖的排序。

Xcode在文檔概覽中按照遞升順序堆疊視圖，換句話(huà)說(shuō)，列表頂層的視圖是視圖層次的基礎(chǔ)。

修復(fù)問(wèn)題很簡(jiǎn)單。運(yùn)行時(shí)，Blur Effect View隱藏在Sky Image之下，因?yàn)樗且晥D層次的第一個(gè)視圖。在文檔概覽中點(diǎn)擊并拖拽 Blur Effect View，結(jié)果會(huì)如下圖展示一樣：

再次運(yùn)行應(yīng)用程序就能看到模糊效果了。應(yīng)用程序的用戶(hù)界面看起來(lái)符合設(shè)計(jì)的初衷。我們還可以查看iOS模擬器的其他調(diào)試功能，看看還完善了其他什么地方或功能。

5.iOS模擬器調(diào)試功能

編譯并運(yùn)行應(yīng)用程序，選中模擬器，從 Debug菜單中選擇Color Blended Layers選項(xiàng)。

然后會(huì)看到app的用戶(hù)界面被紅色和綠色覆蓋，顯示了哪些圖層可以被疊加覆蓋，以及哪些圖層是透明的?；旌蠈訉儆谟?jì)算密集型視圖，所以推薦盡可能地使用不透明的圖層。

蘋(píng)果在其文檔（iOS Simulator User Guide）中對(duì)此進(jìn)行了注明，并在表視圖處理上使用了不透明圖層。滾動(dòng)視圖時(shí)會(huì)有些表現(xiàn)不大好的地方，一個(gè)重要的原因就是使用了混合圖層，而如果內(nèi)容背景是不透明層，那么頁(yè)面滾動(dòng)效果就會(huì)非常流暢和平穩(wěn)。

對(duì)于這款應(yīng)用程序來(lái)說(shuō)，假使用戶(hù)有數(shù)百個(gè)項(xiàng)目要展示，可能會(huì)出現(xiàn)滾動(dòng)性能不一致的情況。表視圖單元格當(dāng)前使用的是混合層。由于視圖控制器的視圖背景是白色，所以不管表視圖單元格使用的是混合層或者不透明層，終端用戶(hù)不會(huì)覺(jué)察到有什么不一樣。

打開(kāi)Main.storyboard并選中To Do list Scene中的表視圖單元格屬性。在屬性檢查器（Attributes Inspector）中，向下滾動(dòng)Drawing分區(qū)并勾選Opaque。

在啟用Color Blended Layers的狀態(tài)下編譯并運(yùn)行應(yīng)用程序。由于表視圖單元格現(xiàn)在使用了不透明層，所以會(huì)用綠色覆蓋，以指示它們是不透明的。

除了標(biāo)記圖層外，還有其他一些有用的功能可幫開(kāi)發(fā)者在iOS模擬器中調(diào)試應(yīng)用。以下是其中一些比較有用的：

• Toggle Slow Animations in Frontmost App: 選中模擬器，打開(kāi)Debug菜單選中Toggle Slow Animations in Frontmost App，該功能可以降低app中動(dòng)畫(huà)的運(yùn)行速度，適合調(diào)試包含復(fù)雜動(dòng)畫(huà)的應(yīng)用程序。也可是使用快捷鍵Command-T來(lái)操作。

• Color Copied Images:該選項(xiàng)可以給繪制時(shí)被Core Animation復(fù)制的圖片添加藍(lán)綠色疊加層。

• Color Misaligned Images:如果圖片邊界沒(méi)有與目標(biāo)像素完美對(duì)齊，該功能可為圖片疊加上一層品紅色。如果圖片使用確定的比例大小繪制，那么該功能會(huì)為圖片添加一層黃色疊加。

• Color Off Screen Rendered:.該選項(xiàng)為離屏渲染內(nèi)容添加一個(gè)黃色的疊加層。

很多開(kāi)發(fā)者會(huì)忽略接入電話(huà)時(shí)應(yīng)用狀態(tài)欄的設(shè)計(jì)問(wèn)題，你可以通過(guò)觸發(fā)通話(huà)中狀態(tài)欄來(lái)簡(jiǎn)單測(cè)試。在iOS模擬器中，從Hardware菜單中選中Toggle In-Call Status Bar。

想查看app如何響應(yīng)事件，可按下Command-T來(lái)啟用slow animations，并按下Command-Y來(lái)展示電話(huà)接入時(shí)的狀態(tài)欄。倘若你的應(yīng)用程序使用了導(dǎo)航欄，那么操作系統(tǒng)會(huì)為你兼顧到這一塊兒。

除了給視圖著色外，還要記住iOS模擬器也可以調(diào)試Core Location問(wèn)題。你可以在特定經(jīng)緯度模擬設(shè)備，

如果你的應(yīng)用程序使用iCloud來(lái)管理數(shù)據(jù)，你也可以手動(dòng)觸發(fā)同步事件。

總結(jié)

本文中使用的demo app非常簡(jiǎn)單，使用文中提到的技術(shù)可以幫你在未來(lái)節(jié)省不少時(shí)間。視圖調(diào)試可以幫你修正很多用戶(hù)界面中出現(xiàn)的問(wèn)題。

除了Xcode和InterfaceBuilder之外，使用iOS模擬器的調(diào)試功能可以提升應(yīng)用性能和識(shí)別開(kāi)發(fā)過(guò)程中的瓶頸。蘋(píng)果的人機(jī)交互指南（中文版 英文版）強(qiáng)調(diào)了積極響應(yīng)對(duì)app的重要性，能讓用戶(hù)覺(jué)得應(yīng)用易于使用和操作。蘋(píng)果對(duì)InterfaceBuilder的提升讓視圖調(diào)試變得前所未有的簡(jiǎn)單。
（本文由CocoaChina翻譯自tutsplus，原文：View Debugging in Xcode 6）