Google DataBinding的简单使用

简介

官方解释

Android data binding operates primarily at compile time, processing expressions found in the layout file and generating code in the application. This package contains common code that will be included with the application, just like support library components.

Demo解决了什么问题

对象 对 视图 的绑定(只修改对象的值,绑定的视图随之改变)
对象 和 视图 的 双向 绑定(除了上面一点特性,还能通过修改视图,从而改变对象的值)
结合 ListView 去更新列表视图的数据(之前项目有一个需求,点进去查看动态详情,评论后返回动态列表,动态列表显示的评论数量对应增加)

环境

开发环境

APP运行环境: API 7+即可
开发IDE: Android Studio

环境配置

确保jcenter在repositories列表

allprojects {
   repositories {
       jcenter()
   }
}

开启DataBinding支持

android {
    ...
    dataBinding{
        enabled = true;
    }
}

例子

对象绑定到视图

Model定义

public class User {
    public ObservableField<String> firstName = new ObservableField<>();
    public ObservableField<String> lastName = new ObservableField<>();

    public User() {

    }

    @Override
    public String toString() {
        return firstName.get() + " " + lastName.get();
    }
}

使用 ObservableField 类来使 firstName 和 lastName 属性变得可观察.当变化后,去更新对用绑定的视图

布局

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

    <data>

        <variable
            name="user"
            type="demo.august1996.top.databingdingusage.bean.User" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


        <EditText
            android:id="@+id/firstNameET"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@{user.firstName}"
            android:textAlignment="center" />

        <EditText
            android:id="@+id/lastNameET"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@{user.lastName}"
            android:textAlignment="center" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="test"
            android:text="测试(修改数据后显示)" />
    </LinearLayout>
</layout>

布局与以前不一样的是,使用 layout 作为root标签.
引入 <data> 标签,其中

variable 为绑定的对象
user 为绑定对象映射过来的名称(类似于形参)
type 为绑定对象的类型

接着就是变量解析的语法了 @{变量名.成员属性}

Activity:

package demo.august1996.top.databingdingusage.activity;

import android.databinding.DataBindingUtil;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Toast;

import demo.august1996.top.databingdingusage.R;
import demo.august1996.top.databingdingusage.bean.User;
import demo.august1996.top.databingdingusage.databinding.ActivityDataBind2ViewBinding;

public class DataBind2ViewActivity extends AppCompatActivity {

    private User user;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_data_bind2_view);

        user = new User();
        user.firstName.set("Yu");
        user.lastName.set("jianbin");

        ActivityDataBind2ViewBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_data_bind2_view);
        binding.setUser(user);

    }

    public void test(View v) {
        user.firstName.set("August");
        user.lastName.set("1996");
        Toast.makeText(this, user.toString(), Toast.LENGTH_SHORT).show();
    }
}

其中 XXXBinding这个类是Android Studio帮我们生成的.命名规范是参照布局文件名字: 把下划线命名改成驼峰命名,例如 activity_data_bind2_view.xml 变成了 ActivityDataBind2ViewBinding.

通过 DataBindingUtil.setContentView 我们获取了对应的Binding对象,其中 setUser方法 就是我们在布局文件里面写了user变量,然后系统自动生成的.

现在Activity全局变量user就已经和布局文件里面的user关联上了

所以通过 test 函数修改了 user对象 的值.对应的两个 EditText 控件也进行了更新

对象与视图的双向绑定

对于上面的例子,也只能作为 单向绑定 .我们还需要做一个改变视图里面的内容.然后去更新对象的值.

思路

其实很简单,我们只需要给EditText添加内容修改监听.然后再把 user 对象更新就可以了。

新建UserWatcher类

package demo.august1996.top.databingdingusage.watcher;

import android.text.Editable;
import android.text.TextWatcher;

import demo.august1996.top.databingdingusage.bean.User;

/**
 * Created by August on 16/6/17.
 */
public class UserWatcher {

    private User user;

    public UserWatcher(User user) {
        this.user = user;
    }

    public TextWatcher firstNameWatcher = new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void afterTextChanged(Editable editable) {
            user.firstName.set(editable.toString());
        }
    };
    public TextWatcher lastNameWatcher = new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void afterTextChanged(Editable editable) {
            user.lastName.set(editable.toString());
        }
    };
}

没什么,就只在编辑结束后设置 user 对应属性的值

