Android DataBinding基础入门

1.前言

在一个公司呆久了就容易陷入安逸期，技术方面也是如此，很容易止步不前，想要推翻项目原有架构技术重构更是困难重重，但是作为一名程序员，只有不断学习才不会被淘汰，或者说才能跟上行业发展的节奏。

现在对于Android开发来讲，随着行业发展越来越成熟，对人才的要求也越来越高，面试的问题也越来越深，更多是偏向于新技术或者老技术原理性的东西，所以今年准备好好学习下这些，一则为了提高自己的技术能力，这个是非常必要的，二来可以跟上步伐，以应对未来的一切突发状况，因为只有自己变得强大，才有话语权和选择权，所以各位加油吧！

databinding这个词相信很多人并不陌生，很早就见过它，也看过一些博客教程等等，但是并没有实际去使用，后来也就慢慢搁置，其实看名字就可以知道它是个什么东西，就是数据绑定嘛，那么为什么会出现这么个东西，原始的MVC它不香么？是的，它确实不香，各种耦合使得牵一发而动全身，一个activity上千上万行，业务逻辑在其中到处游走，以至于项目越来越臃肿，那么咋办？不要问，问就是重构。

重构是不可能重构的，没事喝杯茶它不香么？正在喝茶期间，突然发现MVP模式已经火了起来，那还等什么，人家有的我都要有，于是MVP开始大放异彩，各种MVP教程满天飞，对于MVP的讨论也越来越多，优缺点也很明显，优点呢，就是项目的耦合度有所降低，它将数据（Model）、视图（View）、控制（Presenter）分开，实现了松耦合。

• View接受事件，传递给Presenter
• Presenter做逻辑处理，修改Model
• Model通知Presenter数据变化，Presenter更新View

看起来非常完美，但是世界上没有什么东西是完美的，它存在如下缺点：

• 与MVC一样，P层起到的控制功能伴随着业务的增多，也会变得臃肿。
• Presneter需要持有View的引用，同时View也需要持有Presenter的引用，控制上存在一定复杂度。

俗话说的好，知足常乐，有点缺点就算了吧，不要斤斤计较，但是对于程序员来讲，都有强迫症，虽然凑合着用吧，但是肯定心里有点不舒服，所以MVVM模式来了，不学习看来真不行，特别是一打开技术博客各种MVVM的文章满天飞的时候。

太难了，终于扯到了今天的主题，MVVM实现了数据与UI的双重绑定，其中DataBinding是实现MVVM的工具，借用网上的一张图来看下MVVM是个什么东西：

M代表了Model，还是负责处理数据层的东西，V代表了View，也就是页面，VM代表了ViewModel，这里有个新引入的东西ViewModel，它是databinding数据绑定的关键所在，下面先介绍一下它。

2.ViewModel

ViewModel官方释义：感知生命周期的形式来存储和管理视图相关的数据。

ViewModel的生命周期很长，存在于所属对象（Activity，Fragment）的全部生命周期，可以与jetpack其他组件很方面的结合使用，另外比如activity横竖屏切换，它依然可以保持数据不丢失，也可以用于同一activity下fragment的数据共享。

3.databinding具体使用

下面我们就结合databinding和ViewModel来看看基本使用方式，首先引入相关库：

// viewModel
implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.3.0'
复制代码

设置databinding支持：

//老版使用这个
/*dataBinding{
        //noinspection DataBindingWithoutKapt
        enabled = true
  }*/

//新版用这个
buildFeatures{
    dataBinding = true
}
复制代码

如果使用kotlin，还需要添加kotlin-kapt插件：

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'kotlin-kapt'
}
复制代码

此时切换到layout布局，鼠标放在ConstraintLayout，Alt+Enter键会出现如下提示：

继续按回车键，布局就转换为了databinding模式，形如：

<?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">

    <data>
		//这边用来引入viewmodel类，用于和布局绑定
    </data>

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

        //·····

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>
复制代码

