Android Data Binding实战


转载地址:

https://blog.csdn.net/u010687392/article/details/47298935



在今年Google I/O大会上,Google推出Design Library库的同时也推出了Android Data Binding,那么什么是Data Binding?其名曰数据绑定,使用它我们可以轻松实现MVVM(模型-视图-视图模型)模式,来实现应用之间数据与视图的分离、视图与业务逻辑的分离、数据与业务逻辑的分离,从而达到低耦合、可重用性、易测试性等好处,那么我们首先先来看看什么是MVVM模式。


我自己画了一张图来帮助理解,就不多描述了,毕竟重点是Data Binding的使用
这里写图片描述
通过上图我们可以很清晰的知道这种架构模式的好处。
那么接下来就是来看看Data Binding的使用:

使用Data Binding开发环境的搭建

android {
apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.0"
    defaultConfig {
        applicationId "com.qiangxi.databindingdemo"
        minSdkVersion 16
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    //核心配置代码在这里
    dataBinding{
        enabled = true
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:26.+'
    testCompile 'junit:junit:4.12'
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

配置好之后记得同步一下项目,就可以使用DataBinding的方式开发了。

使用Data Binding 写一个简单的MVVM模式的Demo

在刚刚的环境搭建完成后,使用Data Binding前要知道三点:

  1. 在需要绑定的xml布局中,我们需要用<layout> 作为最外层的布局
  2. 它是在xml布局文件中来完成数据的绑定的,所以在<layout> 布局中包含一个<data> 区域,在其中设置绑定到xml的数据Model
  3. 得到数据Model后,采用@{}表达式绑定数据到相应的控件上

所以在这个Demo中,我们有个用户Model类->User,需求就是使用Data Binding将User的用户名和密码通过TextView显示出来。
我们先把xml布局在最外层加上一个<layout>,然后在添加<data> 区域并设置绑定Model,最后使用@{}表达式将数据绑定到TextView控件上,那么我们来看看xml的布局:

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <data>
        <variable
            name="user"
            type="com.sunzxyong.databinding.User"/>
    </data>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.userName}" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.userPassword}" />
    </LinearLayout>
</layout>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

再看看User类:

public class User {
    private String userName;
    private String userPassword;

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getUserPassword() {
        return userPassword;
    }

    public void setUserPassword(String userPassword) {
        this.userPassword = userPassword;
    }

    public User(String userName, String userPassword) {
        this.userName = userName;
        this.userPassword = userPassword;
    }
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

一一讲解一下什么意思,上面我们使用:

<data>
        <variable
            name="user"
            type="com.sunzxyong.databinding.User"/>
    </data>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5

就是将com.sunzxyong.databinding包下User类的一个对象绑定到了布局中,name=“user”就是给User定义一个名为user变量(名字可以随便取),之后通过@{user.userName}获得这个对象的用户名设置给TextView(其中user.userName获取数据的根源就是它是访问user对象中的getUserName()方法来获取数据)。
接下来看看代码,我们在Activity中的onCreate()方法中使用ViewModel将数据传递给View层:

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityMainBinding mBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        User user = new User("Sunzxyong", "12345678");
        mBinding.setUser(user);
    }
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

对,你没看错,就是通过这么几行,再也不用findViewById了,就把用户的用户名Sunzxyong和密码12345678绑定到了对应的TextView上显示出来。下面就详细解释下它的工作原理:
刚刚我们在布局文件中的<data>区域定义了一个User类型的user变量,这时候它会默认给user对象生成setUser()和getUser()方法,我们在得到它的ViewModel对象后就可以通过调用setUser()方法来设置数据,那么ViewModel类是什么呢?在默认情况下系统会根据xml布局的名字来命名自动生成ViewModel类,比如刚刚我们的布局名为activity_main,那么它就会以 _ 下划线为分隔点命名结尾再加上Binding,所以这时我们的ViewModel是ActivityMainBinding,我们通过DataBindingUtil.setContentView()来获得对应xml文件的ViewModel,当然还有常用的DataBindingUtil.inflate(),如果绑定ListView或者RecyclerView的Item我们则通过:

ListItemBinding binding = ListItemBinding.inflate(layoutInflater, viewGroup, false);
//or
ListItemBinding binding = DataBindingUtil.inflate(layoutInflater, R.layout.list_item, viewGroup, false);

最后我们通过ViewModel把数据传递给View层显示。


我们来运行一下看看:
这里写图片描述
通过Data Binding我们把数据显示到界面上了,而不用通过findViewById来找到控件然后设置数据。

总结:通过它我们将数据、界面、业务逻辑这三层很好的解耦了,数据层Model得到数据后通过ViewModel对象的setUser()方法设置数据给View层供显示,界面层View获得用户输入的数据后通过ViewModel对象的getUser()方法得到View层的数据进而传递给Model层更新。

这篇我们使用了Data Binding实现了一个简单的小Demo,接下来几篇将介绍Data Binding更高级的用法!






上篇我们知道了Data Binding的最简单的用法,那么Data Binding其中最为重要也是最复杂的其实就是在xml布局文件中给对应的控件进行数据绑定了,接下来就一一说明Data Binding的使用各个场景的语法。

我们以User类这个Model为例:

public class User {
    private String userName;
    private String userPassword;
    private boolean isExist;

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getUserPassword() {
        return userPassword;
    }

    public void setUserPassword(String userPassword) {
        this.userPassword = userPassword;
    }

    public boolean isExist() {
        return isExist;
    }

    public void setIsExist(boolean isExist) {
        this.isExist = isExist;
    }

    public User(String userName, String userPassword, boolean isExist) {
        this.userName = userName;
        this.userPassword = userPassword;
        this.isExist = isExist;
    }
}
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

Imports

就像Java代码一样,我们可以使用import导入我们在xml文件绑定数据时需要使用到的类,如我们需要使用到系统中的View类,可以这样:

<data>
    <import type="android.view.View"/>
</data>
    
    
  • 1
  • 2
  • 3

然后使用它对控件进行相应属性值的绑定,如:

<TextView
   android:text="@{user.userName}"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:visibility="@{user.isExist? View.VISIBLE : View.GONE}"/>
    
    
  • 1
  • 2
  • 3
  • 4
  • 5

这样我们就可以使用View类的一些值,通过@{}来绑定这些值,用三元表达式进而决定控件的可见性。

class name conflicts类名冲突

如果我们自己创建了一个类名也为View,如:

public class View {
    private int width;
    private int height;
    /*
    * getter and setter ......
    * */
}
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

很明显这和系统中的View类名一样,那么在xml中怎么区别这两个不同的类呢?就是通过设置别名来区分。如:

<data>
    <import type="android.view.View"/>
    <import type="com.sunzxyong.databinding.View"
        alias="MyView"/>
</data>
    
    
  • 1
  • 2
  • 3
  • 4
  • 5

我设置了我自己定义的View别名为MyView,那么对控件进行数据绑定时候就使用这个别名,如:

<TextView
   android:text="@{MyView.width}"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:visibility="@{user.isExist ? View.VISIBLE : View.GONE}"/>
    
    
  • 1
  • 2
  • 3
  • 4
  • 5

List集合的使用

假如我们有多位用户,我们需要显示第1位用户的数据,那么可以这样:

<data>
    <import type="com.sunzxyong.databinding.User"/>
    <import type="java.util.List"/>
    <variable name="userList" type="List&lt;User>"/>
</data>
    
    
  • 1
  • 2
  • 3
  • 4
  • 5

这里我们定义了一个List<User> 这样的一个集合,名为userList,其中特别注意一点,在@{}表达式中不支持左括号,所以我们需要用转义字符代替左括号,然后在控件中获取集合的数据是通过userList[0]来获取的,这点和数组一样,而我们定义的是List<User>集合,所以最终获取第一位用户的用户名是这样的:userList[0].userName,然后绑定数据在控件上,表示显示第一位用户的数据代码如下:

<TextView
   android:text="@{userList[0].userName}"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
/>
    
    
  • 1
  • 2
  • 3
  • 4
  • 5

这里打印出来的将是集合中第一个元素的userName。

如果index索引需要动态改变,那么就这样:

<data>
    <import type="java.util.List"/>
    <variable name="list" type="List&lt;String>"/>
    <variable name="index" type="int"/>
</data>
…
android:text="@{list[index]}"
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

Variables变量

【注意一点】java.lang.*包下的类是不需要导入的,因为这和java一样lang包下的类都是自动导入进去了,如:

<data>
    <variable
            name="number"
            type="String"/>
</data>
    
    
  • 1
  • 2
  • 3
  • 4
  • 5

绑定数据:

<TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{number}" />
    
    
  • 1
  • 2
  • 3
  • 4

然后通过代码设置mBinding.setNumber(“888888”);那么屏幕上显示将是888888。
因为自动导入了lang包,可以直接使用String、int、boolean等类,这些变量在没有传递值的情况下和java一样,都有默认值,引用类的为null,int为0,boolean为false等。

自定义Binding Class Name,也就是自定义ViewModel类名,不是用系统默认根据xml文件名生成的

我们知道系统默认是根据xml布局文件名来生成Binding Class Name的,如:first_activity.xml,那么生成的Binding Class Name就是FirstActivityBinding,如果该app module的包名为com.sunzxyong.hello,那么生成的Bindind Class Name所处的依赖的包为com.sunzxyong.hello.databinding,在使用时候AS会自动导入该包,如:

import com.sunzxyong.hello.databinding.FirstActivityBinding
    
    
  • 1

那么怎么自定义Binding Class 名呢?就是通过<data class=”“>设置<data>节点中class的名字就是我们自定义的Binding Class 名字,比如我们把Binding Class 名改为MyBinding,则:

<data class="MyBinding">
...
</data>
    
    
  • 1
  • 2
  • 3

则该xml的Binding Class Name为MyBinding,代码中获取就变为这样了:

MyBinding mBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
    
    
  • 1

而它的默认依赖包名也是在module包下的databinding包中。
当然也可以自己定义Binding Class 的包名:

<data class="com.example.MyBinding">
    ...
</data>
    
    
  • 1
  • 2
  • 3

当布局中包含另外一个子布局时,使用include时数据共享

如:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:bind="http://schemas.android.com/apk/res-auto">
   <data>
       <variable name="user" type="com.sunzxyong.User"/>
   </data>
   <LinearLayout
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       <include layout="@layout/name"
           bind:user="@{user}"/>
       <include layout="@layout/contact"
           bind:user="@{user}"/>
   </LinearLayout>
</layout>
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

该布局包含了两个另外的子布局分别为name.xml和contact.xml,那么如果想要这两个子布局也共用一个User数据,那么需要在include节点中添加:

bind:user=”@{user}”
然后添加命名空间:
xmlns:bind=”http://schemas.android.com/apk/res-auto”

然后name.xml和contact布局中也需要定义数据绑定:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:bind="http://schemas.android.com/apk/res-auto">
   <data>
       <variable name="user" type="com.sunzxyong.User"/>
   </data>
   <LinearLayout
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.userName}" />
   </LinearLayout>
</layout>
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

【注意】:官方文档上说the following layout is not supported <merge>标签

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:bind="http://schemas.android.com/apk/res-auto">
   <data>
       <variable name="user" type="com.sunzxyong.User"/>
   </data>
   <merge>
       <include layout="@layout/name"
           bind:user="@{user}"/>
       <include layout="@layout/contact"
           bind:user="@{user}"/>
   </merge>
</layout>
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

这是不支持的。


@{}表达式支持的运算

基本上和java的一样:

Mathematical + - / * %
String concatenation +
Logical && ||
Binary & | ^
Unary + - ! ~
Shift >> >>> <<
Comparison == > < >= <=
instanceof
Grouping ()
Literals - character, String, numeric, null
Cast
Method calls
Field access
Array access []
Ternary operator ?:

如:

android:text="@{String.valueOf(index + 1)}"
android:visibility="@{age &lt; 13 ? View.GONE : View.VISIBLE}"
android:transitionName='@{"image_" + id}'
    
    
  • 1
  • 2
  • 3

不支持的语法:

this
super
new

Null Coalescing 操作符

如果firstName为null,则选择laseName,否则选择firstName:

android:text="@{user.firstName ?? user.lastName}"
    
    
  • 1

它等于:

android:text="@{user.firstName != null ? user.displayName : user.lastName}"
    
    
  • 1

使用Map<Key,Value>集合

<data>
    <import type="java.util.Map"/>
    <variable name="map" type="Map&lt;String, String>"/>
    <variable name="key" type="String"/>
</data>
…
android:text="@{map[key]}"
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

可以看到map的数据获取也是通过map[]中括号的形式,只不过这里传入的是对应的Key,而List则是传入对应的int类型的索引。

Resources资源的访问

android:padding="@{large? @dimen/largePadding : @dimen/smallPadding}"
android:text="@{@string/nameFormat(firstName, lastName)}"
android:text="@{@plurals/banana(bananaCount)}"
    
    
  • 1
  • 2
  • 3

可以看到和平常的访问是一样的,也是通过@访问。

好了,Data Binding的语法的使用就讲完了!下一篇将继续叙述高级的用法。。。






设置View的id

虽然说Data Binding这种分层模式使得我们对数据的传递简单明了,一般情况下我们可以不设置View的id,不使用findViewById即可对View进行数据上一系列的操作,不过有时候根据情况我们需要对某些View设置id,但是还是可以不findViewById即可得到该控件的对象,因为设置id后ViewDataBinding类会自动生成对应的控件对象,如:

<layout xmlns:android="http://schemas.android.com/apk/res/android">
   <data>
       <variable name="user" type="com.sunzxyong.User"/>
   </data>
   <LinearLayout
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       <TextView android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@{user.userName}"
           android:id="@+id/userName"/>
       <TextView android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@{user.userPassword}"
          android:id="@+id/userPassword"/>
   </LinearLayout>
</layout>
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

那么在ViewDataBinding类中会自动生成相应的控件对象:

public final TextView userName;
public final TextView userPassword;
    
    
  • 1
  • 2

这些对象名和id名是一样的,然后我们可以通过:

ActivityMainBinding mBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
TextView mTvUserName = mBinding.userName;
TextView mTvPassword = mBinding.userPassword;
    
    
  • 1
  • 2
  • 3

即可得到TextView的对象了,再进行后续操作。。。

Observable观察者

我们知道,Data Binding中如果我们直接修改Model实体对象(也就是POJO)中的数据,这些数据并不能直接更新到UI,所以Data Binding给了我们一套很好的通知机制,分别有三类: Observable objects, observable fields, and observable collections,分别表示观察对象、观察字段、观察集合,若相应的对象、字段、集合中数据变化时候,那么UI将会自动更新数据。下面我们一一来介绍它们的用法:

Observable objects

因为Observable是个接口,Google为我们提供了一个BaseObservable类,我们只要把Model类继承自它就获得了通知UI更新数据的能力了,然后再getter方法上添加Bindable注解,在setter方法中使用notifying提醒UI更新数据。如:

private static class User extends BaseObservable {
   private String userName;
   private String userPassword;
   public User(String userName, String userPassword) {
        this.userName = userName;
        this.userPassword = userPassword;
    }

    @Bindable
    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
        notifyPropertyChanged(BR.userName);
    }

    @Bindable
    public String getUserPassword() {
        return userPassword;
    }

    public void setUserPassword(String userPassword) {
        this.userPassword = userPassword;
        notifyPropertyChanged(BR.userPassword);
    }
}
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