布局文件

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

    <data>

        <variable
            name="user"
            type="demo.august1996.top.databingdingusage.bean.User" />

        <variable
            name="watcher"
            type="demo.august1996.top.databingdingusage.watcher.UserWatcher" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


        <EditText
            android:id="@+id/firstNameET"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:addTextChangedListener="@{watcher.firstNameWatcher}"
            android:text="@{user.firstName}"
            android:textAlignment="center" />

        <EditText
            android:id="@+id/lastNameET"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:addTextChangedListener="@{watcher.lastNameWatcher}"
            android:text="@{user.lastName}"
            android:textAlignment="center" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="test"
            android:text="测试(尝试修改上面数据,显示数据后修改数据)" />
    </LinearLayout>
</layout>

这次我们引入了 watcher 这个变量和它的类型.
然后我们给 EditText 都增加了对应的 android:addTextChangedListener= 时间监听.通过这样,我们就可以把 EditText 的监听和对应的 Watcher 进行关联

Activity代码:


package demo.august1996.top.databingdingusage.activity;

import android.databinding.DataBindingUtil;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Toast;

import demo.august1996.top.databingdingusage.R;
import demo.august1996.top.databingdingusage.bean.User;
import demo.august1996.top.databingdingusage.databinding.ActivityViewBind2DataBinding;
import demo.august1996.top.databingdingusage.watcher.UserWatcher;

public class ViewBind2DataAndDataBind2ViewActivity extends AppCompatActivity {

    private User user;
    private UserWatcher watcher;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_bind2_data);

        user = new User();
        user.firstName.set("Yu");
        user.lastName.set("jianbin");

        watcher = new UserWatcher(user);

        ActivityViewBind2DataBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_view_bind2_data);
        binding.setUser(user);
        binding.setWatcher(watcher);

    }

    public void test(View v) {
        Toast.makeText(this, user.toString(), Toast.LENGTH_SHORT).show();


        user.firstName.set("August");
        user.lastName.set("1996");
    }
}

我们通过 test 方法先把原来的 user 对象的值显示出来.
如果我们修改 EditText 的值,我们发现 user 对象的值已经可以同步了
然后再去修改 user 对象的值, EditText 的值也同步了.

结合ListView使用

个人觉得最大的用处还是结合ListView去使用这个特性

item_user子布局

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

    <data>

        <variable
            name="stu"
            type="demo.august1996.top.databingdingusage.bean.Student" />


    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">


            <EditText
                android:id="@+id/firstNameET"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:hint="firstName"
                android:text="@{stu.firstName}"
                android:textAlignment="center" />

            <EditText
                android:id="@+id/lastNameET"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:hint="lastName"
                android:text="@{stu.lastName}"
                android:textAlignment="center" />


        </LinearLayout>

        <Button
            android:id="@+id/testBtn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="修改对象" />
    </LinearLayout>
</layout>

可以看到跟前面的主布局是差不多的

Model定义

package demo.august1996.top.databingdingusage.bean;

import android.databinding.BaseObservable;
import android.databinding.Bindable;

import demo.august1996.top.databingdingusage.BR;


/**
 * Created by August on 16/6/17.
 */
public class Student extends BaseObservable {
    private String firstName;
    private String lastName;

    public Student(String firstName, String lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    @Bindable
    public String getFirstName() {
        return firstName;
    }

    @Bindable
    public String getLastName() {
        return lastName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
        notifyPropertyChanged(BR.firstName);
    }


    public void setLastName(String lastName) {
        this.lastName = lastName;
        notifyPropertyChanged(BR.lastName);
    }


}

这里的模型定义时需要继承 BaseObservable,并且所有需要绑定的对象的 getter 方法都需要使用 @Bindable 注解,来表示该属性是需要绑定的
BR.class 也是Android Studio帮我们生成的,类似 R.class .里面是一些我们需要绑定的属性的信息
当属性更新时,我们必须使用 notifyPropertyChanged 方法去提醒属性被更新,请求绑定视图同步.
所以我们必须在 setter 方法里面更新完对象值后调用 notifyPropertyChanged 方法

Adapter的编写

package demo.august1996.top.databingdingusage.adapter;

import android.databinding.DataBindingUtil;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;

import java.util.ArrayList;

import demo.august1996.top.databingdingusage.BR;
import demo.august1996.top.databingdingusage.R;
import demo.august1996.top.databingdingusage.bean.Student;
import demo.august1996.top.databingdingusage.databinding.ItemUserBinding;

/**
 * Created by August on 16/6/17.
 */
public class UserAdapter extends BaseAdapter {

    private ArrayList<Student> mDatas;

