天天看點

Android 利用Hierarchy Viewer工具學習别人的UI設計

  在Android 工具欄裡面,位址:D:\Program Files\android-sdk-windows\tools  目錄下打開此工具:

Android 利用Hierarchy Viewer工具學習别人的UI設計

  此工具名為:層級觀察器

  本篇文章将教大家如何利用層級觀察器檢視和優化自己的UI層次關系或者看别人應用程式UI的布局結構,輕按兩下該處理檔案,顯示如下 圖:

Android 利用Hierarchy Viewer工具學習别人的UI設計

  左邊為裝置清單名稱,如果你開啟多個裝置将會一一列出你目前運作的裝置,包括真機。

  右邊是目前裝置清單運作的Acitivity ,即你目前運作的Activity 對應的UI布局,本篇将使用Android 自身的音樂播放器,來操作得到UI布局結構,這裡的我們要點選com.android.music/com.android.music.MediaPlaybackActivity 項,選中它,到上面點選Load View Hierarchy 項,右下角将會出現加載進度條,然後将加載的View 結構顯示出來,如下圖:

Android 利用Hierarchy Viewer工具學習别人的UI設計

  左邊為UI 的關系圖,右邊為每個View 的屬性(必須選中任意View 對象)和結構草圖底下是關系圖的縮略圖,底下進度條可以控制關系的顯示大小,左下角兩個按鈕為縮略顯示和清單顯示方式,先把清單顯示方式為如下圖:

Android 利用Hierarchy Viewer工具學習别人的UI設計

  左邊為布局中使用的ViewGroup和View 的關系結構圖,點中任意的一個View 對象右邊都會幫我們獲得焦點,右邊為顯示目前Activity 在真機運作的效果圖,我記得有個朋友在QQ群問過,有沒有什麼工具可以得到坐标的,其實這個工具就可以坐到,看最右下角,分别為RGB 和XY 軸,我們點選螢幕的任意為置,它都會幫我們算出來目前顯示的值,怎麼樣是不是很實用的一個工具。快去試試吧。

  Tip:最上邊的導航還可以幫們把VIEW結構生成PSD圖或者做快速的切換裝置動作。

繼續閱讀