【UI佈局優化】Hierarchy Viewer-優化你的UI

原文地址:http://blog.csdn.net/hp910315/article/details/50461677

優化UI的方法有兩種,具體來說應該是UI審查的方法: 
1、使用Hierarchy Viewer 
2、使用lint

lint是一個靜態的代碼審查工具。

Hierarchy Viewer可以讓你去調試和優化你的用戶界面,它提供了一個可視的佈局層級視圖來查看界面的佈局情況。

作用: 
1、佈局結構和性能 
2、UI顯示和調試

下面就開始來使用一下這個工具了 
1、啓動模擬器 
2、安裝你要查的應用,然後啓動這個你要查看的應用

這裏寫圖片描述

3、運行hierarchy Viewer 
啓動命令行,進入<sdk>/tools/目錄下,執行:

./hierarchyviewer
  • 1
  • 1

這裏寫圖片描述

安裝上面的操作,雙擊選中的Activity,就會進入View的層級窗口。

這裏寫圖片描述

上面我們就可以看到整個界面了,它就是一個佈局層級樹,我們從這個面板裏面可以清楚地看到這個佈局的層級,它的每一個節點就代表一個view視圖。

我們來具體看看其中的一個節點:

這裏寫圖片描述

從這個節點我們可以看到一些信息,從上到下分爲四個方面: 
1、View class:View對象的class類型 
2、View對象地址:指向這個View對象的指針 
3、View對象的ID:android:id屬性的值 
4、性能指示器:它裏面有三個點,這三個點從左到右依次代表measure,layout和draw的渲染速度,使用不同顏色來表示快慢程度,它有三種顏色:

綠色:它代表這個View的渲染速度相對於View樹中的其它View要快50%。 
黃色:它代表這個View的渲染速度相對於View樹中的其它View要慢50%。 
紅色:它代表這個View在這個View樹中它的渲染速度是最慢的。

另外,在右下角有個數字,它是View索引,表示這個視圖在父視圖下面的索引,父視圖下面的孩子的索引是從0開始的,如果這個視圖是父視圖唯一的孩子,那麼它的索引就是0。

當我們選擇一個節點,我們還會看到一些額外的信息。 
這裏寫圖片描述

可以看到在這個節點的上面有一些額外的顯示信息,從上到下依次爲:

image:這個View的真實圖像顯示。 
View數量:這個節點中View的數量,包括它本身和它的孩子view,例如如果這個值爲4,那麼它代表這個view有3個孩子。 
渲染時間:真實的measure,layout,draw的渲染時間。

接着我們來看看這個層級窗口的菜單: 
這裏寫圖片描述

下面來解釋一下它們的作用:

1、Save as PNG:把這個佈局的層級圖另存爲一個png圖片 
2、Capture Layers:將這個佈局另存爲photoshop的psd圖片,這樣我們就可以看到整個佈局由多少層組成,每層有哪些元素。 
3、Load View Hierarchy:重新載入這個view層級圖 
4、Evaluate Contrast:可以查看佈局的具體情況 
這裏寫圖片描述

5、Display View:在單獨的一個窗口中,顯示所選擇的view。 
6、Invalidate Layout:重繪當前窗口 
7、Request Layout:請求這個view進行layout 
8、Dump DisplayList:請求view輸出它的顯示列表到logcat中 
9、Dump Theme:下載這個view主題的資源 
10、Profile Node:得到measure,layout,draw的性能指示器。

如果我們希望查看佈局的像素詳細情形,在下面這個選擇中,我們選擇一個Activity之後,可以選擇Inspect screenshot來進行查看。

這裏寫圖片描述

進入後的視圖如下:

這裏寫圖片描述

參考文章: 
Optimizing Your UI


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章