Android layout Smart Use of include, merge, Viewstub

Original link: Https://mp.weixin.qq.com/s/bTA2gztUzqvqER2rz56RRQ

I believe you often hear include , merge and ViewStub This kind of label, the official also mentioned that these three layouts can be used for layout optimization. Today, we introduce the use of these three layouts and record them for use in subsequent apps.

includeLayout reuse

App development process, will encounter different pages have the same layout, then we can extract these common layout into a separate layout file, and then use the tag into the <include> corresponding page layout file, mainly through include the layout property Reference.
Give me a chestnut.
includeThe 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="这里是来自include布局" /></RelativeLayout>

activityThe 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="以下的内容来自include标签" />    <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>

This label is common in everyday use. Here are a few things to keep in mind:
1, if you include add ID to the label and the include loaded layout, then the ID should be consistent, as in the example container , otherwise it is not in the code to get the RelativeLayout container. Of course we can avoid this problem by simply adding an id attribute to one of the items.

2 include . The ID of the element in the layout is different from the include other element ID in the layout of the page, such as the two in the example textview , if the ID setting is the same, the program will not be error, but textview the assignment will only be assigned to one of them.

3, if you need to include set the label location properties, such as in the example, layout_below layout_marginTop this time must also set include the label width and height properties, layout_width or the layout_height compiler will be error. The general situation does not require additional properties to be set include to load the layout file directly<include layout="@layout/...."/>

4. The layout can contain two identical include tags, as shown in the following code two include are loadedlayout="@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="以下的内容来自include标签" />    <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>

You can set different include ID attributes, which can be displayed as follows:

View view = findViewById(R.id.container2);TextView textView = view.findViewById(R.id.tv);textView.setText("这里是来自 第二个 include布局");

Merge reduced view level

mergeLabels can be used to reduce the view level to optimize layouts, which can be used instead of the include root container if the include parent layout of the label and the include root container of the layout are the same type merge .
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="以下的内容不是来自merge标签" />    <include        layout="@layout/merge_layout"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="20dp" /></LinearLayout>

First look no use 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="这里是不是来自merge布局" /></LinearLayout>

Look at the structure of the view layer:

Again to see used 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="这里是来自merge布局" /></merge>

View Layer Structure:

You can see the contrast, reduce the level of LinearLayout nesting, you need to note that the use merge of the layout, in include the label set distance property does not take effect, you can set some spacing properties to the include layout elements, depending on the needs of the project to use.

Viewstub Load on Demand

On-demand loading, as the name implies, when it is needed to load, no need to load, save memory usage. Typically we use setVisibility methods to control the display and hiding of views, but the view is already loaded.
For example, in the app, a layout in the page only needs to be displayed in a certain situation, the rest of the situation can be used without loading the display ViewStub .
layoutproperty is required to load the 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">    <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>

Note that ViewStub the inflate() method can only be called once, and once it is called, it is ViewStub removed from the view, replaced by the corresponding layout layout, and retains the ViewStub property effect set on it.

ViewStub viewstub = findViewById(R.id.viewstub);viewstub.inflate();

This article about include , merge and ViewStub use is introduced here, the specific use of the situation depends on the project.

Finally attach GitHub address Https://github.com/taixiang/include

Welcome to follow my blog: https://blog.manjiexiang.cn/
More welcome attention number: Spring Breeze ten miles Better know you

Android layout Smart Use of include, merge, Viewstub