Android UI進階之佈局的優化

     歡迎轉載,但是請保留出處。http://www.cnblogs.com/noTice520/ 

  好久沒更新博客了,趁着清明來寫點什麼。

  今天來講下如何使用android中提供的工具優化我們的佈局。首先我們寫一個最簡單的框架佈局。

  

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation
="vertical"
android:layout_width
="fill_parent"
android:layout_height
="fill_parent"
>
<TextView
android:layout_width="300dip"
android:layout_height
="300dip"
android:background
="#00008B"
android:layout_gravity
="center"
/>
<TextView
android:layout_width="250dip"
android:layout_height
="250dip"
android:background
="#0000CD"
android:layout_gravity
="center"
/>
<TextView
android:layout_width="200dip"
android:layout_height
="200dip"
android:background
="#0000FF"
android:layout_gravity
="center"
/>
<TextView
android:layout_width="150dip"
android:layout_height
="150dip"
android:background
="#00BFFF"
android:layout_gravity
="center"
/>
<TextView
android:layout_width="100dip"
android:layout_height
="100dip"
android:background
="#00CED1"
android:layout_gravity
="center"
/>
</FrameLayout>

 非常簡單的一個佈局,實現一個層疊的效果,運行效果如下圖:

下面我們就用android中提供的一個觀察佈局的工具,層級觀察器,Hierarchy Viewer來觀察我們的佈局。Hierarchy Viewer工具是一個非常好的佈局優化工具,同時,你也可以通過它學習他人的佈局。應該說是一個非常實用的工具。

   Hierarchy Viewer在sdk的tools目錄下,打開後最新界面如圖所示:

  界面很簡潔,列出了當前設備上的進程,在前臺的進程加粗顯示。上面有三個選項,分別是刷新進程列表,將層次結構載入到樹形圖,截取屏幕到一個擁有像素柵格的放大鏡中。對應的在左下角可以進行三個視圖的切換。在模擬器上打開寫好的框架佈局,在頁面上選擇,點擊Load View,進入如圖所示界面。

  左邊的大圖爲應用佈局的樹形結構,上面寫有控件名稱和id等信息,下方的圓形表示這個節點的渲染速度,從左至右分別爲測量大小,佈局和繪製。綠色最快,紅色最慢。右下角的數字爲子節點在父節點中的索引,如果沒有子節點則爲0。點擊可以查看對應控件預覽圖、該節點的子節點數(爲6則有5個子節點)以及具體渲染時間。雙擊可以打開控件圖。右側是樹形結構的預覽、控件屬性和應用界面的結構預覽。點擊相應的樹形圖中的控件可以在右側看到他在佈局中的位置和屬性。工具欄有一系列的工具,保存爲png或者psd,刷新等工具。其中有個load overlay選項可以加入新的圖層。當你需要在你的佈局中放上一個bitmap,你會用到它來幫你佈局。點擊左下角的第三個圖標切換到像素視圖,如下圖所示。

  視圖左側爲View和ViewGroup關係圖,點擊其中的View會在右邊的圖像中用紅色線條爲我們選中相應的View。最右側爲設備上的原圖。中間爲放大後帶像素柵格的圖像,可以在Zoom欄調整放大倍數。在這裏能定位控件的座標,顏色。觀察佈局就更加的方便了。

     接下來再介紹下另一個佈局優化工具-layoutopt。這是android爲我們提供的佈局分析工具。它能分析指定的佈局,然後提出優化建議。  

  要運行它,打開命令行進入sdk的tools目錄,輸入layoutopt加上你的佈局目錄命令行。運行後如圖所示,框出的部分即爲該工具分析佈局後提出的建議,這裏爲建議替換標籤。

下面列出一些常會碰到的輸出:

$ layoutopt samples/
samples/compound.xml
   7:23 The root-level <FrameLayout/> can be replaced with <merge/>
   11:21 This LinearLayout layout or its FrameLayout parent is useless
samples/simple.xml 提示未使用到該佈局
   7:7 The root-level <FrameLayout/> can be replaced with <merge/>
samples/too_deep.xml
   -1:-1 This layout has too many nested layouts: 13 levels, it should have <= 10!
   20:81 This LinearLayout layout or its LinearLayout parent is useless
   24:79 This LinearLayout layout or its LinearLayout parent is useless
   28:77 This LinearLayout layout or its LinearLayout parent is useless
   32:75 This LinearLayout layout or its LinearLayout parent is useless
   36:73 This LinearLayout layout or its LinearLayout parent is useless
   40:71 This LinearLayout layout or its LinearLayout parent is useless
   44:69 This LinearLayout layout or its LinearLayout parent is useless
   48:67 This LinearLayout layout or its LinearLayout parent is useless
   52:65 This LinearLayout layout or its LinearLayout parent is useless
   56:63 This LinearLayout layout or its LinearLayout parent is useless
samples/too_many.xml
   7:413 The root-level <FrameLayout/> can be replaced with <merge/>
   -1:-1 This layout has too many views: 81 views, it should have <= 80!
samples/useless.xml 提示該佈局中有太多的控件
   7:19 The root-level <FrameLayout/> can be replaced with <merge/>
   11:17 This LinearLayout layout or its FrameLayout parent is useless 

通過這個工具,能很好的優化我們的UI設計,佈局方法。好了,今天就寫到這裏了。希望對大家有幫助,有問題可以留言交流~這裏說下有的網站轉載了我的文章,我很開心。但是都不留個出處,那就不太好了。所以歡迎轉載,但是請保留出處。http://www.cnblogs.com/noTice520/

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