LiveData+DataBinding bi-directional binding

The demo to do is to enter a page, using the viewModel in the LiveData data, the input box to modify, through two-way binding, LiveData data also changed, in the time of submission, directly submit the LiveData data can be.

Add the required dependencies

implementation "androidx.lifecycle:lifecycle-viewmodel:2.0.0"
implementation "androidx.lifecycle:lifecycle-extensions:2.0.0"

Create a simple viewModel

class MyViewModel: ViewModel() {
    var data = MutableLiveData<InfoBean>()
}

MainActivity code as follows, create the viewModel object and dataBinding object, and set the initial data

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        var dataBinding: ActivityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        dataBinding.lifecycleOwner = this
        var viewModel = ViewModelProviders.of(this).get(MyViewModel::class.java)
        dataBinding.viewModel = viewModel

        viewModel.data.value = InfoBean(28, 178)

        btnPost.setOnClickListener {
            Toast.makeText(applicationContext, "After modification Age：${viewModel.data.value?.age}  Height：${viewModel.data.value?.height}", Toast.LENGTH_SHORT).show()
        }
    }
}

Using bi-directional binding in layout files

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable
            name="viewModel"
            type="com.example.databindingex.MyViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <TextView
            android:id="@+id/tvAge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="age："
            android:textSize="16sp"
            android:textColor="@color/black"
            android:layout_marginTop="50dp"
            android:layout_marginLeft="60dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/etAge"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text='@={viewModel.data.age+""}'
            android:textSize="16sp"
            android:textColor="#000"
            android:inputType="number"
            app:layout_constraintTop_toTopOf="@id/tvAge"
            app:layout_constraintBottom_toBottomOf="@id/tvAge"
            app:layout_constraintLeft_toRightOf="@id/tvAge"
            android:layout_marginLeft="20dp"/>

        <TextView
            android:id="@+id/tvHight"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Height："
            android:textSize="16sp"
            android:textColor="@color/black"
            android:layout_marginTop="50dp"
            android:layout_marginLeft="60dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@id/tvAge"/>

        <EditText
            android:id="@+id/etHeight"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text='@={viewModel.data.height+""}'
            android:textSize="16sp"
            android:textColor="#000"
            android:inputType="number"
            app:layout_constraintTop_toTopOf="@id/tvHight"
            app:layout_constraintBottom_toBottomOf="@id/tvHight"
            app:layout_constraintLeft_toRightOf="@id/tvHight"
            android:layout_marginLeft="20dp"/>

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_margin="40dp">

            <Button
                android:id="@+id/btnPost"
                android:layout_width="match_parent"
                android:layout_height="45dp"
                android:text="submit"
                android:gravity="center" />
        </ScrollView>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Why can achieve two-way binding it? My guess here is: first of all, the LiveData listener can achieve a direction of listening. And databinding through automatically generated code, found this with Edittext two-way, will generate edittext’s addTextChangeListener event listener thus realizing data change to modify the value of liveData.