Android Jetpack | DataBinding
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 开发的固定套路了，熟练掌握这些套路能让你多一些时间享受生活。