Android DataBinding双向绑定使用

最新推荐文章于 2024-09-26 21:41:33 发布
最新推荐文章于 2024-09-26 21:41:33 发布
阅读量631 收藏 4
点赞数 1
分类专栏： android 双向绑定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43298955/article/details/115499176
版权

  Android双向绑定的好处就不再介绍了，直接上使用方法的代码。以下展示Demo1-3，使用方式从简到繁。

双向绑定使用Demo1：简单双向绑定

  我们使用ObservableField与EditView展示双向绑定。使用方式如下，将此ObservableField<String>与一个EditView进行双向绑定（使用@={}），当视图EditView中的文字变化时，ObservableField中数据也会随着变化。ObservableField中的数据变化，也会造成EditView中文字的变化。在此，ObservableField中的数据与EditView中的文字是相同的，不好展示ObservableField中发生的变化，所以，我们使用一个额外的TextView展示ObservableField中发生变化的数据

  xml文件

<?xml version="1.0" encoding="utf-8"?>
<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"
    xmlns:MyView="http://schemas.android.com/apk/res-auto">

    <data>
        <variable
            name="userVM"
            type="com.example.jetpacklearn.viewModel.UserViewModel" />
    </data>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <EditText
            android:layout_width="60dp"
            android:layout_height="wrap_content"
            android:id="@+id/userName"
            android:text="@={userVM.name}"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/showName"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/showName"
            android:text="@{userVM.name}"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/userName"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintEnd_toEndOf="parent"/>


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

  在这里，使用@={}进行双向绑定，即EditView中文字的变化会同步到数据源userVM.name，userVM.name中数据的变化会同步到EditView。以下为UserViewModel的代码：

class UserViewModel:ViewModel() {
    var name:ObservableField<String> = ObservableField("")
    var age:ObservableInt = ObservableInt(10)
}

Activity的代码如下：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        var layoutInflater = LayoutInflater.from(this)
        var dataBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(dataBinding.root)

        var userViewModel = ViewModelProvider(this).get(UserViewModel::class.java)
        dataBinding.userVM = userViewModel
    }
}

运行结果如图：

双向绑定使用Demo2:自定义数据结构的双向绑定

  在实际中，我们使用的可能是自定义的数据，而非基本类型数据，这样就不能直接使用ObservableInt等基本数据类。因此，在自定义数据类时，需要使数据类继承BaseObservable，以便在数据变化时通知观察者。下面以一个Person数据类进行展示，首先，定义一个Person的data类。然后，定义一个PersonViewModel，其内部含有Person对象，并继承BaseObservable，以便在数据变化时，可以发送通知。

Person数据类

data class Persion(var name:String,var age:Int) {
}

PersonViewModel类

class PersionViewModel : BaseObservable(){
    var persion = Persion("Jack",19)

    @Bindable
    fun getPersionName():String{
        return persion.name
    }

    fun setPersionName(name:String){
        if(name!=persion.name){
            //避免设置数据时的无限循环
            persion.name = name
            //发送数据变化通知
            notifyPropertyChanged(BR.persionName)
        }
    }

    @Bindable
    fun getPersionAge():Int{
        return persion.age
    }

    fun setPersionAge(age:Int){
        if(age!=persion.age){
            persion.age = age
            notifyPropertyChanged(BR.persionAge)
        }
    }
}

  在这个类中，要使用@Bindable注解get方法，并且要在set方法中调用notifyPropertyChanged，以在数据变化时，通知观察者。BR.persionName是编译之后生成的。@Bindable的作用是告诉数据绑定系统如何读取PersonViewModel中的数据。PersonViewModel的使用代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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"
    xmlns:MyView="http://schemas.android.com/apk/res-auto">

    <data>
        <variable
            name="userVM"
            type="com.example.jetpacklearn.viewModel.UserViewModel" />

        <variable
            name="persionVM"
            type="com.example.jetpacklearn.viewModel.PersionViewModel" />
    </data>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <EditText
            android:layout_width="60dp"
            android:layout_height="wrap_content"
            android:id="@+id/userName"
            android:text="@={userVM.name}"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/showName"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/showName"
            android:text="@{userVM.name}"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/userName"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintEnd_toEndOf="parent"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/persionLinearLayout"
            android:orientation="vertical"
            app:layout_constraintTop_toBottomOf="@+id/userName"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent">

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

                <EditText
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/persionName"
                    android:text="@={persionVM.persionName}"/>

            </LinearLayout>

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

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/showPersionName"
                    android:text="@{persionVM.persionName}"/>
            </LinearLayout>

        </LinearLayout>
