Jetpack练手（03）：DataBinding

---

一、导入依赖

新建 DataBindingDemo 工程，参照 LiveData 练手，在 build.gradle(Module:app) 中导入依赖：

dependencies {
    def lifecycle_version = "2.2.0"
    def activity_version = "1.1.0"
    // ViewModel
    implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"
    // LiveData
    implementation "androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version"
    // androidx.activity
    implementation "androidx.activity:activity-ktx:$activity_version"
    ...
}

并添加 DataBinding 配置选项，以及 jvmTarget 1.8 设置：

android {
	...
    // DataBinding
    buildFeatures{
        dataBinding true
    }
    // Java
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    // For Kotlin projects
    kotlinOptions {
        jvmTarget = "1.8"
    }
}

---

二、搭建布局

在 activity_main.xml 搭建简单布局（省略属性），如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tvVote" />

    <ImageButton
        android:id="@+id/imgBtnUpvote" />

    <ImageButton
        android:id="@+id/imgBtnDownvote" />

</androidx.constraintlayout.widget.ConstraintLayout>

包含三个控件：

1. tvVote - TextView，显示点赞数；
2. imgBtnUpvote - ImageButton，点赞的按钮；
3. imgBtnDownvote - ImageButton，点踩的按钮。

注意：在 ImageButton 使用 res/drawble 添加的 Vector Asset 作为 app:srcCompat 时，需要在 build.gradle(Module:app) 中添加：

android {
    defaultConfig {
		...
        vectorDrawables.useSupportLibrary = true
    }
}

---

三、创建 ViewModel 数据对象

在 com.example.databindingdemo 目录下新建 VoteViewModel 类继承自 ViewModel()，定义一个 MutableLiveData 类型的属性，并定义两个方法 upVote() 和 downVote()，如下：

class VoteViewModel(
    val vote: MutableLiveData<Int> = MutableLiveData<Int>(0)
) : ViewModel() {

    fun upVote() {
        vote.value = vote.value?.plus(1)
    }

    fun downVote() {
        vote.value = vote.value?.minus(1)
    }
}

---

四、修改布局为 DataBinding 布局

在 activity_main.xml 右击 ConstraintLayout，选择 Show Context Action → Convert to data binding layout，此时在原先的 ConstraintLayout 布局外层嵌套了一个 layout，且出现 data 标签，在 data 标签中添加 variable，name 随意，type 即为 VoteViewModel。然后可以使用 @{} 语法将变量写入控件元素的属性中，如下（省略次要属性）：

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

    <data>
        <variable
            name="voteViewModel"
            type="com.example.databindingdemo.VoteViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        tools:context=".MainActivity">

        <TextView
            android:id="@+id/tvVote"
            android:text="@{voteViewModel.vote.toString()}" />

        <ImageButton
            android:id="@+id/imgBtnUpvote"
            android:onClick="@{() -> voteViewModel.upVote()}" />

        <ImageButton
            android:id="@+id/imgBtnDownvote"
            android:onClick="@{() -> voteViewModel.downVote()}" />


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

其中：

1. tvVote 文本被设置为 voteViewModel 变量的 vote 属性；
2. imgBtnUpvote 的 onClick 点击事件被设置为 voteViewModel 变量的 upVote() 方法，使用 lambda 表达式 () ->；
3. imgBtnDownvote 的 onClick 点击事件被设置为 voteViewModel 变量的 downVote() 方法，使用 lambda 表达式 () ->；

整体布局如图：

---

五、绑定数据

在 MainActivity 类中，使用 Kotlin by viewModels() 属性委托声明一个 VoteViewModel 的实例：

private val voteViewModel: VoteViewModel by viewModels()

参考 DataBinding 生成绑定类，在 MainActivity.onCreate() 创建绑定对象，如下：

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

    val binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)
}

参考 DataBinding 将布局视图绑定到架构组件，将 ViewModel 组件分配给绑定类中的属性，将数据变化通知给界面：

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

    val binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)

    binding.voteViewModel = voteViewModel
    binding.lifecycleOwner = this
}

---

六、Demo 效果

效果如下：

---