什么是 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
转换完成之后代码大概是这样的
代码语言: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 类型的布局变量
<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
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 让它具备数据感知能力
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 开发的固定套路了,熟练掌握这些套路能让你多一些时间享受生活。