LiveData+DataBinding双向绑定

作者: 奔跑吧李博 | 来源:发表于2021-03-19 16:59 被阅读0次

该demo要做的事是,在进入一个页面,使用viewModel中的LiveData数据,对输入框进行修改,通过双向绑定,LiveData数据也随之改变,在提交的时候,直接提交该LiveData数据即可。

小demo演示效果:
1.添加需要用到的依赖:
    implementation "androidx.lifecycle:lifecycle-viewmodel:2.0.0"
    implementation "androidx.lifecycle:lifecycle-extensions:2.0.0"
2.创建简单的viewModel
class MyViewModel: ViewModel() {
    var data = MutableLiveData<InfoBean>()
}
3.MainActivity代码如下,创建viewModel对象和dataBinding对象,并设置初始数据。
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, "修改后 年龄:${viewModel.data.value?.age}  身高:${viewModel.data.value?.height}", Toast.LENGTH_SHORT).show()
        }
    }
}

在布局文件中使用双向绑定:

<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="年龄:"
            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="身高:"
            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="提交"
                android:gravity="center" />
        </ScrollView>

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

为什么能实现双向绑定呢?我这里猜想是:首先LiveData的监听能实现一个方向的监听。而databinding通过自动生成的代码,发现这个有了Edittext的双向,就会生成edittext的addTextChangeListener事件监听从而实现数据改变修改liveData的值。

相关文章

  • LiveData+DataBinding双向绑定

    该demo要做的事是,在进入一个页面,使用viewModel中的LiveData数据,对输入框进行修改,通过双向绑...

  • Vue 中的双向数据绑定

    双向绑定 单向数据流 双向绑定 or 单向数据流 Vue 是单向数据流,不是双向绑定 Vue 的双向绑定是语法糖 ...

  • vue2.0双向绑定的使用及简单实现

    v-model双向绑定用法input的双向绑定 chechbox(利用value值) v-model双向绑定简单实...

  • Vue之表单双向数据绑定和组件

    三、表单双向数据绑定和组件 目录:双向数据绑定、组件 1.双向数据绑定 1)什么是双向数据绑定Vue.js是一个M...

  • vue 面试汇总(更新中...)

    1.说说对双向绑定的理解 1.1、双向绑定的原理是什么 我们都知道Vue是数据双向绑定的框架,双向绑定由三个重要部...

  • 深入Vue响应式原理

    1.Vue的双向数据绑定 参考 vue的双向绑定原理及实现Vue双向绑定的实现原理Object.definepro...

  • [转] DataBinding 数据绑定

    数据绑定分为单项绑定和双向绑定两种。单向绑定上,数据的流向是单方面的,只能从代码流向 UI;双向绑定的数据是双向的...

  • Vue双向数据绑定v-model

    v-model 数据双向绑定用作双向数据绑定 一、组件内部双向数据绑定 1、在实例的data中,设置content...

  • 「1分钟--前端01」vue双向绑定

    目录 ⊙常见双向绑定的实现方法 ⊙基于数据劫持双向绑定的优点 ⊙基于Object.defineProperty双向...

  • 02Vue.js的数据绑定

    理解Vue的双向数据绑定 Vue有一个显著的地方就是它拥有双向数据绑定功能,那么何为双向数据绑定呢?双向是指:HT...

网友评论

    本文标题:LiveData+DataBinding双向绑定

    本文链接:https://www.haomeiwen.com/subject/jcvioktx.html