此时我们可以新建一个类继承ViewModel，并设置一个userName变量，用于测试数据绑定：

class MyMainModel : ViewModel() {
    var userName = "张三"
}
复制代码

然后修改layout布局，引入MyMainModel类，并且把userName设置到Textview上：

<?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">

    <data>
		//导入MyMainModel类
        <import type="com.xinshiyun.mvvmblog.MyMainModel"/>

		//这边相当于引入数据类，用于绑定布局
        <variable
            name="viewModel"
            type="MyMainModel" />

    </data>

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

        <TextView
            android:id="@+id/tv_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textColor="@color/black"
            android:text="@{viewModel.userName}"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/btnChange"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textColor="@color/black"
            android:layout_marginTop="10dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tv_name"
            android:text="change"
            />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>
复制代码

我在TextView下面添加了个Button按钮，点击按钮修改MyMainModel中userName的值，由于数据和布局是绑定的，此时应该布局显示应该会更新，在activity中获取viewmodel，采用如下方式：

ViewModelProvider(this).get(MyMainModel::class.java)
复制代码

获取databinding实例如下：

DataBindingUtil.setContentView(this, R.layout.activity_main)
复制代码

那么此时activity代码如下：

class MainActivity : AppCompatActivity() {
    private lateinit var myMainModel: MyMainModel
    private lateinit var activityMainBinding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        activityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        myMainModel = ViewModelProvider(this).get(MyMainModel::class.java)
        activityMainBinding.viewModel = myMainModel

        initView()
    }

    private fun initView() {

        findViewById<Button>(R.id.btnChange).setOnClickListener {

            myMainModel.userName = "我是改变后的值：李四"
            activityMainBinding.viewModel = myMainModel
        }
    }
}
复制代码

来，运行下，看看效果：

有那么回事了，通过databinding修改布局中绑定的viewmodel类的值，就可以自动更新ui，这也就是我们看到的单向绑定，何为单向，意思就是数据改变，布局改变，那既然有单向，肯定有双向，是的，双向则是指相互可以更新，我们用EditText来演示下，修改下布局：

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:hint="请输入"
    android:text="@={viewModel.userName}"
    app:layout_constraintBottom_toTopOf="@+id/tv_name"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />
复制代码

单向绑定采用@{}的形式设置数据，双向使用@={}，中间加了个=号，activity代码也相应修改下：

插播一下，写着写着发现findViewById太烦了，索性添加了如下插件：

id 'kotlin-android-extensions'
复制代码

此时就可以直接使用布局中的id作为组件对象，太嗨皮了！！

咱们接着修改activity代码：

editText.addTextChangedListener {
    Log.e("userName","new userName = ${activityMainBinding.viewModel!!.userName}")
}
复制代码

来看看效果：

因为我们把userName和Edittext进行了双向绑定，所以我们在修改EditText的时候，相应的数据源也会发生改变，我们把viewModel给打印了出来，可以发现此时数据是一直在变的，我们再修改下代码：

editText.addTextChangedListener {
    Log.e("userName","new userName = ${activityMainBinding.viewModel!!.userName}")
	//加上这句，Edittext变化后通知更新Textview
    activityMainBinding.viewModel = myMainModel
}
复制代码

效果如下：

注意：

1.类名字重复，使用别名

如果导入的类名字重复，可以使用别名alias指定别名

<data>
    <import type="com.xinshiyun.mvvmblog.MyMainModel" 
        alias="AliasName"
        />

    <variable
        name="viewModel"
        type="AliasName" />
</data>
复制代码

2.多variable

可以指定多个variable，如果使用<>，需要使用转义字符：

<data>
    <import type="java.util.List" />
    <import type="com.xinshiyun.mvvmblog.MyMainModel" />

    <variable
        name="list"
        type="List&lt;MyMainModel&gt;" />

    <variable
        name="viewModel"
        type="MyMainModel" />
</data>
复制代码

3.修改databinding名字

