Android Jetpack | DataBinding

2019-08-02 09:25:55 浏览数 (1)

什么是 DataBinding ?

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

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

代码语言:javascript复制
findViewById<TextView>(R.id.textView).apply {
    text = viewModel.userName
}

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

代码语言:javascript复制
<TextView
    android:text="@{viewmodel.userName}" />

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

如何使用 DataBinding 库 ?

1、创建一个新项目

2、启用 DataBinding 并转换布局

build.gradle

代码语言:javascript复制
android {
...
    dataBinding {
       enabled true
    }
}

转换布局(⌥ ↩)

image.png

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

代码语言:javascript复制
<?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 类型的布局变量

代码语言:javascript复制
<data>
    <variable name="name" type="String"/>
</data>

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

代码语言:javascript复制
<TextView
        android:id="@ id/textView"
        android:text="@{name}"
        ...

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

4、修改 Activity 中的代码调用

修改

代码语言:javascript复制
setContentView(R.layout.activity_main)

代码语言:javascript复制
val binding : ActivityMainBinding =
    DataBindingUtil.setContentView(this,R.layout.activity_main)

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

代码语言:javascript复制
binding.name = "Kim John"

运行 app 看看效果

5、处理用户事件

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

MainViewModel

代码语言:javascript复制
class MainViewModel : ViewModel(){
    private val _name = MutableLiveData("Kim John")
    val name: LiveData<String> = _name
}

修改布局文件

代码语言:javascript复制
<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

代码语言:javascript复制
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 让它具备数据感知能力

代码语言:javascript复制
override fun onCreate(savedInstanceState: Bundle?) {

    ...
    
    binding.lifecycleOwner = this
}

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

代码语言:javascript复制
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
    }
}

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

代码语言:javascript复制
<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 建立关联

代码语言:javascript复制
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,用于创建属性并提供自定义算法

代码语言:javascript复制
@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)
    }
}

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

代码语言:javascript复制
<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 开发的固定套路了,熟练掌握这些套路能让你多一些时间享受生活。

0 人点赞