首先我们需要在getter方法上添加Bindable注解后,Bindable注解会自动生成一个BR类,该类位于app module包下,通过BR类我们设置更新的数据,当Model中的数据发生变化时,setter方法中的notifyPropertyChanged()就会通知UI更新数据了。

下面我们通过一个Demo来看看效果吧:
原先的User类:
我们没有继承BaseObservable

public class User  {
    private String userName;
    private String userPassword;

    public User(String userName, String userPassword) {
        this.userName = userName;
        this.userPassword = userPassword;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getUserPassword() {
        return userPassword;
    }

    public void setUserPassword(String userPassword) {
        this.userPassword = userPassword;
    }

}
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

然后onCreate()方法中代码为:

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       ActivityMainBinding mBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        final User user = new User("Sunzxyong", "12345678");
        mBinding.setUser(user);
        //点击按钮改变User的数据
        mBinding.btn.setOnClickListener(new android.view.View.OnClickListener() {
            @Override
            public void onClick(android.view.View v) {
                user.setUserName("Hello");
                user.setUserPassword("87654321");
            }
        });
    }
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

效果如下:
这里写图片描述
我们无论怎么点击UI界面上都没有更新数据。。。

那么我们把User类继承自BaseObservable:

public class User extends BaseObservable {
    private String userName;
    private String userPassword;

