【Jetpack】DataBinding 架构组件 ⑥ ( RecyclerView 数据绑定 )

这篇具有很好参考价值的文章主要介绍了【Jetpack】DataBinding 架构组件 ⑥ ( RecyclerView 数据绑定 )。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。





一、RecyclerView 数据绑定核心要点




1、启用数据绑定 / 导入依赖


在 RecyclerView 中 , 如果要使用 DataBinding 架构组件进行数据绑定 , 首先要 启用 DataBinding , 并 导入 RecyclerView 依赖 , 在 Module 模块下的 build.gradle 构建脚本 中 , 配置如下内容 :

android {
	// 启用 DataBinding 数据绑定
    dataBinding {
        enabled = true
    }
}

dependencies {
	// 导入 RecyclerView 依赖
    implementation 'androidx.recyclerview:recyclerview:1.2.1'
}

2、RecyclerView 条目 DataBinding 布局


要绑定的数据是 RecyclerView 条目的数据 , 因此需要 将条目布局设置为 DataBinding 布局 ;

创建 item.xml 布局后 , 将光标放置在第一个字符位置 , 按下 Alt + 回车 , 弹出如下下拉菜单 ,

【Jetpack】DataBinding 架构组件 ⑥ ( RecyclerView 数据绑定 )

选择 " Convert to data binding layout " 选项 , 可以将正常的 约束布局 的 布局文件 , 转为 DataBinding 布局文件 ;

转换完毕后 , 该 item.xml 布局 生成对应的 ItemBinding 类 , 将数据绑定在该布局类中即可 ;


3、自定义 RecyclerView.Adapter 适配器要点 ( 本博客重点 ★ )


自定义 RecyclerView.Adapter 适配器 中 , 需要 实现对 RecyclerView 条目 DataBinding 布局 的 数据绑定 ;

首先 , 自定义 RecyclerView.ViewHolder 类 , 在其中维护 item.xml 布局文件 对应的 ItemBinding 数据绑定类实例对象 , 在构造函数中设置改 ItemBinding 对象 ;

    class MyViewHolder: RecyclerView.ViewHolder {
        /**
         * RecyclerView 列表项布局文件是 item.xml
         * 生成的对应的 DataBinding 类是 ItemBinding 类
         * ItemBinding 类等同于布局文件
         */
        lateinit var itemBinding: ItemBinding
        constructor(itemView: View) : super(itemView)
        constructor(itemBinding: ItemBinding) : super(itemBinding.root){
            this.itemBinding = itemBinding
        }
    }

然后 ,自定义 RecyclerView.Adapter 类中重写的 onCreateViewHolder 函数中 , 获取 DataBinding 布局 , 并将其设置给 自定义的 RecyclerView.ViewHolder 对象 ;

  • 获取 DataBinding 布局 : 调用 DataBindingUtil.inflate 函数 , 获取 item.xml 对应的 DataBinding 布局文件类 ItemBinding 实例对象 ;
  • 将 DataBinding 布局设置给自定义 RecyclerView.ViewHolder 实例 : 将上面创建的 ItemBinding 对象通过 构造函数设置到 MyViewHolder 中 ;
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        // 获取 DataBinding 布局
        var itemBinding: ItemBinding = DataBindingUtil.inflate<ItemBinding>(
            LayoutInflater.from(parent.context),
            R.layout.item,
            parent,
            false)
        // 将 DataBinding 布局设置给 ViewHolder
        return MyViewHolder(itemBinding)
    }

最后 ,自定义 RecyclerView.Adapter 类中重写的 onBindViewHolder 函数中 , 为每个列表条目设置数据 ;

  • 先通过参数中的 MyViewHolder 对象获取其中的 ItemBinding 数据绑定布局对象 ;
  • 之后为 holder.itemBinding 设置 Student 数据类对象 ;
    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        holder.itemBinding.student = list[position]
    }




二、RecyclerView 数据绑定源码示例




1、build.gradle 构建脚本 ( 启用数据绑定 / 导入依赖 )


Module 模块下的 build.gradle 构建脚本 中 , 主要是 启用 DataBinding ;

RecyclerView 不需要单独导入依赖 , 在 引入的 'androidx.appcompat:appcompat:1.4.1' 依赖中 , 就包含了 RecyclerView 依赖 ;


build.gradle 构建脚本 :

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
    id 'kotlin-kapt'
}

android {
    namespace 'kim.hsl.databinding_demo'
    compileSdk 32

    defaultConfig {
        applicationId "kim.hsl.databinding_demo"
        minSdk 21
        targetSdk 32
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"

        // 启用 DataBinding
        dataBinding {
            enabled = true
        }
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '9'
    }
}

dependencies {
    implementation 'androidx.core:core-ktx:1.7.0'
    implementation 'androidx.appcompat:appcompat:1.4.1'
    implementation 'com.google.android.material:material:1.5.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.3'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'

    implementation 'com.squareup.picasso:picasso:2.71828'
}

