Android MVVM 系列之 Databinding（一）

Android MVVM 系列之 Databinding（一）

写在最前，先借用前人的话讲一下MVVM的概念：

Databinding 是一种框架，MVVM是一种架构，一种模式。DataBinding是一个实现数据和UI绑定的框架，是实现MVVM模式的工具，而MVVM中的VM（ViewModel）和View可以通过DataBinding来实现数据绑定（目前已支持双向绑定）

关于MVVM的更详细的介绍请看：

• android UI设计MVVM设计模式讨论？

• Android MVVM模式的理解

MVVM 是一种架构，DataBinDing 只是一个易于实现这种架构的一个工具，网上 MVVM 的教程很多，但是成套的很少，大多讲的都是 DataBinding 库的使用方式，我这里会讲从使用 DataBinding 库到开发一个 MVVM 模式的程序。

一、在项目中添加 DataBinding 库

1.开发环境

Android studio 版本 1.3 以上，Gradle 插件 1.5 以上。

截至文章撰写之前，还在使用低于 2.3.3 版本的 studio 和 Gradle 就是耍流氓！

2.添加依赖

打开 model 的 build.gradle 文件，添加以下代码

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

这样就可以在项目中使用 DataBinding 这个框架了。然后呢，这里还有一个 Data Binding Compiler V2 这是 Google 在 Android Gradle Plugin 3.1.0 Canary 6 以后推出的一个新的编译器，详细请看 Google 文档，开启只需要在 gradle.properties 文件中添加

android.databinding.enableV2=true

或者还可以通过添加以下参数在gradle命令中启用新编译器：

-Pandroid.databinding.enableV2=true

注意： V1 与 V2 不兼容，添加以后可能需要 clean 下项目

二、在项目中使用

1.替换旧的布局文件

第一步，我们需要把布局文件的根节点变为 layout 节点

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

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.xxj.mvvm.demo.android_mvvm_demo.MainActivity">

        <TextView...>

    </android.support.constraint.ConstraintLayout>
</layout>

我去，难道每个布局我都得这么写么？当然，一开始我确实是这样来的，但我发现其实 Android studio 有自带的快捷转换功能，只要在根布局 Alt+Enter 就可以一键转换

额，看了我的文章自然不能让你们空手而归，继续安利一发插件 DataBinding Support 咳咳，插件怎么装不用我说了吧。。。

第二步，修改 Activity 中的代码

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_main);
        /*
         使用 DataBinding 布局后这里需要 DataBindingUtil 来完成 setContentView
         返回值是布局的 ViewBinding 对象，
         这个类是 DataBinding 框架自动生成，类文件在 app/build/intermediates/classes/yourpackage/databinding
         修改布局后如果发现 ViewBinding 类没有及时生成，工具栏找小锤子 Make Project 一下就好
        */
        ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
    }
}

在 Fragment 中

public class MainFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        //DataBinding 布局是可以使用下面两种方式，inflate 出来的。
//        FragmentMainBinding binding = DataBindingUtil.inflate(inflater, R.layout.fragment_main, container, false);
        FragmentMainBinding binding = FragmentMainBinding.inflate(inflater, container, false);
        return binding.getRoot();
    }
}

然后试着运行一下吧，Hello World 应该成功跑起来了

2.简单数据绑定

布局是修改完成了，接下来我们就要绑定（Binding）数据（Data）了。

第一步，我们先搞个实体类出来

public class User {
    private String name;
    private int age;

    ...getter and setters...
}

第二步，我们需要吧这个类放到我们的布局内，控件使用绑定的数据很简单，使用 @{} 就可以了（双向绑定使用 @={} 后面讲）

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

    <!-- data 标签里面的就是要 Binding 的数据
         如果你觉得自动生成的类名不爽的话，可以在 data 标签内加上 class 属性，如：
         <data class=".MyBinding">
         这样的话DataBinding生成的类名就是你想要的了
    -->
    <data>
        <!-- 数据对象，name 是变量名，type 是类的全路径 -->
        <variable
            name="user"
            type="com.xxj.mvvm.demo.android_mvvm_demo.User" />
    </data>

    <!-- 为了方便展示，我把根布局换了 -->
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- 这里的 user.name 调用的实际上是 User 类中的 getName() 方法，如果没有对应的 get 方法，就会报错 -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.name}" />

        <!-- 我们知道 TextView 的内容必须是 String 类型的，这里传入 int 会报错
             java.lang 包下的类不需要导入 -->
        <TextView
            android:text="@{String.valueOf(user.age)}"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</layout>