    public User(String userName, String userPassword) {
        this.userName = userName;
        this.userPassword = userPassword;
    }

    @Bindable
    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
        notifyPropertyChanged(BR.userName);
    }

    @Bindable
    public String getUserPassword() {
        return userPassword;
    }

    public void setUserPassword(String userPassword) {
        this.userPassword = userPassword;
        notifyPropertyChanged(BR.userPassword);
    }
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

onCreate()的代码还是一样:

 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        com.sunzxyong.binding.databinding.ActivityMainBinding mBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        final User user = new User("Sunzxyong", "12345678");
        mBinding.setUser(user);
        mBinding.btn.setOnClickListener(new android.view.View.OnClickListener() {
            @Override
            public void onClick(android.view.View v) {
                user.setUserName("Hello");
                user.setUserPassword("87654321");
            }
        });
    }
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

效果如下:
这里写图片描述

可以看到Model中的数据更新时UI界面上的数据也同时更新了。

ObservableFields

我们刚刚介绍的通知UI更新的方法是用User类继承自BaseObservable,然后在getter上添加注解、在setter中添加notify方法,这感觉总是有点麻烦,步骤繁琐,于是,Google推出ObservableFields类,使用它我们可以简化我们的Model类,如:

public class User{
    public final ObservableField<String> userName = new ObservableField<>();
    public final ObservableField<String> userPassword = new ObservableField<>();
}
    
    
  • 1
  • 2
  • 3
  • 4