</layout>

  Activity类如下：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        var layoutInflater = LayoutInflater.from(this)
        var dataBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(dataBinding.root)

        var userViewModel = ViewModelProvider(this).get(UserViewModel::class.java)
        dataBinding.userVM = userViewModel

        var persionVM = PersionViewModel()
        dataBinding.persionVM = persionVM
    }
}

  运行结果如下：

双向绑定Demo3:自定义视图的双向绑定

  在实际中，可能需要自定义View，这时，可能想对自定义View中的某个属性进行双向绑定。例如，定义一个记录点击次数的MyTextView，此视图中包含一个用来记录点击次数的变量。视图代码如下：

  MyTextView代码

class MyTextView: androidx.appcompat.widget.AppCompatTextView {

    //记录点击次数
    private var clickTime:Int = 0

    constructor(context:Context):super(context){}

    constructor(context: Context,attributeSet: AttributeSet):super(context,attributeSet){}

    constructor(context: Context,attributeSet: AttributeSet,defStyleAttr:Int):super(context,attributeSet,defStyleAttr){}

    fun setClickTime(newValue:Int){
        if(clickTime!=newValue){
            clickTime = newValue
        }
    }

    fun getClickTime():Int{
        return clickTime
    }
}

  首先，需要设置clickTime属性的get和set方法，因为在双向绑定中既要读数据，又要写数据。然后，使用注解告诉数据绑定系统如何从MyTextView中读写数据。代码如下：

//告知数据绑定系统如何写clickTime属性
@BindingMethods(value = [BindingMethod(type = MyTextView::class, attribute = "clickTime",method = "setClickTime") ])
//告知数据绑定系统调用哪个方法读取clickTime属性。此注解需要一个method,默认是get+属性名的方法，在此使用默认值
//此注解需要一个event,默认为属性名+AttrChanged，在此使用默认值
@InverseBindingMethods( value = [ InverseBindingMethod(type = MyTextView::class,attribute = "clickTime") ] )
class MyViewBindingAdapter {
}

//BindingAdapter、InverseBindingAdapter与上面的BindingMethods、InverseBindingMethods作用相同，
//都是告知数据绑定系统如何读写MyTextView中的clickTime，所以，只需设置一组就好

//@BindingAdapter("clickTime")
//fun setClickTime(myTextView: MyTextView,clickTime:Int){
//    myTextView.setClickTime(clickTime)
//}
//@InverseBindingAdapter(attribute = "clickTime",event = "clickTimeAttrChanged")
//fun getClickTime(myTextView: MyTextView):Int{
//    return myTextView.getClickTime()
//}

//通过此注解，来为属性添加一个监听器listener，监听属性的变化，此listener是编译器自动生成的。
//总的来说，最终还是要通过一些onClick、onTouch、TextWatcher等监听方法来监听自定义属性的变化。
@BindingAdapter("app:clickTimeAttrChanged")
fun setClickTimeAttrChanged(myTextView: MyTextView, listener: InverseBindingListener){
    //监听属性clickTime的变化
    myTextView.setOnClickListener {
        var clickTime = myTextView.getClickTime() + 1
        myTextView.setClickTime(clickTime)
        //使用listener发送属性变化通知
        listener.onChange()
    }
}

  为了在xml文件中使用clickTime属性，需要先在values文件夹下建立一个styleable文件，文件如下：