2、主界面的 Activity 布局与组件 ( 可不使用 DataBinding )


Activity 组件的布局 可以使用 数据绑定 , 也可以不使用 , 该布局中没有绑定数据 ;

  • 使用了 DataBinding 布局 : 在布局中使用 DataBinding 样式的布局 , 根标签是 layout 标签 , 其中有 data 子标签 , 其中没有维护任何数据 ; 在 Activity 中使用 DataBindingUtil.setContentView 设置布局文件 ;
  • 不使用 DataBinding 布局 : 直接使用普通布局 , 在 Activity 中使用 findViewById 获取并设置 RecyclerView 组件 ;

布局文件

<?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">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            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>

Activity 组件的 Kotlin 代码

package kim.hsl.databinding_demo

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import androidx.recyclerview.widget.LinearLayoutManager
import kim.hsl.databinding_demo.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // 设置布局文件
        // 布局文件是 activity_main.xml
        // 该类名称生成规则是 布局文件名称 + Binding
        var activityMainBinding: ActivityMainBinding =
            DataBindingUtil.setContentView(this, R.layout.activity_main)

        // 设置 RecyclerView 的 布局管理器 / 数据适配器
        activityMainBinding.recyclerView.layoutManager = LinearLayoutManager(this)
        var adapter = StudentAdapter()
        activityMainBinding.recyclerView.adapter = adapter
    }
}

3、自定义 RecyclerView.Adapter


DataBinding 布局 RecyclerView 中条目的布局 , 需要 在 自定义 RecyclerView.Adapter 中 , 为每个条目布局都绑定一个 Student 数据类 ;

在 DataBinding 布局中 , 绑定了 kim.hsl.databinding_demo.Student 类型的数据 , 在 TextView 中显示该绑定数据类对象的 name 和 age 字段 ;

    <data>
        <variable
            name="student"
            type="kim.hsl.databinding_demo.Student" />
    </data>

数据绑定布局 ItemBinding , 在 class MyViewHolder: RecyclerView.ViewHolder 类中维护 , 可以通过该类获取数据绑定布局 , 并为其设置数据 ;

RecyclerView.Adapter#onCreateViewHolder 中 , 调用 DataBindingUtil.inflate 函数加载布局 , 并设通过构造函数设置给 MyViewHolder ;


数据类

package kim.hsl.databinding_demo

class Student(var name: String, var age: Int) {
}

DataBinding 布局

<?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>
        <variable
            name="student"
            type="kim.hsl.databinding_demo.Student" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="50dip">

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{student.name}"
            android:textSize="24sp"
            tools:text="Tom"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.3"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/age"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{String.valueOf(student.age)}"
            android:textSize="24sp"
            tools:text="18"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.7"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

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

RecyclerView.Adapter

package kim.hsl.databinding_demo

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.databinding.DataBindingUtil
import androidx.recyclerview.widget.RecyclerView
import kim.hsl.databinding_demo.databinding.ItemBinding

class StudentAdapter: RecyclerView.Adapter<StudentAdapter.MyViewHolder>() {

    var list = listOf(
        Student("Tom", 18),
        Student("Jerry", 12),
        Student("Mickey", 16),
        Student("Donald", 14)
    )

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        // 获取 DataBinding 布局
        var itemBinding: ItemBinding = DataBindingUtil.inflate<ItemBinding>(
            LayoutInflater.from(parent.context),
            R.layout.item,
            parent,
            false)
        // 将 DataBinding 布局设置给 ViewHolder
        return MyViewHolder(itemBinding)
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        holder.itemBinding.student = list[position]
    }

    override fun getItemCount(): Int {
        return list.size
    }

    class MyViewHolder: RecyclerView.ViewHolder {
        /**
         * RecyclerView 列表项布局文件是 item.xml
         * 生成的对应的 DataBinding 类是 ItemBinding 类
         * ItemBinding 类等同于布局文件
         */
        lateinit var itemBinding: ItemBinding
        constructor(itemView: View) : super(itemView)
        constructor(itemBinding: ItemBinding) : super(itemBinding.root){
            this.itemBinding = itemBinding
        }
    }
}

4、执行结果


【Jetpack】DataBinding 架构组件 ⑥ ( RecyclerView 数据绑定 )文章来源地址https://www.toymoban.com/news/detail-424576.html

