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();显示后布局层级：