Jetpack（二）DataBinding从入门到灵活运用

前言

DataBinding其实并不是一个新东西，15年 Google IO 大会就开始推了，一线大厂在比较早就开始使用了，随着Jetpack架构组件的发展，使用DataBinding来进行我们的项目开发已经是大势所趋

那么什么是 DataBinding 呢，字面就是帮我们实现视图和数据绑定的工具，现在主流的前端框架（React、Vue）都用到了这种思想。它可以帮助我们实现，直接操作数据就可以自动改变视图。而不是像过去那样，首先要findViewById拿到组件的引用，当数据发生变化后，我们还需要主动调用组件的相关方法（如setText）进行赋值，才能将数据的改变体现到视图中。DataBinding就是帮助我们实现MVVM架构的最基本的技术支持

导入DataBinding

导入DataBinding非常简单，只需要在app下的gradle文件中配置即可（如下所示）

//build.gradle(:app)
android {
        ....
    buildFeatures {
        dataBinding = true
    }
}

可以这里有的人会好奇，导入Databinding竟然如此简单，也不用添加任何依赖，这是为什么？

Android Studio中是依靠Gradle来管理项目的，在创建一个项目时，从开始创建一直到创建完毕，整个过程是需要执行很多个Gradle task的，这些task有很多是系统预先帮我们定义好的，比如build task，clean task等，DataBinding相关的task也是系统预先帮我们定义好的，但是默认情况下，DataBinding相关的task在task列表中是没有的，因为我们没有开启dataBinding，但是一旦我们通过 buildFeatures{dataBinding= true}的方式开启DataBinding之后，DataBinding相关的task就会出现在task列表中，每当我们执行编译操作时，就会执行这些DataBinding Task，这些task的作用就是检查并生成相关DataBinding代码

DataBinding基本使用

创建一个基本的xml文件

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

</LinearLayout>

使用快捷键option+enter可以快速生成binding layout

自动转化后的格式，以根标记 layout 开头，后跟 data 元素和 view 根元素

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

    <data>

    </data>

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


    </LinearLayout>
</layout>

这里再推荐一款插件，可以简化DataBinding的转换操作并支持和ViewModel和与之关联的layout文件的跳转，可以提升开发时的效率，节省时间，感兴趣的自己点下面的链接进一步了解

https://plugins.jetbrains.com/plugin/9271-databinding-support

现在先建立一个简单的数据模型

public class News {
    private String title;
    private String content;

    public News(String title, String content) {
        this.title = title;
        this.content = content;
    }

    public String getTitle() {
        return title == null ? "" : title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getContent() {
        return content == null ? "" : content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}

我们再写一个简单的布局

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

    <data>

        <import type="com.geekholt.databinding.bean.News" />

        <variable
            name="news"
            type="com.geekholt.databinding.bean.News" />

    </data>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{news.title}" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{news.content}" />
    </LinearLayout>
</layout>

这里主要有两点需要关注：

data 中的 news 变量描述了可在此布局中使用的属性
布局中的表达式使用“@{}”语法写入特性属性中

数据绑定与整体更新

系统会为每个布局文件生成一个绑定类。默认情况下，类名称基于布局文件的名称，它会转换为 Pascal 大小写形式并在末尾添加 Binding 后缀。以上布局文件名为 activity_main.xml，因此生成的对应类为 ActivityMainBinding。此类包含从布局属性（例如，news 变量）到布局视图的所有绑定，并且知道如何为绑定表达式指定值

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ActivityMainBinding mainBinding = DataBindingUtil.setContentView(this,R.layout.activity_main);
    News news = new News("Jetpack","一起学习DataBinding");
    mainBinding.setNews(news);
}

这样就完成了News数据和activity_main.xml的绑定，不仅省略了findViewById的操作，同时也没有针对单个的View去进行赋值，当数据发生变化的时候，只需要重新调用mainBinding.setNews(news)就可以让与数据模型相关的控件都进行刷新

当然，我们也可以针对单个控件进行更新，我们通过一个点击事件，触发news.setContent("一起学习LiveData")，去更改单个属性

public class MainActivity extends AppCompatActivity {
    private static final String TAG = "MainActivity";
    News news;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityMainBinding mainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        news = new News("Jetpack", "一起学习DataBinding");
        mainBinding.setNews(news);
    }