默认的Binding类生成的规则是：xml的名称去掉下划线，再首字母大写，最后尾部加个Binding，当然这个事可以自定义的，使用class关键字来修改，形如：

<data class="BindingName">
</data>
复制代码

4.绑定方法

三种方式：

• 普通方法调用：android:onClick="@{()->viewModel.clickMe()}"

fun clickMe(){
    Log.e("click","click me -- 方法")
}
复制代码

• 双冒号调用：android:onClick="@{viewModel::clickMe}"

fun click(view: View){
    Log.e("click","click me: $view, 使用::调用，方法定义需要与接口参数一致")
}
复制代码

• 变量调用：android:onClick="@{viewModel.clickMe}"

val clickMe = View.OnClickListener {
    Log.e("click", "click me -- 变量")
}
复制代码

5.转换器

如果我们想要对某类数据进行单独处理，比如想在所有字符串后面添加（试用版）标识，那么就可以使用转化器BindingConversion，具体使用方式如下，定义：

object ConvertionTest {

    @JvmStatic
    @BindingConversion
    fun convert(value: String?) = "${value}(试用版)"
}
复制代码

效果：

我们设置username后，在绑定更新ui的时候结尾会自动加上(试用版)几个字。

6.自定义属性绑定方法

一、在view中，如果提供setXxxx方法，就有xxxx属性，我们可以直接在layout中使用该属性，比如selected属性，Textview在布局中并没有提供此属性，但是代码中有setSelected方法，所以我们可以这么用：

app:selected="@{true}"
复制代码

鼠标放上去按住ctrl键，可以看到相关属性和方法：

二、自定义属性绑定方法

比如我们想要自定义一个TextView，一旦TextView文本有变化，就弹出toast，那么我们可以这样做，使用@BindingMethods注解，定义自定义属性：

@BindingMethods(
    value = [
        BindingMethod(
            type = TextView::class,
            attribute = "showToast",
            method = "show"
        )]
)
class MyTextView(context: Context?, attrs: AttributeSet?) :
    AppCompatTextView(context!!, attrs) {

    fun show(toastStr: String) {
        Toast.makeText(context, "哈哈哈,$toastStr", Toast.LENGTH_LONG).show()
    }
}
复制代码

attribute对应的就是xml中的属性，method则对应我们自定义的show方法，我们在xml中使用它：

<com.xinshiyun.mvvmblog.MyTextView
    android:id="@+id/tv_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@{viewModel.userName}"
    android:textColor="@color/black"
    android:textSize="20sp"
    app:showToast="@{viewModel.userName}"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
复制代码

看下效果：

通过 BindingMethod 注解，可以自定义属性名，并绑定指定方法。当绑定的数据变化时，会自动调用该方法。

7.自定义多属性绑定

@BindingAdapter这个注解用于支持自定义属性，或者是修改原有属性。注解值可以是已有的 xml 属性，例如 android:src、android:text等，也可以自定义属性然后在 xml 中使用，我们都知道imageview并不支持直接加载网络图片，那么我们在使用databinding的时候，可以通过自定义属性的方式实现此功能，只需指定图片地址即可实现自动加载图片，那么实现起来也很简单，通过BindingAdapter自定义一个imageUrl属性：

class ImageLoader {
    companion object {
        @JvmStatic
        @BindingAdapter("imageUrl", "placeholder", "error",requireAll = false)
        fun loadImageView(
            imageView: ImageView,
            url: String?,
            drawHolder: Drawable?,
            error: Drawable?
        ) {
            Glide.with(imageView).load(url).into(imageView)
        }
    }
}
复制代码

可以看到我们定义了imageUrl，placeholder，error等属性，当然你可以随便添加其他需要的属性，这边还设置了requireAll为false，它的含义是设置可以不配置所有属性，意思就是如果requireAll为true，需要指定全部自定义的属性，那么我们看下如何使用此属性：

<ImageView
    android:layout_width="200px"
    android:layout_height="200px"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/editText"
    imageUrl="@{`https://hbimg.huabanimg.com/52c4c08a08e719e1e2cad797fe53feb97917b6fa441d-I5Yl20_fw658/format/webp`}"
    />