没错刚刚那一堆代码就变成了两行,然后通过:

User user = new User();
user.userName.set("sunzxyong");
user.userPassword.set("12345678");
String userName = user.userName.get();
String userPassword = user.userPassword.get();
    
    
  • 1
  • 2
  • 3
  • 4
  • 5

来设置和获取数据,这样就简便多了。于是onCreate()方法中的代码就变成了这样:

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityMainBinding mBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        final User user = new User();
        user.userName.set("sunzxyong");
        user.userPassword.set("12345678");
        mBinding.setUser(user);
        mBinding.btn.setOnClickListener(new android.view.View.OnClickListener() {
            @Override
            public void onClick(android.view.View v) {
                user.userName.set("hello");
                user.userPassword.set("87654321");
            }
        });
    }
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

我们还是来看一下效果:
这里写图片描述
UI还是正常更新数据。
当然ObservableField<T>中传入的泛型可以是java中的基本类型,当然我们还可以使用 ObservableBoolean, ObservableByte, ObservableChar, ObservableShort, ObservableInt, ObservableLong, ObservableFloat, ObservableDouble, ObservableParcelable等具体的类型,效果也和ObservableField<T>是一样的,如:

public class User{
    public final ObservableField<String> userName = new ObservableField<>();
    public final ObservableField<Integer> userPassword = new ObservableField<>();
    public final ObservableInt userAge = new ObservableInt();
}
    
    
  • 1
  • 2
  • 3
  • 4
  • 5