    public void submit(View view) {
        news.setContent("一起学习LiveData");
    }
}

这时候，发现页面并没有发生任何变化，这是为什么呢？

使用BaseObservable更新单个属性

BaseObservable 是一个基类，需要我们的数据 bean 继承这个基类，然后给属性的 get 方法
添加@Bindable 这个注解，然后在属性的 set 方法中添加上更新某个字段的方法notifyPropertyChanged

public class News extends BaseObservable {
    private String title;
    private String content;

    public News(String title, String content) {
        this.title = title;
        this.content = content;
    }

    @Bindable
    public String getTitle() {
        return title == null ? "" : title;
    }

    public void setTitle(String title) {
        this.title = title;
        notifyPropertyChanged(BR.title);
    }

    @Bindable
    public String getContent() {
        return content == null ? "" : content;
    }

    public void setContent(String content) {
        this.content = content;
        notifyPropertyChanged(BR.content);
    }
}

Obserable接口有一个自动添加和移除监听器的机制，但是通知数据更新取决于开发者。为了使开发变得简单，谷歌创建了BaseObserable这个基础类来集成监听器注册机制。通过给getter方法添加Bindable注解，通知setter方法。

使用ObservableField来更新单个属性

ObservableFields 是一个对属性添加 DataBinding 更新功能的代理类，针对不同的数据类型有不同类型的 ObservableFields ：ObservableBoolean、 ObservableByte ObservableChar、ObservableShort、ObservableInt、ObservableLong、ObservableFloat、ObservableDouble、 ObservableParcelable 等。

//News.java
public class News {
    public ObservableField<String> title = new ObservableField<>();
    public ObservableField<String> content = new ObservableField<>();

    public News(String title, String content) {
        this.title.set(title);
        this.content.set(content);
    }
}

//MainActivity.java
public void submit(View view) {
    news.content.set("一起学习LiveData");
}

绑定事件与方法

我们也可以在视图中为点击事件绑定方法

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityMainBinding mainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        mainBinding.setClick(new ClickProxy());
    }

    public class ClickProxy {
        public void submit(String content) {
            //todo something
        }
    }
}

通过android:onClick="@{()->click.submit()}"进行方法绑定，且这种方式支持直接在xml中给方法传参，如下所示

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

    <data>

        <variable
            name="click"
            type="com.geekholt.databinding.MainActivity.ClickProxy" />

        <variable
            name="content"
            type="String" />

    </data>

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

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@={content}" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:onClick="@{()->click.submit(content)}" />


    </LinearLayout>
</layout>

这里有一个细节提一下：

前面我们进行数据绑定用的都是@{}这种形式，这种绑定方式叫做单向数据绑定；而这里我们给EditText绑定数值用到了@={}，中间多了一个等号，这种绑定方式称之为双向数据绑定，即当数据发送变化时，页面也发生变化，当我们在EditText中输入文字，页面发生变化时，所对应的数据也会跟着变化

绑定适配器

自动查找属性所对应的方法

目前为止，我们都是对系统控件（如TextView、Button、EditText）进行数据绑定，那如果自定义控件我们如何给它设定属性并进行数据绑定呢？

public class CustomImageView extends AppCompatImageView {
    public CustomImageView(Context context) {
        super(context);
    }

    public CustomImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setImageUrl(String url) {
        Glide.with(getContext()).load(url).into(this);
    }

}

ImageView本身并不能直接设置网络url并加载，当我们在xml中app:imageUrl="@{imageUrl}" 时，数据绑定库会自动帮我们在CustomImageView中查找setImageUrl(string)方法，并调用执行

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

    <data>

        <variable
            name="imageUrl"
            type="String" />
    </data>

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

        <com.geekholt.databinding.CustomImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:imageUrl="@{imageUrl}" />

    </LinearLayout>
</layout>

如果我们想在xml中调用方法名不是以set开头的方法怎么办呢？

