Android性能優化之布局優化篇

怎樣才能寫出優秀的Android App，是每一個程序員追求的目標。那麼怎麼才能寫出一個優秀的App呢？相信很多初學者也會有這種迷茫。一句話來回答這個問題：細節很重要。今天我們就從最基礎的XML布局來談談怎麼提高Android性能問題吧！

也許你經常會遇到比較復雜的布局，這種情況下，最簡單的方法就是多層嵌套實現效果，但是最簡單的方法是否是最優的方法呢？ 這裡需要打一個大大的問號？？？？？經驗告訴我們，往往簡單的方法，得到的結果不是最優解，那麼我們通過一個例子來研究一下怎麼去優化我們的XML布局吧，下面通過經典微信中的“發現”tab頁面中的布局來看看怎麼實現。

上面這張圖片是微信界面截圖，看到這張效果圖的第一眼會讓開發者想到使用線性布局實現這種左邊圖片，右邊文字，一行白色背景效果很方便。那麼我們就按照一般思路寫出如下布局代碼：

以上布局的效果圖如下：

是不是差不多實現了微信一樣的效果？那麼我們怎麼來判斷以上布局是不是最優的呢？當然，我們是有工具來查看的。相信很多童鞋用過了，第一個就是 Hierarchy View，第二個就是 顯示GPU過度繪制。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxoMyBpZD0="hierarchy-view檢測布局嵌套層次">Hierarchy View檢測布局嵌套層次

如果你是使用AS開發的話，你可以在 AS 工具欄中點擊 Tools–>Android–>Android Device Monitor–>Hierarchy View。（至於Hierarchy View怎麼使用這裡就不仔細介紹了）你可以通過這個工具來查看當前布局的層次結構，如下圖的布局的層次結構就是上面微信的布局：

ContentFrameLayout接點之後就是我們上面XML代碼的布局了，從上圖可以看到，我們布局最多有 5 層，其實你從代碼中也可以看到是 5 層，那麼我們是否能減少以上的布局的嵌套層次呢？答案是肯定的，廢話不多說，我們直接上一份我優化過的布局代碼吧。

哇，代碼量少了很多啊，代碼也簡潔了許多，讓人看著就很舒服，那麼我們到底進行了怎樣的優化呢？從以下幾點總結：

使用 style 主題來定義一個通用的屬性，從而重復利用代碼，減少代碼量。上面代碼使用了兩個style，一個是textStyle 和 LinerLayoutStyle ，代碼如下：

2.減少布局嵌套的層次，上面布局使用TextView可以設置四個方向圖片來直接替代LinerLayout下包裹一個ImageView 和TextView。從而這裡減少了一層嵌套布局，再次利用RelativeLayout相對布局又減少了一層橋套，提高了加載布局的效率。看圖：

從圖中看出，不僅減少了兩層嵌套布局，而且組件數目也減少，從而減少布局繪制的時間，大大提高了布局加載效率。

3.使用 LinearLayoutCompat 組件來實現線性布局元素之間的分割線，從而減少了使用View來實現分割線效果。LinearLayoutCompat的具體內容請參考 http://blog.csdn.net/feiduclear_up/article/details/46619637 。

4.使用 include 標簽加載底部菜單欄布局，include 標簽的目的是重復利用布局，來減少代碼了。

顯示GPU過度繪制

你可以在手機打開 設置—->開發者選項—->顯示GPU過度繪制，這個開關的作用是按不同顏色值來顯示布局的過度繪制，繪制的層次從最優到最差：藍，綠，淡紅，紅。給出一張直觀的形象圖片來表示吧

圖片從上到下代表不同層次的OverDraw，我們在布局時候，盡量減少紅色 Overdraw，看到更多的藍色區域。來看看微信的 Overdraw圖和我們自定義的布局Overdraw圖吧

第一張圖是 騰訊微信的Overdraw 圖，第二張圖片是我們自定義的 Overdraw 圖片。從上面兩張圖片看出，我們自己的布局和微信原版的布局 Overdraw 過度繪制情況差不多，沒啥區別。那麼我們能不能去減少紅色部分的過度繪制呢？試試吧！

我們先去掉最頂端布局RelativeLayout的背景

android:background=@color/color_eeeeee

然後修改每個item選擇資源 selector

 android:background=@drawable/item_bg_select1

之前的 item_bg_select.xml 資源是如下代碼：

修改之後的 item_bg_select1.xml資源代碼如下：

我們發現，新的 selector資源去除了

因為整個背景是白色的，無需重復設置正常情況下item的背景顏色。

修改之後的效果圖如下：

看出，基本沒有紅色區域，從而提高布局的繪制效率。

總結：現在看來，我們通過減少背景顏色的設置來減少Overdraw的情況。我們自己布局過度繪制的情況比微信本身的情況有很大的改善，是不是感覺很nice～～。

懶加載布局 ViewStub

除了以上兩種方法來優化布局，還有其他辦法來繼續優化布局，在某些情況下，有些布局是僅在需要時才加載，比如小米手機的添加聯系人功能就有在編輯姓名的時候有一個下拉按鈕顯示更多輸入信息，看圖

遇到這種情況，我們首先想到的 就是將不常用的元素使用INVISIBLE或者GONE進行隱藏，這樣是否真的好呢？是否達到了 布局優化的最終效果呢？利用 INVISIBLE只是隱藏布局，但是布局還是占居當前位置，且系統在加載布局的時候這一部分還是會繪制出來，同樣花費繪制時間。那麼有沒有好的辦法來解決這一問題呢？不言而喻，我們可以使用懶加載布局 ViewStub。

ViewStub是Android為此提供了一種非常輕量級的控件。ViewStub雖說也是View的一種，但是它沒有大小，沒有繪制功能，也不參與布局，資源消耗非常低，將它放置在布局當中基本可以認為是完全不會影響性能的。

下面我們來學習一下 ViewStub的使用方法吧！

item_name.xml 布局如下：

然後你在代碼中這麼使用即可

findViewById(R.id.et_name).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ViewStub viewStub = (ViewStub) findViewById(R.id.view_stub);
                if (null != viewStub) {
                    //主要是這一句顯示更多布局
                    View view = viewStub.inflate();
                    EditText name1 = (EditText) view.findViewById(R.id.et_name1);
                    EditText name2 = (EditText) view.findViewById(R.id.et_name2);
                    EditText name3 = (EditText) view.findViewById(R.id.et_name3);
                    EditText name4 = (EditText) view.findViewById(R.id.et_name4);
                }
            }
        });

效果圖如下：

從效果圖可以看出，當用戶點擊姓名下拉按鈕時，其他關於姓名的布局就加載出來了，而且原來的布局是顯示在ViewStub布局之下的，位置顯示沒有任何異常。當然你可以通過 setVisibility(View.VISIBLE)或者viewStub.inflate()方來來讓其顯示，通過setVisibility(View.INVISIBLE)來隱藏 ViewStub。

Android Lint 工具

這裡不展開介紹 Lint 工具，感興趣的童鞋可以自己網上搜索一把，這個工具主要是用來檢查工程中代碼的不合理，布局不合理，資源重復，圖片重復，等，讓開發者進一步優化自己的應用。如果你是AS 用戶，你可以在工具欄 Analyze—>Inspect Code 打開此工具使用。