注意：注意看代码中的注释！！！我踩过的坑你们就别再掉下去了QAQ

第三步，在 Activity 中给实体类赋值

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        User user = new User();
        user.setName("张三");
        user.setAge(88);
        //这里可能会有好事之徒说，我不传 user 呢？我不给他某个参数赋值呢？
        //答：DataBinding不惧怕空指针异常,若表达式结果为null,则根据其结果的值类型显示不同,比如引用类型显示null,int类型显示0,string类型显示空
        binding.setUser(user);
    }

结果肯定是成功的，我就不给大家展示了，下面开始讲事件绑定，嗯，比较多，但是得看全了。

3.表达式使用

关键字

类似于 @{String.valueOf(user.age)} 您也可以在表达式中以下的运算符和关键字：
- 运算类 + - / * % && || & | ^ ! ~ == > < >= <= () >> >>> <<
- 字符串连接 + （注意字符串要用“括起来）
- instanceof
- 文字 - 字符，字符串，数字， null
- 强转 cast
- 方法调用
- res 资源访问
- 数组访问 []
- 三目运算 ?:
- 合并运算 ??

例子：

android:text="@{String.valueOf(index + 1)}"
android:visibility="@{user.age < 13 ? View.GONE : View.VISIBLE}"
android:transitionName='@{"image_" + id}'

不支持的操作：
- this
- super
- new
- 显式泛型调用

合并运算：
null 合并运算符（??）选择左边的是 null 吗？，不是选左边，如果是选右边。

android:text="@{user.displayName ?? user.lastName}"

在功能上等同于：

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

集合

DataBinding 中可以使用操作符访问常见集合，例如 []、List、Map等

<data>
    <import type="android.util.SparseArray"/>
    <import type="java.util.Map"/>
    <import type="java.util.List"/>
    <variable name="list" type="List&lt;String&gt;"/>
    <variable name="sparse" type="SparseArray&lt;String&gt;"/>
    <variable name="map" type="Map&lt;String, String&gt;"/>
    <variable name="index" type="int"/>
    <variable name="key" type="String"/>
</data>
…
android:text="@{list[index]}"
…
android:text="@{sparse[index]}"
…
android:text="@{map[key]}" //注意：这里也可以换成 @{map.key}

字符串

您可以使用单引号将属性值包围起来，这样可以在表达式中使用双引号，例：

android:text='@{map["firstName"]}'

也可以使用双引号来包围属性值，字符串用后引号括起来：

android:text="@{map[`firstName`]}"

注意： 拼接字符串的时候需要单引号包围属性值，拼接字符串用双引号包围，拼接的字符串不要使用中文 ！！！

Resources

您可以使用以下语法访问表达式中的资源：

android:padding="@{large? @dimen/largePadding : @dimen/smallPadding}"

格式字符串和复数可以通过提供参数来使用：

android:text="@{@string/nameFormat(firstName, lastName)}"
android:text="@{@plurals/banana(bananaCount)}"

当一个复数需要多个参数时，应该传递所有参数：

  Have an orange
  Have %d oranges

android:text="@{@plurals/orange(orangeCount, orangeCount)}"

某些资源需要使用显式类型，如下表所示：

类型	正常引用	表达式引用
String[]	@array	@stringArray
int[]	@array	@intArray
TypedArray	@array	@typedArray
Animator	@animator	@animator
StateListAnimator	@animator	@stateListAnimator
color int	@color	@color
ColorStateList	@color	@colorStateList

4.事件绑定（Event Handling）

