kankan(good)

当你真的学会DataBinding后,你会发现“这玩意真香”!

2022-07-01  本文已影响0人  编程的平行世界

前言

🏀DataBinding只是一种工具,用来解决View和数据之间的绑定。

Data Binding,顾名思义:数据绑定,它可以将布局页面中的组件和应用中的数据进行绑定,支持单向绑定和双向绑定,单向绑定就是如果数据有变化就会驱动页面进行变化,双向绑定就是除了单向绑定之外还支持页面的变化驱动数据的变化,如果页面中有一个输入框,那么我们就可以进行双向绑定,数据变化,它的显示内容就变了,我们手动输入内容也可以改变绑定它的数据。

🌟官方文档:https://developer.android.google.cn/jetpack/androidx/releases/databinding

🌟官方Demo地址:https://github.com/googlecodelabs/android-databinding

本文代码地址

如何使用DataBinding呢?

1.启用DataBinding

引用官方文档:

Databinding与 Android Gradle 插件捆绑在一起。您无需声明对此库的依赖项,但必须启用它。

注意:即使模块不直接使用数据绑定,也必须为依赖于使用数据绑定的库的所有模块启用数据绑定。

//在gradle的android下加入,然后点击sync
android {
    ...
    //android studio 4.0以下
    dataBinding{
    
    }
    //android studio4.1以后
    buildFeatures {
        dataBinding true
    }
}

2.生成DataBinding布局

在我们的布局文件中,选择根目录的View,按下Alt+回车键,点击Convert to data binding layout,就可以转换为DataBinding布局啦。

[图片上传失败...(image-e5b226-1656642536141)]
然后我们的布局就会变成这样:

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

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

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

我们可以发现,最外面变成了layout元素,里面有data元素。我们将在data元素中声明这个布局中使用到的变量,以及变量的类型。

举个例子:

<data>
    <import type="com.example...."/>
    <variable
        name="color"
        type="java.lang.String" />
</data>

3.声明一个User实体类

class User() {
    var name = "Taxze"
    var age = 18
    fun testOnclick() {
        Log.d("onclick", "test")
    }
}

4.在xml中使用

然后在data中声明变量,以及类名

<data>
    <!-- <variable-->
    <!-- name="user"-->
    <!-- type="com.taxze.jetpack.databinding.User" />-->
    <import type="com.taxze.jetpack.databinding.User" />

    <variable
        name="user"
        type="User" />
</data>

然后在布局中使用@{}语法

//伪代码,请勿直接CV
<TextView
    ...
    android:text="@{user.name}"
/>

5.在Activity或Fragment中使用DataBinding

在Activity中通过DataBindingUtil设置布局文件,同时省略Activity的setContentView方法

class MainActivity : AppCompatActivity() {
    private lateinit var mainBinding: ActivityMainBinding
    private lateinit var mainUser: User
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        mainBinding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
        mainUser = User()
        mainBinding.user = mainUser
    }
}

在Fragment中使用:

class BlankFragment : Fragment() {
    private lateinit var mainFragmentBinding:FragmentBlankBinding
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        mainFragmentBinding = DataBindingUtil.inflate(inflater,R.layout.fragment_blank,container,false)
        return mainFragmentBinding.root
    }
}

系统会为每个布局文件都生成一个绑定类。一般默认情况下,类的名称是布局文件名称转化为Pascal大小写形式,然后在末尾添加Binding后缀,例如:名称为activity_main的布局文件,对应的类名就是ActivityMainBinding

运行之后的效果:

[图片上传失败...(image-df5a21-1656642536141)]

注意:只有当布局文件转换为layout样式之后,databinding才会根据布局文件的名字自动生成一个对应的binding类,你也可以在build/generated/data_binding_base_source_out目录下查看生成的类

[图片上传失败...(image-b63679-1656642536141)]
最最最基础的使用就是这样,接下来我们来讲讲如何更好的使用DataBinding

