前言

工作中，領(lǐng)導想看看沒有真機情況下,模擬器對應(yīng)的UI層級關(guān)系,每層的顯示情況？位置前后？怎么辦？

簡介

DebugViewHierarchy（視圖調(diào)試)是XCode6新出的一項功能，它可以讓開發(fā)者在程序運行時，動態(tài)的查看當前界面的顯示情況，包括視圖的層次，控件的大小和位置，而且會以3D效果顯示當前視圖的層次。下面就一起來看一下如何進行視圖調(diào)試吧。

圖1.視圖調(diào)試各按鈕功能

①區(qū)域. 
 第一個區(qū)域左右滑動可以調(diào)整視圖層級之間的距離

②區(qū)域. 
  第二個區(qū)域的三個按鈕分別是現(xiàn)實省略隱藏的內(nèi)容、顯示依賴關(guān)系、第三個里邊有三個選項分別是顯示視圖里邊內(nèi)容、顯示視圖的線框輪廓、以及顯示視圖的線框輪廓和視圖中內(nèi)容。

③區(qū)域.  
  第三個區(qū)域是顯示視圖層級的大小

④區(qū)域.    
第四個區(qū)域或者拖動視圖，可以隨意旋轉(zhuǎn)

⑤區(qū)域.  
第五個區(qū)域是視圖2D視角和3D視角的相互切換，上圖是3D模式視角的顯示。

⑥區(qū)域
視圖局部顯示+隱藏

案例講解

為了簡單起見，這里我使用代碼建立一個工程demo下載，運行如圖2所示：

圖2.動態(tài)操作效果圖

• 步驟：

  • 運行demo 【command+R】

  • 調(diào)試窗口的DebugViewHierarchy按鈕

  • 拖動鼠標，可以切換不同的3D視角。

  • 3D效果圖：

    • 在左側(cè)的調(diào)試導航欄中，選擇View UI Hierarchy，可以看到整個界面的視圖層次列表：
    • 左側(cè)代碼看右側(cè)UI
    • 右側(cè)UI看左側(cè)代碼

  • 3D視圖的下面還有一排操作的按鈕和進度條，可以調(diào)節(jié)3D視圖的大小，顯示層次，間隔等,如圖4所示

  圖4.3D縮放藏顯

• 注意：

• 這里使用的時模擬器，因為只有在模擬器 的情況下才能使用DebugViewHierarchy功能。

• 有關(guān)demo界面邏輯分析，如圖6所示

• 若下載的demo出現(xiàn)lldb崩潰情況，請點擊強制運行按鈕如圖5所示

圖5.強制運行+視圖調(diào)試

圖6.邏輯層次展示

總結(jié)

有了DebugViewHierarchy功能，我們就可以很直觀地``檢驗我的UI布局，查看各個視圖的屬性，確實能夠帶來很大的方便性。 其實，iOS6出來之前，就已經(jīng)出現(xiàn)了許多第三方的界面調(diào)試工具，例如大名鼎鼎的Reveal`，它不但可以查看UI布局，還可以實時修改，這樣就不用每次都重新編譯運行，但它是收費的（可以免費使用30天），59美元對我等剛?cè)胄械拇a農(nóng)來說確實有點貴。不過對于一般的界面調(diào)試，使用XCode自帶的DebugViewHierarchy已經(jīng)足夠了，使用mbp重新編譯運行也不會太慢。

參考鏈接

XCode中的Debug View Hierarchy功能
芒果iOS開發(fā)bug調(diào)試技巧之Debug View Hierarchy