看了这么久，终于来到了重头戏！！没有事件绑定的 DataBinding 是没有灵魂的。

事件处理 Google 给出了以下两种方式：

方法引用（Method references）

事件可以直接绑定到处理程序方法，类似于android:onClick 可以分配给 Activity 中的方法的方式（android:onClick=”onClick”，这种的）。与View onClick属性相比，一个主要优点 是表达式在编译时处理，所以如果该方法不存在或其签名不正确，则会收到编译时错误。

方法引用和侦听器绑定之间的主要区别在于实际的侦听器实现是在数据绑定时创建的，而不是在事件触发时创建的。如果您希望在事件发生时检查表达式，则应使用侦听器绑定。

话不多说，例子如下：

写个事件出来先

public class EventHandler {
    public void onUserClick(View view) {
        Toast.makeText(Utils.getContext(), "User is click ！", Toast.LENGTH_LONG).show();
    }
}

<data>
    ...
    <variable
        name="event"
        type="com.xxj.mvvm.demo.android_mvvm_demo.EventHandler" />
</data>
    ...
    <TextView
        ...
        android:onClick="@{event::onUserClick}"
        android:text='@{user.name+"abc"}' />

最后别忘了把事件绑到布局中，好多人忘了这一步

binding.setEvent(new EventHandler());

点击名字效果如图

监听器绑定（Listener bindings）

监听器绑定是发生事件时运行的绑定表达式。它们与方法引用类似，但它们允许您运行任意数据绑定表达式。此功能适用于Gradle 2.0版及更高版本的Android Gradle插件。

在方法引用中，方法的参数必须与事件侦听器的参数匹配。在侦听器绑定中，只有您的返回值必须与侦听器的期望返回值相匹配（除非它为void）。例：

咱在刚刚的 EventHandler 类中加一个方法

public void onUserClick1(User user){
    Toast.makeText(Utils.getContext(), "User is click ！"+user.getName(), Toast.LENGTH_LONG).show();
}

我们把这个事件加到 demo 中用户年龄上

<TextView
    ...
    android:onClick="@{() -> event.onUserClick1(user)}"
    android:text="@{String.valueOf(user.age)}" />

在上面的例子中，我们没有定义view传递给的参数onClick(View)。监听器绑定为监听器参数提供了两种选择：您可以忽略该方法的所有参数或命名所有参数。如果您更喜欢命名参数，则可以在表达式中使用它们。例如，上面的表达式可以写成如下形式：

android:onClick="@{(view) -> event.onUserClick1(user)"

或者如果你想在表达式中使用参数，可以用以下方法：

public void onUserClick2(View view, User user){
    view.setBackgroundColor(Color.BLUE);
    Toast.makeText(Utils.getContext(), "User is click ！"+user.getName(), Toast.LENGTH_LONG).show();
}

<TextView
    android:layout_width="200dp"
    android:layout_height="50dp"
    android:gravity="center"
    android:onClick="@{(v) -> event.onUserClick2(v, user)}"
    android:text="@{user.sex}" />

效果如图：

你也可以使用带有多个参数的lambda表达式：

public void onCompletedChanged(Task task, boolean completed){ ... }

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:onCheckedChanged="@{(cb, isChecked) -> presenter.completeChanged(task, isChecked)}" />

如果您正在侦听的事件返回其类型不是 Void，则您的表达式也必须返回相同类型的值。例如，如果您想要监听长按事件，则应该返回表达式boolean。

public boolean onLongClick(View view, Task task){ ... }

android:onLongClick="@{(theView) -> presenter.onLongClick(theView, task)}"

如果您需要使用带判断的表达式（例如三元），可以将 void 用作符号。

android:onClick="@{(v) -> v.isVisible() ? doSomething() : void}"

注意： 要避免使用复杂的表达式，应该把逻辑尽量的写到 Java 代码中

5.标签的使用（include,merge）

额，import、variables、data 都在最上面讲过了，剩下的

include

使用 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.example.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>

merge 标签，不支持，会 Boom ！

demo传送门