如何在xml布局中更好的使用DataBinding

1.使用集合中的元素

2.使用map中的数据

3.转换数据类型

4.导入包名冲突处理

5.隐式引用属性

6.绑定点击事件


💡文章到这里讲的都是DataBinding如何设置数据,以及通过DataBinding在xml中的一些基础使用。如果只是使用DataBinding这个功能,那就有点大材小用了。它还有一个很强大的功能我们还没有讲,那就是数据更新时自动刷新UI。

实现数据变化时自动更新UI

一个普通的实体类或者ViewModel被更新后,并不会让UI自动更新。而我们希望,当数据变更后UI要自动更新,那么要实现数据变化时自动更新UI,有三种方法可以使用,分别是BaseObservableObservableFieldObservableCollection

💡单向数据绑定:

💡双向数据绑定:

DataBinding在RecyclerView中的使用

在RecyclerView中使用DataBinding稍有变化,我们在ViewHolder中进行binding对象的产生,以及数据对象的绑定。

我们通过一个非常简单的例子来讲解如何在RecyclerView中使用DataBinding。

效果图:

[图片上传失败...(image-f1d50d-1656642536141)]

这样就完成了在RecyclerView中使用DataBinding啦。

高级用法

第一个:用于appCompatImageView的自定义属性

//伪代码,请勿直接cv
/**
 * 用于appCompatImageView的自定义属性,bind:imgSrc,命名空间bind:可以省略,也就是写作 imgSrc亦可。可以用于加载url的图片
 * 函数名也是随意,主要是value的声明,就是新加的属性名了,可以多个属性同用,并配置是否必须一起作用
 * 函数名随意,方法签名才重要,匹配对象控件,以及属性参数。
 * 这里还可以添加old 参数,获取修改新参数 之前对应的值。
 * todo 加载网络图片,需要网络权限!!!
 */
@JvmStatic
@BindingAdapter(value = ["bind:imgSrc"], requireAll = false)
fun urlImageSrc(view: AppCompatImageView, /*old: String?, */url: String) {
    Glide.with(view)
        .load(url)
        .placeholder(R.drawable.img_banner)
        .centerInside()
        .into(view)
}

第二个:配合swipeRefreshLayout的刷新状态的感知

DataBinding配合ViewModel&LiveData一起使用

我将通过一个简单的例子带大家学习他们如何一起使用,话不多说,先上效果图:

[图片上传失败...(image-c6034d-1656642536141)]

帮你踩坑🍖:

尾述

这篇文章已经很详细的讲了DataBinding的大部分用法,不过在看完文章后,你仍需多多实践,相信你很快就可以掌握DataBinding啦😺 有问题欢迎在评论区留言讨论~

关于我

Hello,我是Taxze,如果您觉得文章对您有价值,希望您能给我的文章点个❤️,也欢迎关注我的博客

如果您觉得文章还差了那么点东西,也请通过关注督促我写出更好的文章——万一哪天我进步了呢?😝

基础系列:

2022 · 让我带你Jetpack架构组件从入门到精通 — Lifecycle

学会使用LiveData和ViewModel,我相信会让你在写业务时变得轻松🌞

当你真的学会DataBinding后,你会发现“这玩意真香”! (本文🌟)

以下部分还在码字,赶紧点个收藏吧🔥

2022 · 让我带你Jetpack架构组件从入门到精通 — Navigation

2022 · 让我带你Jetpack架构组件从入门到精通 — Room

2022 · 让我带你Jetpack架构组件从入门到精通 — Paging3

2022 · 让我带你Jetpack架构组件从入门到精通 — WorkManager

2022 · 让我带你Jetpack架构组件从入门到精通 — ViewPager2

2022 · 让我带你Jetpack架构组件从入门到精通 — 登录注册页面实战(MVVM)

进阶系列:

协程 + Retrofit网络请求状态封装

Room 缓存封装

.....

上一篇下一篇

猜你喜欢

热点阅读