The original link: mp.weixin.qq.com/s/bTA2gztUz…

Include, Merge, ViewStub, etc. These three types of layouts can be used for layout optimization. Today, I will introduce the use of these three layouts and record them for subsequent use in the APP.

includeLayout of reuse

In the process of app development, we may encounter the same layout in different pages. At this time, we can extract these general layouts into a separate layout file, and then use the

tag to introduce the corresponding page layout file, mainly through the include layout attribute reference. Here’s an example of an include layout:

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

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Here's the layout from include." />

</RelativeLayout>
Copy the code

Activity layout:

<? 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/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="The following content is from the include tag" />

    <include
        android:id="@+id/container"
        layout="@layout/include_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv"
        android:layout_marginTop="10dp" />

</RelativeLayout>
Copy the code

This label is very common in everyday work. There are a few things to note here: 1. If you add ids to both the include tag and the layout loaded by the include, keep the IDS the same (container in this example), otherwise you won’t get a RelativeLayout container in your code. Of course, we can avoid this problem by simply adding an ID attribute to one of the entries.

2. The ids of the elements in the include layout should be different from those of the other elements in the include layout. For example, if the ids of the two TextViews are set to the same, the program will run without error, but the assignments from the TextViews will only be assigned to one of them.

3. If you need to set position attributes for include tags, such as layout_below and layout_marginTop, then you must set layout_width and layout_height at the same time. Otherwise, the compiler will report an error.

4. The layout can include two identical include tags, as shown in the following code. Both include tags load layout=”@layout/include_layout”

<? 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"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="The following content is from the include tag" />

    <include
        android:id="@+id/container"
        layout="@layout/include_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv"
        android:layout_marginTop="10dp" />

    <include
        android:id="@+id/container2"
        layout="@layout/include_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp" />

</RelativeLayout>
Copy the code

You can set the ID attribute of different include. When referencing, the following information is displayed:

View view = findViewById(R.id.container2);
TextView textView = view.findViewById(R.id.tv);
textView.setText("Here's the layout from the second include.");
Copy the code

Merge reduces view hierarchy

Merge the merge tag can be used to reduce the hierarchy of the view to optimize the layout. It can be used with include. If the parent layout of the include tag and the root container of the include layout are of the same type, merge the root container instead. The page layout

<? 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">

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="The following content is not from the merge tag" />

    <include
        layout="@layout/merge_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp" />

</LinearLayout>
Copy the code

Merge not merge:

<? xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Is this from merge layout?" />

</LinearLayout>
Copy the code

Take a look at the view layer structure:

Merge merge

<? xml version="1.0" encoding="utf-8"? > <merge xmlns:android="http://schemas.android.com/apk/res/android">

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is from the Merge layout" />

</merge>
Copy the code

View layer structure:



LinearLayout
merge
include
include

ViewStub is loaded on demand

Load on Demand As the name implies, load it when needed, and do not load it when not needed, saving memory usage. Normally we use the setVisibility method to control the view’s display and hiding, but in this case the view is already loaded. For example, the ViewStub can be used when a layout on a page in an app only needs to be displayed under certain circumstances and the rest of the layout can be displayed without loading. The Layout property is the layout to load

<? 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/viewstub"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout="@layout/viewstub_layout" />

</LinearLayout>
Copy the code

Note that the inflate() method of the ViewStub can only be invoked once, and once invoked, the ViewStub is removed from the view and replaced by the corresponding Layout, preserving the property effect set on the ViewStub.

ViewStub viewstub = findViewById(R.id.viewstub);
viewstub.inflate();
Copy the code

This article concludes the use of include, Merge, and ViewStub, depending on your project.

Github address github.com/taixiang/in…

Welcome to pay attention to my blog: blog.manjiexiang.cn/ more wonderful welcome to pay attention to micro signal: Spring breeze is not as good as knowing you