Android Jetpack - DataBinding

什么是 DataBinding ？

DataBinding 是属于 Jetpack 的一个支持库，可以让你以在布局中声明属性的方式替代编码方式将布局中的 UI 组件和应用数据进行绑定

通常我们让控件和数据交互的方式如下面的代码，调用 findViewById() 获取 TextView 控件并将 viewModel 中的 userName 属性赋值给它:

findViewById<TextView>(R.id.textView).apply {
    text = viewModel.userName
}

用 DataBinding 的方式就能消除上面所必须的代码，如下所示，效果和上面的代码完全相等，但是简洁多了，注意表达式被包含在 @{} 中

<TextView
    android:text="@{viewmodel.userName}" />

这样你就不用在 Activity 中调用 UI 框架去绑定组件再赋值了，优点是更简洁易维护（Jetpack 其它组件都完美支持 DataBinding），而且也减少了内存泄露和空指针的风险

如何使用 DataBinding 库？

1、创建一个新项目

略

2、启用 DataBinding 并转换布局

build.gradle

android {
...
    dataBinding {
       enabled true
    }
}

转换布局（⌥+↩）

image.png

转换完成之后代码大概是这样的

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

    </data>
    <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context=".MainActivity">
            ...

<data> 标签就是我们放布局变量的地方，布局变量用于编写布局表达式，布局表达式被放置在元素的属性值中，格式是@{布局表达式}

3、实现你的第一个布局表达式

在 <data> 标签中添加一个 String 类型的布局变量

<data>
    <variable name="name" type="String"/>
</data>

在 TextView 控件的属性中使用此变量，注意 id 和 variable name 尽量不要冲突

<TextView
        android:id="@+id/textView"
        android:text="@{name}"
        ...

此时，@{name} 就是一个简单的引用布局变量的布局表达式了

4、修改 Activity 中的代码调用

修改

setContentView(R.layout.activity_main)

为

val binding : ActivityMainBinding =
    DataBindingUtil.setContentView(this,R.layout.activity_main)

现在，直接为 binding 的属性赋值即可

binding.name = "Kim John"

运行 app 看看效果

5、处理用户事件

至此，基础的数据展示部分已经完成，但 DataBinding 的强大远不止于此，它还可以处理用户事件以及布局表达式的调用，我们创建一个 viewModel 以便演示其功能

MainViewModel

class MainViewModel : ViewModel(){
    private val _name = MutableLiveData("Kim John")
    val name: LiveData<String> = _name
}

修改布局文件

<data>
    <!--<variable name="name" type="String"/>-->
    <variable name="viewModel" type="com.skyrin.jetpack_databanding.MainViewModel"/>
</data>

...

<TextView
        android:id="@+id/textView"
        android:text="@{viewModel.name}"
        ...

修改 MainActivity

class MainActivity : AppCompatActivity() {
    // 懒加载得到 viewModel 对象
    private val viewModel by lazy {
        ViewModelProviders.of(this).get(MainViewModel::class.java)
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding : ActivityMainBinding =
            DataBindingUtil.setContentView(this,R.layout.activity_main)
        binding.viewModel = viewModel
    }
}

运行 app 看看效果

DataBinding 还可以和 LiveData 完美结合，我们可以看到 MainViewModel 中的 name 变量是 LiveData 类型，让我们更进一步，为 binding 添加 LifecycleOwner 让它具备数据感知能力

override fun onCreate(savedInstanceState: Bundle?) {

    ...
    
    binding.lifecycleOwner = this
}

为了更好的展示 DataBinding 与 LiveData 的互动，我们在 MainViewModel 增加 likes 属性

class MainViewModel : ViewModel() {
    private val _name = MutableLiveData("Kim John")
    private val _likes = MutableLiveData(0)
    val name: LiveData<String> = _name
    val likes: LiveData<Int> = _likes
    
    fun onLike() {
        _likes.value = (likes.value ?: 0) + 1
    }
}