<resources>
    <declare-styleable name="MyTextView" >
        <attr name="clickTime" format="integer"></attr>
    </declare-styleable>
</resources>

  这样就可以在xml文件中对MyTextView的clickTime进行双向绑定了，xml文件如下：

<?xml version="1.0" encoding="utf-8"?>
<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"
    xmlns:MyView="http://schemas.android.com/apk/res-auto">

    <data>
        <import type="com.example.jetpacklearn.BindingKt"/>
        <variable
            name="userVM"
            type="com.example.jetpacklearn.viewModel.UserViewModel" />

        <variable
            name="persionVM"
            type="com.example.jetpacklearn.viewModel.PersionViewModel" />

        <variable
            name="clickNum"
            type="androidx.databinding.ObservableInt" />
    </data>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <EditText
            android:layout_width="60dp"
            android:layout_height="wrap_content"
            android:id="@+id/userName"
            android:text="@={userVM.name}"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/showName"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/showName"
            android:text="@{userVM.name}"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/userName"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintEnd_toEndOf="parent"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/persionLinearLayout"
            android:orientation="vertical"
            app:layout_constraintTop_toBottomOf="@+id/userName"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent">

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

                <EditText
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/persionName"
                    android:text="@={persionVM.persionName}"/>

            </LinearLayout>

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

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/showPersionName"
                    android:text="@{persionVM.persionName}"/>
            </LinearLayout>

        </LinearLayout>

        <com.example.jetpacklearn.view.MyTextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:id="@+id/myTextView"
            android:text="@{BindingKt.intToString(clickNum)}"
            android:gravity="center"
            MyView:clickTime = "@={clickNum}"
            app:layout_constraintTop_toBottomOf="@+id/persionLinearLayout"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

  使用MyView:clickTime="@={clickNum}"，进行双向绑定，并使用text="@{BindingKt.intToString（clickNum）}"来展示点击的次数。

  Activity类如下：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        var layoutInflater = LayoutInflater.from(this)
        var dataBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(dataBinding.root)

        var userViewModel = ViewModelProvider(this).get(UserViewModel::class.java)
        dataBinding.userVM = userViewModel

        var persionVM = PersionViewModel()
        dataBinding.persionVM = persionVM

        //设置MyTextView的clickTime的数据源
        var clickNum = ObservableInt(0)
        dataBinding.clickNum = clickNum
    }
}

  这样，当我们点击MyTextView时，通过之前设置的点击监听器，使clickTime加一。然后，发出属性变化通知，使clickNum（ObservableInt）的数据也加一。最后，使用android:text属性，展示clickNum中的数据。

  运行结果如下：

  总结，在上面，分别展示了简单的数据双向绑定、自定义数据结构的双向绑定、自定义视图属性的双向绑定。

  相关博客：

DataBinding双向绑定注解

DataBinding双向绑定原理

