學習Android界面設計的超級利器HierarchyView.bat

存在問題: 
我看到別人的程序,想學習人家的UI佈局是怎麼做的,如何能窺探一二?

存在問題: 
在學習ViewGroup和Layout時我們可能會有一個疑問,如果我在Xml佈局文件中不放置Layout,直接放TextView等組件的時候,它是用什麼方式佈局的?

解決方法: 
Android的SDK中自帶了一個查看UI佈局層級結構的工具:HierarchyView.bat。在模擬器運行的情況下,使用該工具可以將當前的Activity中的UI組件們以對象樹的形式展現出來,每一個組件所包含的屬性也能窺探得到。在對象樹上的任意節點可以看到該節點及以下節點的顯示效果。使用HierarchyView能深入全面的理解xml佈局文件,更可以通過它來學習別人優秀的佈局技巧。

image 
(看到那個不起眼的hierachyview.bat文件沒,哎,竟然它是學習Android界面設計的超級利器)

具體使用方法:待模擬器及想觀察的程序啓動後,雙擊Hirerachyview.bat,點擊Load View Hierarchy

image 

現在我們先解決第一個問題:分析AndroidQQ的登錄界面組成。

image
從圖中可以看到QQ登錄界面中的核心部分是用相對佈局擺放的,甚至可以看到有的TextView還用的是IDE自動起的ID:TextView01。

下面我們解決第二個問題:找到默認的佈局方式是什麼?

我們建一個新項目,Main.xml中只放一個TextView,

<?xml version="1.0" encoding="utf-8"?> 
<TextView android:text="hi" android:id="@+id/TV" 
    android:layout_width="wrap_content" android:layout_height="wrap_content" 
    xmlns:android="http://schemas.android.com/apk/res/android"></TextView>

看看他的佈局層次是什麼樣的:

image

我們可以看到頂級元素是個PhoneWindow,其下有一個線性佈局LinearLayout,再下面有一個應用程序標題條,

image 

標題條是由一個幀佈局FrameLayout和一個TextView組成。 
我們自己寫的TextView也放在了一個Layout裏,這個Layout就是ID叫做content的FrameLayout。

image

接下來我們再創建一個帶有LinearLayout的程序,看看他的層次結構來確定一下,那個ID是content的FrameLayout是固有的還是因爲沒佈局元素由系統自動加上去的。

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout android:id="@+id/LinearLayout01" 
    android:layout_width="fill_parent" android:layout_height="fill_parent" 
    xmlns:android="http://schemas.android.com/apk/res/android"
    <TextView android:text="haha" android:id="@+id/TextView01" 
        android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView> 
</LinearLayout>

下面是新程序的UI界面層次結構圖:

image

這一次我們同樣看到了那個Id是content的Framelayout:) 這說明它是窗口布局結構裏固有的。

發佈了4 篇原創文章 · 獲贊 3 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章