然后修改布局变量和表达式如下

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <TextView
            android:id="@+id/tv_name"
            android:text="@{viewModel.name}"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="200dp"/>
    <ProgressBar
            android:id="@+id/pb_likes"
            android:max="@{10}"
            android:progress="@{viewModel.likes}"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="200dp"
            android:layout_height="10dp"
            app:layout_constraintStart_toStartOf="@+id/tv_name" app:layout_constraintEnd_toEndOf="@+id/tv_name"
            android:layout_marginTop="32dp" app:layout_constraintTop_toBottomOf="@+id/tv_name"/>
    <Button
            android:id="@+id/btn_like"
            android:text="@{Integer.toString(viewModel.likes)}"
            android:onClick="@{()->viewModel.onLike()}"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="@+id/pb_likes"
            app:layout_constraintEnd_toEndOf="@+id/pb_likes" android:layout_marginTop="32dp"
            app:layout_constraintTop_toBottomOf="@+id/pb_likes"
    />
</androidx.constraintlayout.widget.ConstraintLayout>

运行 app 并点击 button，你会看到 progress 进度随着点击次数增加，而我们并没有在 MainActivity 增加任何代码，这一切都由 DataBinding 与 LiveData 配合完成

image.png

6、BindingAdapter

@BindingAdapter 是 DataBinding 中非常有用的一个注解，此外还有 @BindingConversion、@BindingMethods 等，这里介绍一下最常用的 BindingAdapter

我们先在 MainViewModel 中添加 popularity 属性，并和 likes 建立关联

class MainViewModel : ViewModel() {

    ...
    
    // 声明 popularity 并通过 Transformations 创建其与 likes 的关系
    val popularity: LiveData<Popularity> = Transformations.map(_likes) {
        when {
            it > 9 -> Popularity.STAR
            it > 5 -> Popularity.POPULAR
            else -> Popularity.NORMAL
        }
    }
}
enum class Popularity {
    NORMAL, // 普通
    POPULAR, // 受欢迎
    STAR // 巨星
}

创建 BindingAdapter.kt，用于创建属性并提供自定义算法

@BindingAdapter("app:popularityColor")
fun popularityColor(view: TextView, popularity: Popularity) {
    val color = getColorPopularity(view.context,popularity)
    view.setTextColor(color)
}
@BindingAdapter("app:popularityText")
fun popularityText(view: TextView, popularity: Popularity) {
    view.text = getTextPopularity(popularity)
}
fun getTextPopularity(popularity: Popularity): String? {
    return when (popularity) {
        Popularity.NORMAL -> "😀"
        Popularity.POPULAR -> "🔥"
        Popularity.STAR -> "👑"
    }
}
fun getColorPopularity(context: Context, popularity: Popularity): Int {
    return when (popularity) {
        Popularity.NORMAL -> ContextCompat.getColor(context, R.color.normal)
        Popularity.POPULAR -> ContextCompat.getColor(context, R.color.popular)
        Popularity.STAR -> ContextCompat.getColor(context, R.color.star)
    }
}

现在，我们可以直接在布局属性中使用它们

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <TextView
            android:id="@+id/tv_name"
            android:text="@{viewModel.name}"
            app:popularityColor="@{viewModel.popularity}"
            ...
            />
    
    ...
    
    <TextView
            android:id="@+id/tv_popularity"
            app:popularityText="@{viewModel.popularity}"
            ...
            />
</androidx.constraintlayout.widget.ConstraintLayout>

运行 app，查看我们新加入的功能

demo.gif

完整示例代码

https://github.com/realskyrin/jetpack_databanding

总结

至此，你应该已经了解到 DataBinding 的强大之处了，虽然只是一个简单的可交互界面，但如果用传统方式去实现的话 Activity 中至少有 100 行以上代码，而 DataBinding 让 Activity 变得十分清爽，此外，DataBinding 与 LiveData、ViewModel 等 Jetpack 组件也是天作之合，Android 官方也非常推荐使用 Jetpack 来开发 APP，这已经形成 Android 开发的固定套路了，熟练掌握这些套路能让你多一些时间享受生活，后续我会继续更新其它 Jetpack 组件的用法，如果觉得文章还行的话来个素质三连吧😜