Observable Collections

Google也为我们提供了一些通知类型的集合,有这三种:ObservableArrayList<T>、ObservableArrayMap<K,V>、ObservableMap<K,V>,它和平场使用的List、Map用法一样,但是多了通知功能。
我们在layout中的<data>区域导入包后就可以直接用它了,当它内部的数据发生改变时就自动会通知UI界面更新。如:

<data>
        <import type="android.databinding.ObservableMap"/>
        <import type="com.sunzxyong.binding.Keys"/>
        <variable
            name="map"
            type="ObservableMap&lt;String,Object>"/>
</data>
......
<TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{map[Keys.name]}" />

<TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{String.valueOf(1+(Integer)map[Keys.age])}" />
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

我来看一个Demo,使用ObservableMap<K,V>,当map中的数据改变时候同时也通知了UI界面更新。
xml布局为:

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <import type="android.databinding.ObservableMap"/>
        <import type="com.sunzxyong.binding.Keys"/>
        <variable
            name="map"
            type="ObservableMap&lt;String,Object>"/>
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{map[Keys.name]}" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{String.valueOf(1+(Integer)map[Keys.age])}" />
        <Button
            android:id="@+id/btn"
            android:layout_marginTop="30dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="changeData" />
    </LinearLayout>
</layout>
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

onCreate()方法:

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityMainBinding mBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        final ObservableMap<String, Object> map = new ObservableArrayMap<>();
        map.put("name", "sunzxyong");
        map.put("age", 22);
        mBinding.setMap(map);

        mBinding.btn.setOnClickListener(new android.view.View.OnClickListener() {
            @Override
            public void onClick(android.view.View v) {
                map.put("name","hello");
                map.put("age",20);
            }
        });
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

