Android DataBinding手把手入门教程

1、在build.gradle(Module)里引入依赖,然后重构(sync Now):

android {
    ......

    dataBinding{
        enabled true
    }
}

2、找到想要改为dataBinding视图的页面,alt+enter弹出如下:

并选择Convert to data binding layout自动转换。

转换之后效果应和下图类似:

可以看到页面出现了新的Layout和data的空标签。(data 就是用来存放数据的)

3、接下来到对应的Activity里,声明全局变量为视图去掉下划线改大写+binding:

如视图为activity_main,则对应声明的databinding类型变量就是ActivityMainBinding类型,如下:

此时在Oncreate()里输入如下代码:

//binding的对象实例化,第二个参数为对应的视图id
//binding=DataBindingUtil.setContentView(this,视图id);
binding= DataBindingUtil.setContentView(this,R.layout.activity_data_banding_test);

//你的ViewModel实例化,ViewModel部分就不再详细讲了,也可以用其他类型数据
viewModelWithDataBanding=new ViewModelProvider(this,new ViewModelProvider.NewInstanceFactory()).get(ViewModelWithDataBanding.class);

//将你准备好的数据,可以是ViewModel,通过binding.setData();绑定到视图
binding.setData(viewModelWithDataBanding);
//设置绑定的生命周期,这句很必要!!!
binding.setLifecycleOwner(this);

4、再次返回你的视图,绑定你的数据如下:

<?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="data"
            type="com.example.mytests.viewModels.ViewModelWithDataBanding"
            />
    </data>

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

        <TextView
            android:id="@+id/textView2_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{String.valueOf(data.number)}"
            android:textSize="30sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.257" />

        <Button
            android:id="@+id/button2_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:onClick="@{()->data.add()}"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView2_1" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

首先,声明变量<variable name="你自定义变量名,data" type="你之前.setData()的数据的数据类型"/>

然后,绑定变量如:

android:text="@{你自定义变量名.变量下的数据}";

绑定方法是注意:如:

android:onClick="@{()->data.add()}",需在方法前添加()->表示这是方法。

5、在视图对应的activity中可通过你声明的绑定对象来访问对应的视图控件,如:

需要设置id为button12的点击事件,可直接用绑定对象.button12.setOnclickListener(this);来操作,减少了代码的重复性,简洁美观。

操作控件案例截图:

以上为DataBinding的简单使用教程,希望大家支持!

到此这篇关于Android DataBinding手把手入门教程的文章就介绍到这了,更多相关Android DataBinding内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-10-09

Android 属性动画原理与DataBinding

Android 属性动画原理与DataBinding 看到这个标题的时候你可能会有疑问,属性动画和 DataBinding 之间有什么关系?我个人理解的是:它们内部的实现思想有相似之处.这篇文章主要对 Android 属性动画的知识通过文字进行整理记录,内容参考于<Android开发艺术探索>,在最后会给出我如此理解属性动画和 DataBinding 的原因. Android动画概述: Android 的动画可以分为三种:View 动画.帧动画和属性动画,View 动画通过对场景里的对象不断做

Android dataBinding与ListView及事件详解

今天来了解一下Android最新给我们带来的数据绑定框架--Data Binding Library.数据绑定框架给我们带来了更大的方便性,以前我们可能需要在Activity里写很多的findViewById,烦人的代码也增加了我们代码的耦合性,现在我们马上就可以抛弃那么多的findViewById.说到这里,有人可能会有个疑问:我使用一些注解框架也可以不用findViewById啊,是的,但是注解注定要拖慢我们代码的速度,Data Binding则不会,官网文档说还会提高解析XML的速度,最主

在Android中如何使用DataBinding详解(Kotlin)

前言 本问主要介绍DataBinding在Android App中的使用方法.数据绑定是将"提供器"的数据源与"消费者"绑定并使其同步的一种通用技术. 1. Android应用程序使用数据绑定 1.1 介绍DataBinding Android通过DataBinding提供了编写声明型布局的支持.这样可以最大程度简化布局和逻辑相关联的代码. 数据绑定要求修改文件,外层需要包裹一个layout布局.主要通过@{} 或 @={}语法把布局中的元素和表达式的引用写入到属性

android使用DataBinding来设置空状态

