前言
2016年左右，設(shè)計同學(xué)對UI要求比較高，經(jīng)常要因為幾個像素調(diào)半天，Xcode的視圖層次工具不是那么好用，也沒有Lookin這樣的工具可用。最重要的是溝通UI的時候通常是單獨(dú)拿著手機(jī)在設(shè)計同學(xué)或測試同學(xué)身邊溝通，需要脫離Mac。為此產(chǎn)生自己在手機(jī)上繪制一下視圖層次結(jié)構(gòu)的想法。
設(shè)計
設(shè)計需求
- 脫離Mac，只在iPhone上使用。
- 可以查看視圖層次結(jié)構(gòu)。
- 簡單預(yù)覽視圖信息，如類名、坐標(biāo)、文本、圖片等基本屬性。
- 預(yù)設(shè)一些無需顯示的類型。
- 顯示高級信息，如選定2個視圖的距離，可磁吸到像素的測距尺。
思考方案
- 作為sdk引入app使用，可充分獲取app內(nèi)視圖信息。
- 獲取視圖的屏幕坐標(biāo)，將視圖進(jìn)行截圖作為預(yù)覽，用于展示視圖層次結(jié)構(gòu)。
- 類名、坐標(biāo)、文本可以直接獲取，圖片可通過替換“imageNamed:”、“initWithContentsOfFile:”等方法獲取圖片名。如果使用SDWebImage加載網(wǎng)絡(luò)圖片，還可以使用sd_imageURL作為圖片url。
- 無需顯示的類型分兩種，一種是本身無需關(guān)注，但子視圖需要關(guān)注，如“UINavigationTransitionView”，另一種是本身和子視圖都無需關(guān)注，如“_UITextContainerView”
- 不想一個工具太過復(fù)雜，更多高級信息還是作為另一個工具處理。
- 視圖+信息可能會太擁擠，因此需要放大、縮小、拖動操作，再加個圈中后按列表顯示的方式。
設(shè)計用法
- 啟動功能則創(chuàng)建Debug窗口，默認(rèn)讀取所有非Debug的Window信息。
- 默認(rèn)全屏預(yù)覽，通過斜切、拖動、縮放查看相關(guān)視圖。
- 切換選擇狀態(tài)，分屏展示，上半部展示整體預(yù)覽圖，可以進(jìn)行選擇。下半部以列表的方式展示選中視圖的信息。
- 為了避免屏幕信息密集，因此可切換信息顯示的多寡。
- 有時需要隱藏的業(yè)務(wù)視圖信息，因此可切換是否展示隱藏視圖。
- 屏幕視圖太多，可調(diào)整顯示層級范圍，減少顯示的視圖數(shù)量。
設(shè)計接口
- 每個項目都可能自定義各種類型的View，有的需要關(guān)注，有的無需關(guān)注，因此首先應(yīng)該提供的配置項是無需顯示的2種視圖類型。
- 接口直接設(shè)計成一個View，用戶想在哪展示就放哪展示。
- 設(shè)置目標(biāo)視圖，要展示哪些視圖的層次結(jié)構(gòu)。再加一個直接展示所有Window的。
- 切換分屏狀態(tài)，分屏后下半部以列表展示信息。
- 切換選擇狀態(tài)，非選擇狀態(tài)下可拖動、縮放，斜切。
- 對于無需顯示的視圖，為防萬一，也要加個開關(guān)，可以開啟顯示。
- 準(zhǔn)備一個預(yù)處理好的Debug窗口，一個語句即可展示app全部視圖層次結(jié)構(gòu)。
- Debug窗口的菜單有相關(guān)操作，但也應(yīng)該提供給用戶自定義，因此將菜單數(shù)組作為配置項，按慣例作為組件接口配置。
實現(xiàn)
設(shè)計上都是可行的，實現(xiàn)時只要一點(diǎn)點(diǎn)堆砌代碼就可以了。
https://gitee.com/pkgogai/gydfoundation_public
/GYDDebugFoundation/Code/GYDViewHierarchy/*
image.png
