Android繪製優化（二）佈局優化

前言我們知道一個界面的測量和繪製是通過遞歸來完成的，減少佈局的層數就會減少測量和繪製的時間，從而性能就會得到提升。當然這隻是佈局優化的一方面，那麼如何來進行佈局的分析和優化呢？本篇文章會給你一個滿意的答案。 1.佈局優化工具在講到如何去佈局優化前，我們先來學習兩種佈局優化的工具。 1.1 Hie ...

前言

我們知道一個界面的測量和繪製是通過遞歸來完成的，減少佈局的層數就會減少測量和繪製的時間，從而性能就會得到提升。當然這隻是佈局優化的一方面，那麼如何來進行佈局的分析和優化呢？本篇文章會給你一個滿意的答案。

1.佈局優化工具

在講到如何去佈局優化前，我們先來學習兩種佈局優化的工具。

1.1 Hierarchy Viewer

Hierarchy Viewer是Android SDK自帶的可視化的調試工具，用來檢查佈局嵌套和繪製的時間。需要註意的是在在Android的官方文檔中提到：出於安全考慮，Hierarchy Viewer只能連接Android開發版手機或是模擬器。
首先我們在Android Studio中選擇Tools->Android->Android Device Monitor，在Android Device Monitor中選擇Hierarchy Viewer ，如下圖所示：

選擇Hierarchy Viewer後會進出Hierarchy Viewer視窗，如下圖所示。

Hierarchy Viewer中有4個四個子視窗，它們的的作用為：

Windows：當前設備所有界面列表。
Tree View：將當前Activity的所有View的層次按照高層到低層從左到右顯示出來。
Tree Overview：全局概覽，以縮略的形式顯示。
Layout View：整體佈局圖，以手機屏幕上真實的位置呈現出來。單擊某一個控制項，會在Tree Overview視窗中顯示出對應的控制項。

根據上面講到的Hierarchy Viewer的4個四個子視窗，我們可以很容易的查看我們佈局控制項的層級關係。當然Hierarchy Viewer還可以查看某一個View的耗時，我們可以選擇某一個View，然後單擊下圖紅色箭頭標識的按鈕，這裡我們把他簡稱為Layout Time按鈕。

從圖中可以看出被選中的RelativeLayout自身的Measure、Layout和Draw的耗時數據都為n/a。單擊Layout Time按鈕後，就可以查看View的耗時情況了，如下圖所示。

QQ截圖20170324170337.png

從圖中可以看出，被選中的LinearLayout給出了自身Measure、Layout和Draw的耗時，並且它所包含的View中都有了三個指示燈，分別代表當前View在Measure、Layout和Draw的耗時，綠色代表比其他50%View的同階段（比如Measure階段）速度要快，黃色則代表比其他50%View同階段速度要慢，紅色則代表比其他View同階段都要慢，則需要註意了。如果想要看View的具體耗時，則點擊該View就可以了。

1.2 Android Lint

Android lint是在ADT 16提供的新工具，它是一個代碼掃描工具，通過代碼靜態檢查來發現代碼出現的潛在問題，並給出優化建議。檢查的範圍主要有以下幾點：

Correctness 正確性
Security 安全性
Performance 性能
Usability 可用性
Accessibility 可達性
Internationalization 國際化

Android Lint功能十分強大，這裡我們只關註XML佈局檢查，我們可以通過Android Studio的Analyze->Inspect Code來配置檢查的範圍，如下圖所示。

點擊上圖的OK按鈕後，就會進行代碼檢查，檢查的結果如下圖所示。

圖中列出了項目中出現的問題種類，以及每個問題種類的個數，問題種類包括我們前面提到的Correctness 、Internationalization 、Performance等。我們點擊展開最後的XML一項，點擊一個問題，就會出現如下圖的提示。

可以看出給出了Namespace declaration is never used的提示，並指出了問題所在的文件和行數，我們點擊數字3，直接跳入到問題的代碼，發現如下代碼：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    ...

View Code

第三行的Namespace 確實沒有被用到。如果想要自定義Android Lint的檢查提示，可以通過File->Settings->Editor->Inspections中來配置Android Lint，如下圖所示。

從圖中可以發現，我們可以配置Android Lint檢查的範圍以及問題的嚴重等級。

2.佈局優化方法

佈局的優化方法很多，主要包括合理運用佈局、Include、Merge、ViewStub，下麵我們來一一對這些內容進行講解。

2.1 合理運用佈局

