Xcode 6檢視除錯小貼士

發表於2014-12-26

蘋果在Xcode 6中做了不少明顯的改善和優化,檢視除錯就是其中之一。通常,App使用者介面的行為不會符合開發者期望的那樣,比如或者不展示檢視,或者沒有正確地展示。本文講解如何使用Xcode的新的檢視除錯功能來簡化開發者對問題介面的確認和修復。

1.Demo 工程

開始之初先從github(https://github.com/tutsplus/ViewDebugging)上下載示例工程並開啟ViewDebugging.xcodeproj。該工程包含一個簡單的包含少數檢視控制器的可點選的應用程式、應用程式委託以及一個storyboard。該app是為iPhone而設計,但受益於iOS 8的自適應佈局,所以介面展示在任何裝置上都沒有問題。

您剛剛下載的應用程式示例工程是一個簡單的to-do list應用程式,包含可檢視其他資訊的簡單螢幕,比如該示例工程中的專案數,使用者頭像以及@***的推特操作。點選Xcode左上角的執行按鈕將展示在iOS模擬器中執行的應用程式。

很快會注意到使用者介面中存在問題-表檢視中沒有展示任何資料。在工程導航皮膚中開啟FirstViewController.swift並找到以下程式碼:

可以看到mockNotesDataSource變數是表檢視的資料來源。使用Swift的屬性觀察者功能,在資料來源發生改變時,表檢視會自動重新載入。通過檢視以上程式碼片段,你會發現應該應用中應該有4個專案需要展示,但現在不展示資料就說明某些地方出現了差錯。

啟用檢視除錯

問題似乎與使用者介面有關。執行app過程中,按下底部的Debug View Hierarchy 按鈕,或者從選單中選擇Debug > View Debugging > Capture View Hierarchy 來啟動檢視除錯。

啟動檢視除錯後,Xcode會對應用程式的檢視層次拍一個快照並展示三維原型檢視來探究使用者介面的層級。該三維檢視除了展示app的檢視層次外,還展示每個檢視的位置、順序和檢視尺寸,以及檢視間的互動方式。

示例工程在Xcode中的三維檢視展示正常,但表檢視單元格似乎有點太寬了。

暫停應用程式除錯並在左側選中Main.Storyboard來修復問題。點選表檢視並選中Editor > Resolve Auto Layout Issues > Reset to Suggested Constraints.

編譯並再次執行應用程式以確定使用者介面展示正常。點選Debug View Hierarchy按鈕更進一步瞭解檢視除錯的功能。

檢視除錯功能

點選並拖拽三維渲染圖的任意一邊,可旋轉或者傾斜使用者介面,向左或者向右傾斜可選中某個表檢視。

選中後,Xcode會高亮該檢視,並在會在右邊展示Object 和Size檢查器。檢視在跳轉欄頂部並確認UITableView是右邊最後一個專案。

Object 和 Size檢查器包括大量有用的資訊。過去開發者需要依賴日誌語句或者斷點來檢查檢視的配置。

開啟右邊的Size inspector(規格檢查器),下方是Auto Layout,可以看到檢視上已經應用了正確的約束。在Object inspector中,我們可以檢查所選檢視的屬性。

在Xcode的除錯區有9個檢視除錯過程中要用到的按鈕和滑塊兒。

從左到右控制元件排序:

調整檢視間距:調整不同檢視間的間距。

展示被剪下的內容:當前展示檢視中被剪下的部分。

展示約束:展示選中檢視的約束。

重置檢視區域:將3D渲染透檢視恢復至預設狀態。

調整檢視模式:選擇性地展示3D渲染透檢視,比如僅展示內容,僅展示框架以及同時展示內容和框架。

縮小:縮小3D渲染透檢視

恢復:將3D渲染透檢視恢復至預設尺寸。

放大:放大3D渲染透檢視

調整可視檢視範圍:隱藏檢視或展示檢視,一步步解析3D渲染檢視,向左或者向右滑動滑塊兒有相反的效果。

建議花一點時間上手操作下這些空間,並理解各自的用處。

檢視層排序

再次編譯和執行應用程式,並點選使用者介面底部的”More”標籤。第一眼看去介面看起來還OK,但是它沒有按照開發者的定義準確執行,圖片上的模糊效果沒有展示出來。我們可以通過除錯檢視層次來更好地確定問題所在。

向左或者向右拖拽檢視來檢視具體情況,接著將view spacing slider向右拖動。

這樣一來,不同檢視間的間距變大了,層次也更加清晰,我們看到在圖片”下方”還隱藏著另一個檢視,選中隱藏的檢視,它就是”丟失”的視覺效果檢視。

開啟Main.storyboard 並選中Second View Controller Scene。在左側的文件概覽皮膚中,展開Second View Controller的檢視物件以檢視子檢視的排序。

Xcode在文件概覽中按照遞升順序堆疊檢視,換句話說,列表頂層的檢視是檢視層次的基礎。

修復問題很簡單。執行時,Blur Effect View隱藏在Sky Image之下,因為它是檢視層次的第一個檢視。在文件概覽中點選並拖拽 Blur Effect View,結果會如下圖展示一樣:

再次執行應用程式就能看到模糊效果了。應用程式的使用者介面看起來符合設計的初衷。我們還可以檢視iOS模擬器的其他除錯功能,看看還完善了其他什麼地方或功能。

5.iOS模擬器除錯功能

編譯並執行應用程式,選中模擬器,從 Debug選單中選擇Color Blended Layers選項。

然後會看到app的使用者介面被紅色和綠色覆蓋,顯示了哪些圖層可以被疊加覆蓋,以及哪些圖層是透明的。混合層屬於計算密集型檢視,所以推薦儘可能地使用不透明的圖層。

蘋果在其文件(iOS Simulator User Guide)中對此進行了註明,並在表檢視處理上使用了不透明圖層。滾動檢視時會有些表現不大好的地方,一個重要的原因就是使用了混合圖層,而如果內容背景是不透明層,那麼頁面滾動效果就會非常流暢和平穩。

對於這款應用程式來說,假使使用者有數百個專案要展示,可能會出現滾動效能不一致的情況。表檢視單元格當前使用的是混合層。由於檢視控制器的檢視背景是白色,所以不管表檢視單元格使用的是混合層或者不透明層,終端使用者不會覺察到有什麼不一樣。

開啟Main.storyboard並選中To Do list Scene中的表檢視單元格屬性。在屬性檢查器(Attributes Inspector)中,向下滾動Drawing分割槽並勾選Opaque

蘋果在其文件(iOS Simulator User Guide)中對此進行了註明,並在表檢視處理上使用了不透明圖層。滾動檢視時會有些表現不大好的地方,一個重要的原因就是使用了混合圖層,而如果內容背景是不透明層,那麼頁面滾動效果就會非常流暢和平穩。

對於這款應用程式來說,假使使用者有數百個專案要展示,可能會出現滾動效能不一致的情況。表檢視單元格當前使用的是混合層。由於檢視控制器的檢視背景是白色,所以不管表檢視單元格使用的是混合層或者不透明層,終端使用者不會覺察到有什麼不一樣。

開啟Main.storyboard並選中To Do list Scene中的表檢視單元格屬性。在屬性檢查器(Attributes Inspector)中,向下滾動Drawing分割槽並勾選Opaque

除了給檢視著色外,還要記住iOS模擬器也可以除錯Core Location問題。你可以在特定經緯度模擬裝置,

如果你的應用程式使用iCloud來管理資料,你也可以手動觸發同步事件。

總結

本文中使用的demo app非常簡單,使用文中提到的技術可以幫你在未來節省不少時間。檢視除錯可以幫你修正很多使用者介面中出現的問題。

除了Xcode和InterfaceBuilder之外,使用iOS模擬器的除錯功能可以提升應用效能和識別開發過程中的瓶頸。蘋果的人機互動指南(中文版 英文版)強調了積極響應對app的重要性,能讓使用者覺得應用易於使用和操作。蘋果對InterfaceBuilder的提升讓檢視除錯變得前所未有的簡單。

相關文章