Keys类:

public class Keys{
    public static final String name = "name";
    public static final String age = "age";
}
    
    
  • 1
  • 2
  • 3
  • 4

效果:
这里写图片描述

创建Binding类

我们将数据绑定到xml文件后,Binding类是自动根据xml布局文件名生成的(继承自android.databinding.ViewDataBinding),我们创建Binding对象一般有以下几种方法:

  1. 直接使用自动创建的Binding类创建
MyLayoutBinding binding = MyLayoutBinding.inflate(layoutInflater);
MyLayoutBinding binding = MyLayoutBinding.inflate(layoutInflater, viewGroup, false);
    
    
  • 1
  • 2
  1. 绑定根布局View
MyLayoutBinding binding = MyLayoutBinding.bind(viewRoot);
    
    
  • 1
  1. 使用DataBindingUtil创建
ViewDataBinding binding = DataBindingUtil.inflate(LayoutInflater, layoutId,
    parent, attachToParent);
ViewDataBinding binding = DataBindingUtil.bindTo(viewRoot, layoutId);
    
    
  • 1
  • 2
  • 3

Dynamic Variables动态变量

根据Google官方文档:

At times, the specific binding class won’t be known. For example, a RecyclerView.Adapter operating against arbitrary layouts won’t know the specific binding class. It still must assign the binding value during the onBindViewHolder(VH, int).

说明在使用ListView、GridView、RecyclerView的时候,由于绑定的类不能确定,比如RecyclerView只有在onBindViewHolder()方法中才能确定绑定的Item,所以我们只有在该办法中动态得到Binding Class(ViewModel)、动态绑定数据。方法是:
1、先创建好一个item布局,在布局中绑定数据:

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

    <data>
        <variable
            name="user"
            type="com.sunzxyong.binding.model.User"/>
    </data>

    <LinearLayout
        ...>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.userName}"
            android:textSize="20sp"
            android:textColor="#ffffff" />
...
    </LinearLayout>
</layout>
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

2、创建ViewHolder时定义一个和item布局 对应的Binding 对象,通过getter和setter对这个Binding对象操作:

public class BindingHolder extends RecyclerView.ViewHolder {
    private RecyclerItemBinding binding;

    public BindingHolder(View itemView) {
        super(itemView);
    }

    public RecyclerItemBinding getBinding() {
        return binding;
    }

    public void setBinding(RecyclerItemBinding binding) {
        this.binding = binding;
    }
}
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

3、在Adapter中onCreateViewHolder()方法中使用DataBindingUtil.inflate()创建Binding 对象,然后创建一个ViewHolder对象,通过ViewHolder的set把Binding对象设置进去:

RecyclerItemBinding mItemBinding = DataBindingUtil.inflate(LayoutInflater.from(mContext), R.layout.recycler_item, parent, false);
BindingHolder mHolder = new BindingHolder(mItemBinding.getRoot());
mHolder.setBinding(mItemBinding);//把mItemBinding设置给ViewHolder
    
    
  • 1
  • 2
  • 3

4、在onBindViewHolder()方法中通过holder的getBinding()方法得到item对应的Binding 对象,再设置数据:

//通过holder.getBinding()得到Binding Class
User user = users.get(position);
holder.getBinding().setVariable(com.sunzxyong.binding.BR.user,user);
holder.getBinding().executePendingBindings();//立即更新UI
    
    
  • 1
  • 2
  • 3
  • 4

好了Data Binding的高级用法就讲完了,下一篇我们通过一个Demo来看看怎么整体使用Data Binding。。。













1、使用MVVM模式,让整个项目结构清晰明了
2、通过ViewModel连接View和Model,使得View与Model层解耦,分层后各司其职,维护方便
3、易于项目的测试
4、可以根据id自动生成View的对象,再也不用findViewById了

好了,说了好处,当然也有不太好的地方,毕竟是今年刚刚推出来的,我总结出了两大缺点,我想以后的版本肯定会改进的:

1、Data Binding进行数据绑定时,不能通过代码提示写后续代码,全部都是需要一个一个手写,而且语法检查只在编译时检查,这个过程比较繁琐
2、Data Binding目前只有单向绑定,并不能双向的绑定,后续版本加上了双向绑定我想谁能拒绝用它呢

下面通过一个Demo来看Data Binding在RecyclerView中的使用:

Model层

