Android UI進階之布局的優化

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

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

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

　　

　非常簡單的一個布局，實作一個層疊的效果，運作效果如下圖：

下面我們就用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/