到了这里,关于【Jetpack】DataBinding 架构组件 ⑥ ( RecyclerView 数据绑定 )的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Jetpack业务架构—四件套(Lifecycle、ViewModel、LiveData、DataBinding)

    Jetpack 是一个由多个库组成的套件,可帮助开发者遵循最佳做法、减少样板代码并编写可在各种 Android 版本和设备中一致运行的代码,让开发者可将精力集中于真正重要的编码工作。 Android Jetpack组件的优势: Jetpack推出的主要目的是为了能够让开发者更加快速、方便以及高质

    2024年02月09日
    浏览(41)
  • 【Jetpack】ViewModel 架构组件 ( 视图 View 和 数据模型 Model | ViewModel 作用 | ViewModel 生命周期 | 代码示例 | 使用注意事项 )

    Activity 遇到的问题 : 瞬态数据丢失 : 操作 Activity 时 , 如果 屏幕 自动旋转 , 当前 Activity 组件会 执行销毁操作 , 并重新创建新的 Activity 组件 , 该操作会 导致 Activity 的 瞬态数据 丢失 ; 内存泄漏 : 在 系统组件 如 Activity 中 , 启动了一个线程 , 在线程中执行一系列操作 , 如果 A

    2024年01月25日
    浏览(50)
  • android jetpack databinding的基本使用(java)

    开启databing 修改布局文件 为布局文件添加layout标签。 实例化布局文件 向布局文件传递数据 创建一个Sentence 类,实例化。传给布局并显示。 5. 在布局中引用静态类 在sentence类中添加属性collect ,collect 等于1表示已收藏,0表示收藏。 建立工具类CollectUtil 通过import导入到布局文

    2024年02月10日
    浏览(41)
  • Android Jetpack组件架构:ViewModel的原理

    本篇文章是关于介绍ViewModel的,由于ViewModel的使用还是挺简单的,这里就不再介绍其的基本应用,我们主要来分析ViewModel的原理。 众所周知,一般使用ViewModel是用来解决两个问题的,第一个就是关于设备配置发生改变时Activity先前状态的保存,在ViewModel出来之前我们一般会使

    2024年02月07日
    浏览(44)
  • 【Jetpack】ViewModel + LiveData + DataBinding 综合使用 ( 核心要点说明 | 组合方式 | 代码示例 )

    ViewModel 架构组件 是 视图 View 与 数据模型 Model 之间 数据交互的 桥梁 ; 传统 Android 开发中 , 视图 View 与 数据模型 Model 都在 Activity 中维护 , 导致 二者有很高的耦合度 , 不利于代码维护 ; 引入了 ViewModel 架构组件后 , 视图 View 与 数据模型 Model 之间实现了解耦 , 同时也能 保证二

    2024年02月01日
    浏览(45)
  • 大型Android项目架构:基于组件化+模块化+Kotlin+协程+Flow+Retrofit+Jetpack+MVVM架构实现WanAndroid客户端

    前言:苟有恒,何必三更眠五更起;最无益,莫过一日曝十日寒。 之前一直想写个 WanAndroid 项目来巩固自己对 Kotlin+Jetpack+协程 等知识的学习,但是一直没有时间。这里重新行动起来,从项目搭建到完成前前后后用了两个月时间,平常时间比较少,基本上都是只能利用零碎的

    2024年02月09日
    浏览(54)
  • Vue父子组件间数据的双向绑定

    在vue中数据的流向通常是单向的,但是实际开发中,存在子组件对父组件值进行更新的情况,例如对表单组件进行二次封装等,父组件需要响应子组件的变化。双向绑定呼之欲出,vue提供了两种方法进行双向绑定: 在父组件上 v-model 会利用子组件名为 value 的 prop 和名为 inp

    2024年02月06日
    浏览(55)
  • 【Jetpack】Jetpack 简介 ( 官方架构设计标准 | Jetpack 组成套件 | Jetpack架构 | Jetpack 的存在意义 | AndroidX 与 Jetpack 的关系 )

    Android 架构发展 : Android 架构的发展 途径了 MVC - MVP - MVVM 等方案 , 这些架构都 不是 Google 官方提出的 , 都是各个团队 根据自己的需求推出的适合自己的架构方案 ; Jetpack 是 Google 推出的 架构设计标准 , 是官方推出 架构设计指导方案 ; 借助 Jetpack 提供的一系列的 工具 和 组件

    2024年02月03日
    浏览(38)
  • Vue.js核心概念简介:组件、数据绑定、指令和事件处理

    本文介绍了Vue.js的四个核心概念:组件、数据绑定、指令和事件处理。每个概念都通过一个简单的示例进行了详细的解释。通过学习这些概念,您将能够充分利用Vue.js的强大功能,构建高效、灵活的Web应用程序。 1 组件 组件是Vue.js的核心概念之一,它允许您将UI分解为相互作

    2024年02月04日
    浏览(58)
  • 组件封装v-model .sync在父子组件中实现双向数据绑定 如何处理单向数据流 封装表单组件

    使用watch监听 父组件使用.sync进行数据的绑定 传值子组件时 把值赋值到data的变量中 然后监听该数据的变化 $emit抛出 父组件demo 子组件 展示效果 使用绑定对象的方式打破单向数据流实现 父组件 子组件 参考vue官方及各插件库的方案 使用计算属性来保证双向数据流 通过计算属

    2023年04月19日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包