在開發中UI布局是我們都會遇到的問題，隨著UI越來越多，布局的重復性、復雜度也會隨之增長。對此我們優化xml布局就不得不說重用布局，為了有效地重新使用完整的布局，Google提出可以使用<include>和<merge>這兩個非常有用的標簽，用以在當前布局中嵌入另一個布局，下面我們就來逐個學習一下。

一、include

<include/>標簽可以允許在一個布局當中引入另外一個布局，那么比如說我們程序的所有界面都有一個公共的部分，這個時候最好的做法就是將這個公共的部分提取到一個獨立的布局文件當中，然后在每個界面的布局文件當中來引用這個公共的布局。這里舉個例子吧，例如在include_layout.xml添加兩個按鈕：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button One"
        android:id="@+id/button" />
    <Button
        android:layout_width="match_parent" 
       android:layout_height="wrap_content"
        android:text="Button Two"
        android:id="@+id/button2" />
</LinearLayout>

好的，那這連個按鈕作為一個獨立的布局現在我們已經編寫完了，接下來的工作就非常簡單了，無論任何界面需要加入這個布局，只需要在布局文件中引入include_layout.xml就可以了。那么比如說我們的程序當中有一個activity_main.xml文件，現在想要引入include_layout.xml只需要這樣寫：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:onClick="onClick"
        android:id="@+id/button1"/>
    <include layout="@layout/include_layout"/>
</LinearLayout>

顯示的效果為：

a.png

include.PNG

二、merge

通過上面內容，相信大家已經可以看出來了吧，在使用<include/>直接引入布局的時候，這個內部的LinearLayout其實就是一個多余的布局嵌套，實際上并不需要這樣一層，讓兩個按鈕直接包含在外部的LinearLayout當中就可以了。而這個多余的布局嵌套其實就是由于布局引入所導致的，因為我們在include_layout.xml中也定義了一個LinearLayout。那么應該怎樣優化掉這個問題呢？請接著往下看當然就是使用<merge/>標簽了，現在修改include_layout.xml布局如下：

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button One"
        android:id="@+id/button" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button Two"
        android:id="@+id/button2" />
</merge>

可以看到，這里我們將include_layout.xml最外層的LinearLayout布局刪除掉，換用了<merge/>標簽，這就表示當有任何一個地方去include這個布局時，會將<merge/>標簽內包含的內容直接填充到include的位置，不會再添加任何額外的布局結構。好的，<merge/>的用法就是這么簡單，現在重新運行一下程序，你會看到界面沒有任何改變，然后我們再通過UI Automator Viewer工具來查看一下當前的View結構，如下圖所示：

merge.PNG

三、ViewStub

對于ViewStub(請自備梯子)可以理解為僅在需要時才加載布局。
　　ViewStub是一個輕量級的View，它一個看不見的，不占布局位置，占用資源非常小的控件。可以為ViewStub指定一個布局，在Inflate布局的時候，只有ViewStub會被初始化，然后當ViewStub被設置為可見的時候，或是調用了ViewStub.inflate()的時候，ViewStub所向的布局就會被Inflate和實例化，然后ViewStub的布局屬性都會傳給它所指向的布局。這樣，就可以使用ViewStub來方便的在運行時，要不要顯示某個布局。
　　但ViewStub也不是萬能的，下面總結下ViewStub能做的事兒和什么時候該用ViewStub，什么時候該用可見性的控制。
首先來說說ViewStub的一些特點：

1. ViewStub只能Inflate一次，之后ViewStub對象會被置為空。按句話說，某個被ViewStub指定的布局被Inflate后，就不會夠再通過ViewStub來控制它了。
2. ViewStub只能用來Inflate一個布局文件，而不是某個具體的View，當然也可以把View寫在某個布局文件中。

基于以上的特點，那么可以考慮使用ViewStub的情況有：

1. 在程序的運行期間，某個布局在Inflate后，就不會有變化，除非重新啟動。因為ViewStub只能Inflate一次，之后會被置空，所以無法指望后面接著使用ViewStub來控制布局。所以當需要在運行時不止一次的顯示和隱藏某個布局，那么ViewStub是做不到的。這時就只能使用View的可見性來控制了。
2. 想要控制顯示與隱藏的是一個布局文件，而非某個View。因為設置給ViewStub的只能是某個布局文件的Id，所以無法讓它來控制某個View。

所以，如果想要控制某個View(如Button或TextView)的顯示與隱藏，或者想要在運行時不斷的顯示與隱藏某個布局或View，只能使用View的可見性來控制。接下來修改include_layout.xml布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:onClick="onClick"
        android:id="@+id/button1"/>
    <ViewStub
        android:id="@+id/view_stub"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout="@layout/include_layout"/>
</LinearLayout>

現在看看MainActivity的代碼：

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    void onClick(View view){
        ViewStub viewStub= (ViewStub) findViewById(view_stub);
       if (viewStub!=null){
           viewStub.inflate();
       }
    }
}

最后來看看使用ViewStub的效果：

GIF.gif

點擊button就會調用ViewStub的inflate();方法來加載我們需要的布局
最后使用ViewStub需要注意：

1. 某些布局屬性要加在ViewStub而不是實際的布局上面，才會起作用，比如上面用的android:layout_margin*系列屬性，如果加在TextView上面，則不會起作用，需要放在它的ViewStub上面才會起作用。而ViewStub的屬性在inflate()后會都傳給相應的布局。

附上UI Automator Viewer工具的打開方法：AndroidSDK > tools > uiautomatorviewer.bat

img02.png