畫出 View 的層級 3D 圖和樹形圖來分析層級關系

HierarchyLayout 介紹

HierarchyLayout是一個自定義的ViewGroup工具,用于分析視圖的層級關系,并畫出層級樹的結構圖和可交互的3D 層級View:

HiearchyLayout的靜態(tài)圖,實際是可隨手勢改變 3D 形態(tài)的。

hierarchyView.jpeg
hierarchyViewNode.jpeg
hierarchyNode.jpeg

查看工程地址 github 點我,更多經典自定義 ViewGroup集合

使用方法

HierarchyLayout 只有一個文件,使用很簡便,只需要把它當作一個普通的LinearLayout根布局就可以??捎?xml 根布局,也可用new 構造動態(tài)添加都行。
例如 Activity 或 Fragment 的根布局使用:

<?xml version="1.0" encoding="utf-8"?>
<com.rexy.widgets.group.HierarchyLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:gravity="center_horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    //這里是其它xml 容器或 View .
</com.rexy.widgets.group.HierarchyLayout>

運行后就會出現一個層級分析界面,頂部是概要信息,層級顯示最大層級數,和平均層級數,結點顯示所有的結點總數和 ViewGroup 型及 View 型的數目,測繪顯示的是最近一次measure layout draw 的時間。

注意 HierarchyLayout 只能分析出它自身結點及其包含的直接或間接子結點的層級關系,若將它安裝在 Activity 的DecorView下就可分析出整個 Window 的層級信息。

實現原理分三部

  1. 作為根布局在onLayout 后 立即遞歸分析所有包含的子View信息,如結點類型,相對HierarchyLayout的層數,位置,父親和孩子等依賴關系 并構造一個完整的樹結構記錄。
  2. 畫樹需要根據每層所在位置和葉子數計算權重 來決定每個結點在視圖上畫出的位置坐標并畫圓,每個結點連接父結點畫線就構成樹。
  3. 畫3D層級圖形就是在第一部基礎上,一層一層的計算偏移量并用view.draw(canvas)來畫某一個結點。所有 View 都是相對HierarchyLayout的位置,通過getLocationInWindow獲取相對 Window 位置來決定 canvas需要平移的相對距離。
    再結合手勢計算x 軸,y軸的旋轉度,通過canvas.rotate(x,y,0).

以上只是簡要的原理,具體還涉及隱藏下一層的 View,不然會畫重,詳細請看源碼 僅一個類。

最后感謝大家關注和多提建議或是issue,如果很感興趣請 star 和 follower . 完整工程地址更多經典自定義 ViewGroup集合

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容