Android佈局優化

include標籤：用來複用佈局

比如標題欄等一些多個頁面含有同一個佈局的情況，可以把公用佈局單獨寫成一個xml，在需要用的時候使用incude標籤引用這個佈局文件。

例：activity_main_xml

	<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".MainActivity">
    <RelativeLayout
        android:layout_width="match_parent"
        android:padding="10dp"
        android:background="@color/colorPrimary"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:textColor="@android:color/white"
            android:text="返回"
            android:textSize="18sp"
            android:layout_centerVertical="true"
            android:layout_height="wrap_content" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_centerInParent="true"
            android:textColor="@android:color/white"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:text="標題" />
    </RelativeLayout>
</FrameLayout>

使用include標籤：
公用佈局include_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:padding="10dp"
    android:background="@color/colorPrimary"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="wrap_content"
        android:textColor="@android:color/white"
        android:text="返回"
        android:textSize="18sp"
        android:layout_centerVertical="true"
        android:layout_height="wrap_content" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="@android:color/white"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="標題" />
</RelativeLayout>

activity_main_xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".MainActivity">
    <include
        android:id="@+id/title_bar"
        layout="@layout/include_layout" />
</FrameLayout>

merge標籤：用來去除相同類型佈局，減少佈局層級

例：activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".MainActivity">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/colorAccent"
        android:gravity="bottom|center_horizontal"
        android:text="標題二"
        android:textColor="@android:color/white" />
    <include
        android:id="@+id/title_bar"
        layout="@layout/include_layout" />
</FrameLayout>

此時的佈局層級：

使用merge標籤：activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<merge 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"
    tools:context=".MainActivity">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/colorAccent"
        android:gravity="bottom|center_horizontal"
        android:text="標題二"
        android:textColor="@android:color/white" />
    <include
        android:id="@+id/title_bar"
        layout="@layout/include_layout" />
</merge>

此時的佈局層級：

可以看到activity_main.xml中的根佈局和id/content的佈局都爲FrameLayout，使用merge後合併減少了一層佈局。
注意：merge標籤必須作爲根標籤使用否則會報錯： must be the root element

merge與include的聯合使用：
在剛纔的佈局下放再加兩個LinearLayout和三個TextView：

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<merge 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"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/colorAccent"
        android:gravity="bottom|center_horizontal"
        android:text="標題二"
        android:textColor="@android:color/white" />

    <include
        android:id="@+id/title_bar"
        layout="@layout/include_layout" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="bottom1"
            android:textColor="@android:color/white" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:gravity="center"
                android:text="bottom2"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/black"
                android:gravity="center"
                android:text="bottom3"
                android:textColor="@android:color/white" />
        </LinearLayout>
    </LinearLayout>
</merge>

此時的佈局層級：

使用merge標籤：
merge_layout.xml

<merge
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="match_parent"
        android:textColor="@android:color/white"
        android:background="@color/colorPrimary"
        android:text="bottom2"
        android:gravity="center"
        android:layout_height="wrap_content" />
    <TextView
        android:layout_width="match_parent"
        android:textColor="@android:color/white"
        android:background="@android:color/black"
        android:text="bottom3"
        android:gravity="center"
        android:layout_height="wrap_content" />
</merge>

在activity_main.xml中用include標籤引入：

<?xml version="1.0" encoding="utf-8"?>
<merge 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"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/colorAccent"
        android:gravity="bottom|center_horizontal"
        android:text="標題二"
        android:textColor="@android:color/white" />
    <include
        android:id="@+id/title_bar"
        layout="@layout/include_layout" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:orientation="vertical">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="bottom1"
            android:textColor="@android:color/white" />
        <include layout="@layout/merge_layout"/>
    </LinearLayout>
</merge>

此時佈局層級：

可以看出兩層重複的LinearLayout合併，減少了佈局層級。

ViewStub標籤：作用是延遲加載佈局，在不調用inflate或者設置其可見時，是不佔用佈局空間和系統資源的。某些情況下才需要顯示的耗資源的佈局，默認可以用ViewStub標籤隱藏。

例：viewstub_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="#66ffff00"
    android:layout_height="match_parent">
    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />
</RelativeLayout>

activity_view_stub.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"
    tools:context=".ViewStubActivity">

    <Button
        android:id="@+id/btnShow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="showViewStub"
        android:textAllCaps="false" />

    <Button
        android:id="@+id/btnHide"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="hideViewStub"
        android:textAllCaps="false" />

    <ViewStub
        android:id="@+id/viewStub"
        android:layout="@layout/viewstub_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

ViewStubActivity.java

public class ViewStubActivity extends AppCompatActivity {

    private Button mBtnShow;
    private ViewStub mViewStub;
    private Button mBtnHide;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_stub);
        mBtnShow = findViewById(R.id.btnShow);
        mViewStub = findViewById(R.id.viewStub);
        mBtnHide = findViewById(R.id.btnHide);
        initEvent();
    }

    private void initEvent() {
        mBtnShow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mViewStub.inflate();
                mViewStub.setVisibility(View.VISIBLE);
            }
        });
        mBtnHide.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mViewStub.setVisibility(View.GONE);
            }
        });
    }
}

默認佈局層級：

調用inflate();顯示後佈局層級：