weixin_43298955
关注
专栏目录
Android databinding 双向绑定（Demo）
Clare_Ju的博客
09-21 4031
ide ： android Studio gradle ：com.android.tools.build:gradle:2.1.3 效果图 上面是EditText 下面是 TextView，在EditText输入内容，textview 内容跟随首先实体类，作者亲测以下两种方式public class People { public ObservableField life = new
DataBinding双向绑定
mini_Liu的博客
12-17 555
Android Databinding双向绑定
Android databinding 双向绑定
09-21
Android databinding 双向绑定， 效果展示请见：http://blog.csdn.net/Clare_Ju/article/details/52609180
Android 安卓DataBinding（六）·双向绑定(3)
2401_84909743的博客
05-10 1019
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Android DataBinding的使用
最新发布
hcgeng的专栏
09-26 1317
本文是用来简记DataBinding使用前的配置及一些情况下的使用。默认情况下，生成的Binding类的名称是布局文件去除下划线、()，所有单词首字母大写（被下划线分割的视为一个单词）。然后再后面加上Binding。被放置在build\generated\source\apt\debug\项目包名\databinding包下。自定义Binding类名称：...更换生成的Binding类所在的包：直接在刚刚的指定的名称前指定包名就可以了。...
Databinding 双向绑定详解
weixin_34049948的博客
04-11 887
图片来自必应 Databinding官方文档 Android-Architecture-Components官方文档 Databinding是Google推出的一个支持View与ViewModel绑定的Library，可以说Databinding建立了一个UI与数据模型之间的桥梁，即UI的变化可以通知到ViewModel, ViewModel的变化同样能够通知到UI从而使UI发生改变，大大减...
Android DataBinding的官方双向绑定示例
08-29
本篇文章主要介绍了Android DataBinding的官方双向绑定示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Android - AndroidStudio自定义代码模板(2)
2401_84149845的博客
05-09 396
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Databinding的双向绑定
qq_25330791的博客
03-19 1193
在Android Studio 2.1 Preview 3之后，官方开始支持双向绑定了。 什么是双向绑定呢？ 下面是Data Binding的基本使用： <layout ...> <data> <variable type="com.example.myapp.User" name="user"/> </data> <RelativeLayout ...> <EditText android:text="@{us...
Android DataBinding 双向数据绑定、事件绑定、使用类方法
xiaowu 专栏
06-14 4590
Android DataBinding 双向数据绑定、事件绑定、使用类方法 一、Android DataBinding 基础使用 二、Android DataBinding单向绑定 双向数据绑定 双向绑定的意思即为当数据改变时同时使视图刷新，而视图改变时也可以同时改变数据 看以下例子，当 EditText的输入内容改变时，会同时同步到变量 user,绑定变量的方式比单向绑定多了一个等号：and...
Android - 双向绑定
搬砖
04-05 1647
Android 双向数据绑定
android 双向绑定
day_moon的博客
11-27 370
【代码】android 双向绑定。
DataBinding的使用之双向绑定
qq_40698103的博客
04-29 2512
DataBinding的双向绑定，可以实现控件和数据的双向绑定，比如在登陆场景下，如果你使用了一个UserModel来保存数据，当你修改UserModel中的字段时，Edittext会自动更新。并且，当你修改Edittext的输入内容时，UserModel也能得到同步修改 xml: <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/andro
Android 安卓DataBinding（六）·双向绑定(2)
2401_84903902的博客
05-10 911
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Android数据双向绑定
不积跬步无以至千里，不积小流无以成江海。一个喜欢学习分享的程序员
11-11 2248
安卓的数据双向绑定类似Vue这种前端框架，只要修改模型的数据，页面上显示的数据也会跟着变化，不需要取出控件来赋值。
Android使用DataBinding实现双向绑定（一）
Huawen的博客
02-23 2143
前面一段时间学习了一下Android中的DataBinding，但是只是很简单地实现了一下，DataBinding中最强大的地方还没有认真地学习过，有很多地方还不理解。这次，深入学习一下DataBinding的双向绑定和MVVM模式。1、实现简单的使用　　先回顾一下简单的使用，使用的时候需要在模块的build.gradle文件中添加这一句：dataBinding{ enabled=true
认识Android中的双向绑定
zwenkai
09-18 4983
转载请标明出处：http://blog.csdn.net/xuehuayous/article/details/81100571； 本文出自:【Kevin.zhou的博客】 前言：在和一些朋友&amp;网友聊的过程中，发现很多人对于Android中的双向绑定还不太了解，所以MVVM架构就比较难以向大家描述清楚，那么先来了解一下Android中的双向绑定。 什么是双向绑定 双向绑定到底是什...
Android DataBinding官方双向绑定详解
"这篇教程详细解释了Android DataBinding框架中的官方双向绑定功能，适用于Android Studio 2.1 Preview 3及更高版本。虽然Google官方文档尚未包含这部分内容，但通过这篇文章，开发者可以学习如何实现数据模型与视图...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值