Detailed explanation and use of layout include and viewStub of Android DataBinding (6)

1. Introduction

        In the previous chapters, we have systematically studied the binding of layout and data, which are all related to the more detailed parts of layout and data. In this chapter, we still introduce a frequently used two layout include and viewStub

2. Introduction

1、include

                Layout import, which is often encountered in our development process, extracts a common component view into a layout, and then uses include to come in. This makes it easier for us all to collaborate on development. If we manage it through databind, it's very official. As long as we give the data module to the include layout, we don't need to manage the layout, but only need to process the data separately.

1.1. Root layout

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

    <data class="MyConstan">


        <import type="androidx.databinding.ObservableField" />


        <variable
            name="name"
            type="ObservableField&lt;String&gt;" />

    </data>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <Button
            android:id="@+id/btn_bind"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="单向绑定"
            />

        <include
            layout="@layout/view_db_include"
            bind:name="@{name}" />

    </LinearLayout>


</layout>

include sub-layouts:

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

    <data>


        <import type="androidx.databinding.ObservableField" />


        <variable
            name="name"
            type="ObservableField&lt;String&gt;" />

    </data>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="include module" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:text="@{name}" />

    </LinearLayout>
</layout>

Layout data interaction:

If the variable data type is defined under the sub-layout data node, then this data is the extension field of the root layout include

Sub layout:

 <variable
            name="name"
            type="ObservableField&lt;String&gt;" />

Root layout: bind:name="@{name}"

        The data format should correspond. In this way, data can be bound and associated, supporting one-way and two-way binding of data. When binding data, you only need to set the data data of the root layout.

2、ViewStub

        ViewStub is also often used in the development process of large-scale and responsible layout business, that is, reloading after use, which can improve device performance. Reduce unnecessary memory overhead

In Data Binding, the binding of ViewStub is also supported

root layout:

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

    <data class="MyConstan">


        <import type="androidx.databinding.ObservableField" />


        <variable
            name="name"
            type="ObservableField&lt;String&gt;" />

    </data>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <Button
            android:id="@+id/btn_bind"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="单向绑定"
            />


        <ViewStub
            android:id="@+id/viewsub"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout="@layout/view_db_viesub"
            bind:user="@{name}"
           />

    </LinearLayout>


</layout>

Layout to be loaded:

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

    <data class="ViewSubData">


        <import type="androidx.databinding.ObservableField" />


        <variable
            name="user"
            type="String" />

        <!--        <variable-->
        <!--            name="user"-->
        <!--            type="ObservableField&lt;String&gt;" />-->

    </data>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="viewSub module" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:text="@{user}" />

    </LinearLayout>
</layout>

How to load the layout?

var inflatView: View? = null
if (!bind.viewsub.isInflated) {
    inflatView = bind.viewsub.viewStub?.inflate()!!
}

Data binding:

        The data binding of viewstub is also divided into two methods:

1. Bind directly in the layout

It is also mapped through the extension field,

  <ViewStub
            android:id="@+id/viewsub"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout="@layout/view_db_viesub"
            bind:user="@{name}"
           />

        There is a problem here. If the root data is ObservableField<String>, we normally need to set the data to be loaded as ObservableField<String>. However, when the Impl data is converted, the data is converted.

        So you don't receive data through ObservableField alone in the layout to be loaded. If you don't know how to handle it well, you can update it through an object. Or use the second method below to deal with

2. Binding in code

Let's first bind the layout to be loaded

var subData = DataBindingUtil.bind<ViewSubData>(inflatView!!)

ViewSubData: is the layout data class to be loaded.

inflatView：viewStub.inflate的 root

Note: The class name can be set for both the layout to be loaded and the include layout, which will not affect the setting of the root layout class

Data binding:

1.setVariable

subData?.setVariable(BR.user, text)

2. Set data directly

var name = ObservableField<String>()
subData?.user=name

explain:

        If you set data through code, it is a type that supports ObservableField, but in the xml layout, it will be processed and converted. Remember, if you want one-way binding, you can set it through code

setVariable introduction:

        The variable applied by setVariable will also generate the flag field of the benchmark in BR. This field is the same as Bindable, so you can also set setVariable to point to the declared field and the corresponding data binding is also possible.

3. Summary

In this way, we have completed the introduction and use of include and ViewStub, but ViewStub should be especially careful when binding data. If you fail to check the data binding of xml ViewStub, you can control it through code

After loading the ViewStub to be loaded, assign the value directly through the code.        

Both the sub-layout and the layout data to be loaded can have their own class names. After setting, it will not affect the setting of the data class of the root layout.