我們常用的佈局主要有LinearLayout、RelativeLayout和FrameLayout等，合理的使用它們可以使得Android繪製工作量變少，性能得到提高。我們來舉個簡單的例子。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="佈局優化" />
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Merge" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ViewStub" />
    </LinearLayout>
</LinearLayout>

View Code

上面的代碼用了兩個LinearLayout來進行佈局，運行效果如下圖所示。

我們用Hierarchy Viewer來查看層級情況，如下圖所示。

可以看到我們的佈局共有3層，一共含有5個View。如果我們用RelativeLayout來進行改寫呢？代碼如下所示。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/tv_text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="佈局優化" />
    <TextView
        android:id="@+id/tv_text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@id/tv_text1"
        android:text="Merge" />
    <TextView
        android:id="@+id/tv_text3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_text2"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@+id/tv_text1"
        android:text="ViewStub" />
</RelativeLayout>

View Code

我們只用了一個RelativeLayout來進行佈局。用Hierarchy Viewer來查看層級情況，如下圖所示。

佈局共有兩層，一共含有4個View。從這裡我們就可以看出我們用RelativeLayout減少了一層的佈局，當然這隻是一個簡單例子，如果佈局複雜，那麼合理的用RelativeLayout來替代LinearLayout會減少很多層佈局。
如果根據上面的例子來看，RelativeLayout的性能是比LinearLayout低，因為RelativeLayout中的View的排列方式是基於彼此依賴的。但是在實際開發中面對的情況比較多，不能輕易的說誰的性能更好。一般情況下，但是如果佈局層數較多時，推薦用RelativeLayout來實現。如果佈局嵌套較多，推薦使用LinearLayout來實現。

2.2 使用Include標簽來進行佈局復用

2.3 用Merge標簽去除多餘層級

Merge意味著合併，在合適的場景使用Merge標簽可以減少多餘的層級。Merge標簽一般和Include標簽搭配使用

merge標簽最好是來替代FrameLayout，或者是佈局方向一致的LinearLayout，比如當前父佈局LinearLayout的佈局方向是垂直的，包含的子佈局LinearLayout的佈局方向也是垂直的則可以用merge標簽.

2.4 使用ViewStub來提高載入速度

一個很常見的開發場景就是我們想要一個佈局時，並不是所有的控制項都需要顯示出來，而是顯示出一部分，對於這種情況，我們一般採用的方法就是使用View的GONE和INVISIBLE，但是這種方法效率不高，雖然是達到了隱藏的目的，但是仍在佈局當中，系統仍然會解析它們，我們可以用ViewStub來解決這一問題。
ViewStub是輕量級的View，不可見並且不占佈局位置。當ViewStub調用inflate方法或者設置可見時，系統會載入ViewStub指定的佈局，然後將這個佈局添加到ViewStub中，在對ViewStub調用inflate方法或者設置可見之前，它是不占佈局空間和系統資源的，它主要的目的就是為目標視圖占用一個位置。因此，使用ViewStub可以提高界面初始化的性能，從而提高界面的載入速度。

我們首先在佈局中加入ViewStub標簽，佈局代碼如下所示。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
  <ViewStub
      android:id="@+id/viewsub"
      android:layout_width="match_parent"
      android:layout_height="40dp"
      android:layout="@layout/titlebar"/>
   ...
</LinearLayout>

ViewStub標簽中用android:layout引用了此前寫好的佈局titlebar.xml。這時我們運行程式，ViewStub標簽所引用的佈局是顯示不出來的，因為引該局還沒有載入到ViewStub中，接下來在代碼中使用ViewStub：

public class MainActivity extends AppCompatActivity {
    private ViewStub viewsub;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewsub= (ViewStub) findViewById(R.id.viewsub);
//        viewsub.inflate();//1
        viewsub.setVisibility(View.VISIBLE);//2
    }
}

可以使用註釋1和註釋2處的代碼來將ViewStub引用的佈局載入到ViewStub中，這樣引用的佈局就顯示了出來。

View Code

在使用ViewStub時需要主要以下問題：

ViewStub只能載入一次，載入後ViewStub對象會被置為空，這樣當ViewStub引用的佈局被載入後，就不能用ViewStub來控制引用的佈局了。因此，如果一個控制項需要不斷的顯示和隱藏，還是要使用View的Visibility屬性。
ViewStub不能嵌套Merge標簽。
ViewStub操作的是佈局文件，如果只是想操作具體的View，還是要使用View的Visibility屬性。