Android MVVM 系列之 Databinding(一)

Android MVVM 系列之 Databinding(一)

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

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

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

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

[TOC]

一、在项目中添加 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 就可以一键转换

image

额,看了我的文章自然不能让你们空手而归,继续安利一发插件 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());

点击名字效果如图
[图片上传失败...(image-18b3e1-1527072014457)]

监听器绑定(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}" />

效果如图:

[图片上传失败...(image-585c4b-1527072014457)]

你也可以使用带有多个参数的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传送门

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,311评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,339评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,671评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,252评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,253评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,031评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,340评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,973评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,466评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,937评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,039评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,701评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,254评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,259评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,497评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,786评论 2 345

推荐阅读更多精彩内容

  • 一个刚入行半年的菜鸟安卓开发人员,始终有一颗不安分的心。mvvm框架是我在学习vue的时候才知道的一种新型架构。公...
    sakasa阅读 4,246评论 5 22
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,599评论 18 139
  • 先吐槽下,不说不爽,不说不通达 不吐不快,集合我这几天学习 DataBinding 的经历说几句。DataBind...
    前行的乌龟阅读 21,236评论 13 46
  • DataBinding 库是 Google 公司 Android Framework UI 工具团队开发出来的一款...
    bravian阅读 5,406评论 2 16
  • 小时候和母亲一起回娘家。那时我初中毕业,12岁。路上母亲遇到一位故人,不知谈了些什么,我不明白,但我记住了一个女人...
    疏桐流响阅读 205评论 0 0