写在前面 在平时的开发之中,我们需要对于数据加载的情况进行展示: 空数据 网络异常 加载中等等情况 现在设置页面状态的方式有多种,由于笔者近期一直在使用databinding,而数据绑定通过改变模型来展示view的方式和状态页的设置也满契合的. 所以这里就讲讲使用databinding来设置android中的各种状态页.很简单,先看看效果 首先 在app的build.gradle文件中开启databinding android{ ... dataBinding { enabled = true

Android DataBinding的官方双向绑定示例

在Android Studio 2.1 Preview 3之后,官方开始支持双向绑定了. 可惜目前Google并没有在Data Binding指南里面加入这个教程,并且在整个互联网之中只有这篇文章介绍了如何使用反向绑定. 在阅读一下文章之前,我假设你已经知道如何正向绑定. 回顾一下Data Binding 在正向绑定中,我们在Layout里面的绑定表达式是这样的: <layout ...> <data> <variable type="com.example.mya

React实现双向绑定示例代码

前言 React.js现在已经很流行了,不会React.js都不好意思说自己会前端了. 那么下面就来看看关于React双向绑定的实现. 双向绑定的使用: 组件需要mixins:引用LinkedStateMixin.它提供一个linkState方法. 参数是state属性 双向绑定用valueLink={this.linkState(XX)} linkState方法返回一个对象,有一个value属性,指定state的属性. 还有一个requestChange回调方法,用来实现state的修改.参数

Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例

00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大部分都用的jQuery,而Angular正好是和jQuery的思维是相反的,开发过程中遇到了不少坑.而Angular团队也放弃了1.x开始开发和React神似的2.0版本,唉,真是沧海桑田啊. 01.Angular vs jQuery Angular模块化和解耦的思路确实值得一学,但是相对于成熟的jQuery插件库,Ang

用vue的双向绑定简单实现一个todo-list的示例代码

前言 最近在学习vue框架的基本原理,看了一些技术博客以及一些对vue源码的简单实现,对数据代理.数据劫持.模板解析.变异数组方法.双向绑定有了更深的理解.于是乎,尝试着去实践自己学到的知识,用vue的一些基本原理实现一个简单的todo-list,完成对深度复杂对象的双向绑定以及对数组的监听,加深了对vue基本原理的印象. github地址:todo-list 学习链接 前排感谢以下文章,对我理解vue的基本原理有很大的帮助! 剖析vue实现原理,自己动手实现mvvm by DMQ 对vue早期

用ES6的class模仿Vue写一个双向绑定的示例代码

本文介绍了用ES6的class模仿Vue写一个双向绑定的示例代码,分享给大家,具体如下: 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods class TinyVue{ constructor({el, data, methods}){ this.$data = data this.$el = document.querySelector(el) this.$methods = methods // 初始化 this._com

VUE-Table上绑定Input通过render实现双向绑定数据的示例

效果 HTML的Table <Card> <div ref="print" > <Table width="100%" height="500" size="small" :columns="columns7" :stripe="true" :data="data" border ></Table> </div&g

jQuery实现html双向绑定功能示例

本文实例讲述了jQuery实现html双向绑定功能.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.9.1.js"></script

VUE JS 使用组件实现双向绑定的示例代码

1.VUE 前端简单介绍 VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据set时,在数据属性上添加监控,这样数据发生改变时,就会触发他上面的watcher,而ANGULARJS 是使用脏数据检查来实现的. 另外VUEJS 入门比ANGULARJS 简单,中文文档也很齐全. 2.组件实现 在使用vue开发过程中,我们会需要扩展一些组件,在表单中使用,比如一个用户选择器. 在VU

vue用Object.defineProperty手写一个简单的双向绑定的示例

前言 上次写了一个Object.defineProperty() 不详解,文末说要写用它来写个双向绑定.说话算话,说来就来 前文链接 Object.defineProperty() 不详解 先看最后效果 model演示.gif 什么是双向绑定? 1.当一个对象(或变量)的属性改变,那么调用这个属性的地方显示也应该改变,模型到视图(model => view) 2.当调用属性的这个地方改变了这个属性(通常是一个表单元素),那么这个对象(或变量)的属性也会改为最新的值 ,即视图到模型(view =>

VUE v-model表单数据双向绑定完整示例

本文实例讲述了VUE v-model表单数据双向绑定.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue v-model双向绑定</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></s