
前言
工作中,領(lǐng)導想看看沒有真機情況下,模擬器對應(yīng)的UI層級關(guān)系,每層的顯示情況?位置前后?怎么辦?
簡介
DebugViewHierarchy(視圖調(diào)試)是XCode6新出的一項功能,它可以讓開發(fā)者在程序運行時,動態(tài)的查看當前界面的顯示情況,包括視圖的層次,控件的大小和位置,而且會以3D效果顯示當前視圖的層次。下面就一起來看一下如何進行視圖調(diào)試吧。

我把圖中分為
5個區(qū)域分別作出講解,如圖1所示:
①區(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所示:

-
步驟:
運行demo
【command+R】調(diào)試窗口的
DebugViewHierarchy按鈕拖動鼠標,可以切換不同的3D視角。-
3D效果圖:
- 在左側(cè)的調(diào)試導航欄中,選擇
View UI Hierarchy,可以看到整個界面的視圖層次列表: - 左側(cè)
代碼看右側(cè)UI - 右側(cè)
UI看左側(cè)代碼
- 在左側(cè)的調(diào)試導航欄中,選擇
3D視圖的下面還有一排操作的按鈕和進度條,可以調(diào)節(jié)3D視圖的
大小,顯示層次,間隔等,如圖4所示
圖4.3D縮放藏顯 注意:
這里使用的時模擬器,因為只有在
模擬器的情況下才能使用DebugViewHierarchy功能。有關(guān)demo
界面邏輯分析,如圖6所示若下載的
demo出現(xiàn)lldb崩潰情況,請點擊強制運行按鈕如圖5所示


總結(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