    public UserAdapter(ArrayList<Student> mDatas) {
        this.mDatas = mDatas;
    }

    @Override
    public int getCount() {
        return mDatas.size();
    }

    @Override
    public Object getItem(int i) {
        return mDatas.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public View getView(final int i, View convertView, ViewGroup viewGroup) {
        ItemUserBinding binding;

        if (convertView == null) {
            binding = DataBindingUtil.inflate(LayoutInflater.from(viewGroup.getContext()), R.layout.item_user, viewGroup, false);
            convertView = binding.getRoot();
            convertView.setTag(binding);
        } else {
            binding = (ItemUserBinding) convertView.getTag();
        }

        binding.setVariable(BR.stu, mDatas.get(i));
        binding.executePendingBindings();
        convertView.findViewById(R.id.testBtn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mDatas.get(i).setFirstName(mDatas.get(i).getFirstName() + i);
                mDatas.get(i).setLastName(mDatas.get(i).getLastName() + i);
            }
        });
        return convertView;
    }

}

与一般Adapter不同的地方主要是在于 getView 方法.
通过 DataBindingUtil.inflate() 方法我们拿到一个 Binding 对象.
然后 ListView 显示的 子视图view 通过 binding.getRoot()来获得
通过 binding.setVariable(); 去设置 子布局 的变量
最后使用 executePendingBindings 方法来通知子视图更新
其中 按钮的监听就是修改 对象的值了,然后就有 视图 同步 对象 的效果了

主布局

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

    <ListView
        android:id="@+id/mListView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></ListView>

</RelativeLayout>

超简单...

Activity代码

package demo.august1996.top.databingdingusage.activity;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ListView;

import java.util.ArrayList;

import demo.august1996.top.databingdingusage.R;
import demo.august1996.top.databingdingusage.adapter.UserAdapter;
import demo.august1996.top.databingdingusage.bean.Student;

public class ListViewActivity extends AppCompatActivity {

    private ListView mListView;
    private ArrayList<Student> mData;
    private UserAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_list_view);

        mListView = (ListView) findViewById(R.id.mListView);

        mData = new ArrayList<>();

        for (int i = 0; i < 10; i++) {
            mData.add(new Student("王" + i, "" + i));
        }

        mAdapter = new UserAdapter(mData);
        mListView.setAdapter(mAdapter);

    }
}

超简单...

import关键字

这个直接上例子会比较好理解

布局文件

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

    <data>

        <import type="java.util.List" />

        <import type="java.util.Map" />

        <import type="java.lang.String" />

        <variable
            name="list"
            type="List&lt;String>" />

        <variable
            name="map"
            type="Map&lt;String,String>" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@{list[0]}" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@{list[1]}" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@{map[`0`]}" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text='@{map["1"]}' />


        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@{@drawable/img}" />
    </LinearLayout>
</layout>

Activity代码

package demo.august1996.top.databingdingusage.activity;

import android.databinding.DataBindingUtil;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

import java.util.ArrayList;
import java.util.HashMap;

import demo.august1996.top.databingdingusage.R;
import demo.august1996.top.databingdingusage.databinding.ActivityImportViewBinding;

public class ImportViewActivity extends AppCompatActivity {


    private ArrayList<String> mList;
    private HashMap<String, String> mMap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_import_view);

        mList = new ArrayList<>();
        mMap = new HashMap<>();

        for (int i = 0; i < 2; i++) {
            mList.add("列表" + i);
            mMap.put(String.valueOf(i), "集合" + i);
        }

        ActivityImportViewBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_import_view);
        binding.setList(mList);
        binding.setMap(mMap);

    }
}

其中 < 这个符号不是乱码出现的.它真的是需要这样写.不能写成 <

参考

官方文档
 Demo

最后编辑于：2017.12.06 01:10:02

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,222评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,455评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,720评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,568评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,696评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,879评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,028评论 3赞 409
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,773评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,220评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,550评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,697评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,360评论 4赞 332
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,002评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,782评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,010评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,433评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,587评论 2赞 350

Google DataBinding的简单使用

简介

官方解释

Demo解决了什么问题

环境

开发环境

环境配置

确保jcenter在repositories列表

开启DataBinding支持

例子

对象绑定到视图

Model定义

布局

Activity:

对象与视图的双向绑定

思路

新建UserWatcher类

布局文件

Activity代码:

结合ListView使用

item_user子布局

Model定义

Adapter的编写

主布局

Activity代码

import关键字

布局文件

Activity代码

参考

推荐阅读更多精彩内容