android UI進階之布局的最佳化

歡迎轉載，但是請保留出處。http://blog.csdn.net/notice520

 

好久沒更新部落格了，趁著清明來寫點什麼。

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

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