就只有一个User类,它继承自BaseObservable,并在getter方法中加入@Bindable注解,在setter方法中加入notifyPropertyChanged(),这样User中的数据更新时可以通知UI更新:

public class User extends BaseObservable{
    private String userName;
    private String userPassword;
    private int userAge;
    @Bindable
    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
        notifyPropertyChanged(com.sunzxyong.binding.BR.userName);
    }
    @Bindable
    public String getUserPassword() {
        return userPassword;
    }

    public void setUserPassword(String userPassword) {
        this.userPassword = userPassword;
        notifyPropertyChanged(com.sunzxyong.binding.BR.userPassword);
    }
    @Bindable
    public int getUserAge() {
        return userAge;
    }

    public void setUserAge(int userAge) {
        this.userAge = userAge;
        notifyPropertyChanged(com.sunzxyong.binding.BR.userAge);
    }

    public User(String userName, String userPassword, int userAge) {
        this.userName = userName;
        this.userPassword = userPassword;
        this.userAge = userAge;
    }
}
  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

View层

主界面:

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#03A9F4" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
</layout>
  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

recycler_item:

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

    <data>
        <variable
            name="user"
            type="com.sunzxyong.binding.model.User"/>
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="5dp"
        android:background="#009688"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.userName}"
            android:textSize="20sp"
            android:textColor="#ffffff" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.userPassword}"
            android:textSize="20sp"
            android:textColor="#ffffff" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{String.valueOf(user.userAge)}"
            android:textSize="20sp"
            android:textColor="#ffffff" />
    </LinearLayout>
</layout>
  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

recycler_item中绑定了User。。。

ViewModel层:

设置Toolbar和RecyclerView:
我们通过得到ActivityMainBinding对象得到Toolbar控件和RecyclerView控件:

//设置Toolbar
        ActivityMainBinding mainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        mainBinding.toolbar.setTitle("Android Data Binding代码实战");
        mainBinding.toolbar.setTitleTextColor(Color.WHITE);
        setSupportActionBar(mainBinding.toolbar);

        initData();

        //设置RecyclerView
        mainBinding.recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
        MyRecyclerViewAdapter adapter = new MyRecyclerViewAdapter(this,users);
        mainBinding.recyclerView.setAdapter(adapter);
  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

BindingHolder:

public class BindingHolder extends RecyclerView.ViewHolder {
    private RecyclerItemBinding binding;

    public BindingHolder(View itemView) {
        super(itemView);
    }

    public RecyclerItemBinding getBinding() {
        return binding;
    }

    public void setBinding(RecyclerItemBinding binding) {
        this.binding = binding;
    }
}
  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

MyRecyclerViewAdapter:

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<BindingHolder> {
    private Context mContext;
    private List<User> users;
    private List<Integer> heights;
    public MyRecyclerViewAdapter(Context context,List<User> users) {
        this.mContext = context;
        this.users = users;
        initHeight();
    }
    private void initHeight(){
        heights = new ArrayList<>();
        for (int i = 0; i < users.size(); i++) {
            heights.add(200+(int)(300*Math.random()));
        }
    }
    @Override
    public BindingHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        RecyclerItemBinding mItemBinding = DataBindingUtil.inflate(LayoutInflater.from(mContext), R.layout.recycler_item, parent, false);
        BindingHolder mHolder = new BindingHolder(mItemBinding.getRoot());//得到根布局View设置给ViewHolder
        mHolder.setBinding(mItemBinding);//把mItemBinding设置给ViewHolder
        return mHolder;
    }

    @Override
    public void onBindViewHolder(BindingHolder holder, int position) {
        ViewGroup.LayoutParams params = holder.itemView.getLayoutParams();
        params.height = heights.get(position);
        holder.itemView.setLayoutParams(params);

        //通过holder.getBinding()得到Binding Class
        User user = users.get(position);
        holder.getBinding().setVariable(com.sunzxyong.binding.BR.user,user);//动态设置数据
//        holder.getBinding().setUser(user);这种方式也行,因为User继承自BaseObservable
        holder.getBinding().executePendingBindings();//立即更新UI
    }

    @Override
    public int getItemCount() {
        return users.size();
    }
}

  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

效果:
这里写图片描述
源码地址
好了,Android Data Binding目前全部功能就讲完了
Google官方文档:https://developer.android.com/intl/zh-cn/tools/data-binding/guide.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值