@BindingMethods 自定义方法名称

Databinding库给我们提供了@BindingMethods注解，使用方式如下所示，主要包括type、attribute、method三个部分

@BindingMethods({@BindingMethod(type = AppCompatImageView.class, attribute = "imageChange", method = "imageChange")})
public class CustomImageView extends AppCompatImageView {
    public CustomImageView(Context context) {
        super(context);
    }

    public CustomImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setImageUrl(String url) {
        Glide.with(getContext()).load(url).into(this);
    }

    public void imageChange(String url) {
        Toast.makeText(getContext(), "imageChange：" + url, Toast.LENGTH_SHORT).show();
    }
}

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

    <data>

        <variable
            name="imageUrl"
            type="String" />
    </data>

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

        <com.geekholt.databinding.CustomImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:imageChange="@{imageUrl}"
            app:imageUrl="@{imageUrl}" />

    </LinearLayout>
</layout>

这样一来，每当imageView的url发生变化的时候，就会弹出一个Toast

@BindingAdapter 自定义逻辑

接下里要说的部分，将会是本文的重点，也是将DataBinding应用于企业级项目中的一个关键

很多人对DataBinding的第一印象，似乎都是在xml中编写逻辑代码，就像下面这样：

android:text="@{String.valueOf(index + 1)}"

android:visibility="@{age < 13 ? View.GONE : View.VISIBLE}"
  
android:transitionName='@{"image_" + id}'
  
android:text="@{@string/nameFormat(firstName, lastName)}"
  
android:padding="@{large? @dimen/largePadding : @dimen/smallPadding}"
  
android:text="@{map[`firstName`]}"

需要注意的是这些都不代表着最佳实践，只是说明有这样的功能，支持这样的用法。而且它有一个很大的弊端，相信很多刚入门DataBinding的人都遇到过找不到binding文件的错，然后被劝退，原因无外乎就是表达式写错、variable的类路径不对或者没import相应的类（比如View）等等，都与复杂的表达式有关系，而DataBinding报错也不太智能，有时不能准确定位，所以建议不要在xml里进行复杂的数据绑定

那我们如何来给xml “减负” 呢？

这时候就要用到@BindingAdapter注解

上文中我们编写的setImageUrl方法，实际上不仅仅可以在自定义View中使用，我们可以通过@BindingAdapter作用于ImageView以及ImageView的所有子类，如下所示：

public class CommonBindingAdapter {

    @BindingAdapter(value = {"imageUrl", "placeHolder"})
    public static void loadUrl(ImageView view, String url, Drawable placeHolder) {
        Glide.with(view.getContext()).load(url).placeholder(placeHolder).into(view);
    }

    @BindingAdapter(value = {"visible"})
    public static void visible(View view, boolean visible) {
        view.setVisibility(visible ? View.VISIBLE : View.GONE);
    }
}

如果 ImageView 对象同时使用了 imageUrl 和 placeHolder，并且 imageUrl 是字符串，placeHolder是 Drawable，就会调用适配器。如果你希望在设置了任意属性时调用适配器，则可以将适配器的可选 requireAll标志设置为 false

注意：数据绑定库在匹配时会忽略自定义命名空间

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

    <data>

        <variable
            name="imageUrl"
            type="String" />

        <variable
            name="placeholder"
            type="android.graphics.drawable.Drawable" />

        <variable
            name="visible"
            type="Boolean" />
    </data>

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

        <ImageView
            imageUrl="@{imageUrl}"
            placeHolder="@{placeholder}"
            visible="@{visible}"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>
</layout>

看到这里，是不是觉得这个@BindingAdapter非常的强大呢？将逻辑判断尽可能的抽取到BIndingAdapter中，我相信你的代码可维护性会提高一个层次

最后编辑于：2021.01.28 14:53:19

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

Jetpack（二）DataBinding从入门到灵活运用

Jetpack（二）DataBinding从入门到灵活运用

目录

前言

导入DataBinding

DataBinding基本使用

绑定事件与方法

绑定适配器

推荐阅读更多精彩内容