复制代码

也很简单，指定需要的参数和属性即可，然后运行看下效果：

可以看到，图片已经加载并显示出来了，此处仅仅抛砖引玉，你可以充分发挥自己的灵感，做其他任何类似的事情。

4.结合LiveData使用

首先，LiveData是什么呢？LiveData是一个可以被观察的数据持有类，它可以感知 Activity、Fragment或Service等组件的生命周期，它有如下优点：

• 在组件处于激活状态的时候才会回调相应的方法，从而刷新相应的ui;

• 避免了内存泄漏；

• 当config导致activity重新创建的时候，不需要手动去处理数据的储存和恢复，它已经帮我们封装好了；

先看个简单的例子吧，首先引入LiveData库：

 // liveData
 api 'androidx.lifecycle:lifecycle-livedata-ktx:2.3.0'
复制代码

然后在mainviewModel中加入如下代码：

//新建一个数据类Student，测试用
data class Student(val name: String)

class MyMainModel : ViewModel() {
    val studentLiveData = MutableLiveData<Student>()
    ······
}

复制代码

然后我们在MainActivity中获取viewmodel实例，并且为studentLiveData添加监听，此时一旦有数据变化，并且activity处于活跃状态下，就会回调observe，来看关键代码：

myMainModel = ViewModelProvider(this).get(MyMainModel::class.java)
activityMainBinding.viewModel = myMainModel

myMainModel.studentLiveData.observe(this, Observer {
    //数据有更新/变化
    myMainModel.userName = it.name
    activityMainBinding.viewModel = myMainModel
})
复制代码

然后我们模拟一下数据请求：

private fun loadData() {
    launch {
        withContext(Dispatchers.IO) {
            delay(2000)
        }

        val student = Student("我是新来的学生")
        myMainModel.studentLiveData.postValue(student)
    }
}
复制代码

当我们点击按钮的时候，开始执行loadData方法：

findViewById<Button>(R.id.btnChange).setOnClickListener {
    loadData()
}
复制代码

然后我们看下效果：

可以发现，我们点击按钮2秒后，通过postValue方法更新了studentLiveData的值，此时会回调observe方法，然后进行ui的刷新等操作，这个过程就和我们平时进行网络请求的过程非常类似。

livedata可以感知生命周期的含义就是，比如你在A页面进行observe监听，然后跳转到页面B，此时通过postValue更新数据（当然我们也可以使用setValue，区别就是setValue只能在主线程发送数据，post可以在子线程发送数据），此时是不回回调observe的，当你点击返回键，回到A页面的时候，才会触发observe回调，这样就避免了内存泄漏的风险，这个过程大家可以自行尝试并感知。

注意：如果在布局中直接绑定的livedata数据源，形如：

<com.xinshiyun.mvvmblog.MyTextView
    android:id="@+id/tv_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    //注意这一行
    android:myText="@{viewModel.studentLiveData.name}"
    android:textColor="@color/black"
    ······/>
复制代码

上面的例子我是直接使用的mytext="@{viewModel.userName}"的方式更新的数据，此时会刷新ui，当时如果用了viewModel.studentLiveData.name，就需要databinding设置LifecycleOwner才会触发ui的更新，也就是要给databinding加上如下代码：

activityMainBinding.lifecycleOwner = this
复制代码

这样通过改变liveData的数据就可以触发绑定其数据源的ui组件进行更新，换句话说就是DataBinding需调用setLifecycleOwner(LifecycleOwner lifecycleOwner)之后，绑定了LiveData数据源的xml控件才会随着数据变化而改变。

本篇主要讲解了基础使用，文中必然存在一些问题和错误，轻喷，欢迎指正，Demo代码也不复杂，代码传到了github上，需要的小伙伴点我下载。

参考：

• LiveData使用详解

• DataBinding使用详解

• jetpack最佳实践