【android学习】Jetpack：DataBinding数据绑定

简介

2018年谷歌I/O 发布了一系列辅助android开发者的实用工具，合称Jetpack，以帮助开发者构建出色的 Android 应用。

我们这里主要学习Architecture Components（架构组件），这个组件分为8大模块：Data Binding,Lifecycles,LiveData,Navigation,Paging,Room,ViewModel,WorkManager；我们这里主要讲解第一个DataBinding

jetpack官方介绍https://developer.android.google.cn/jetpack/

使用

• 布局文件

数据绑定布局文件略有不同，必须以 layout 标记开头，后跟 data 元素和 view 根元素。 view 元素必须是一个非绑定的布局文件。下面是布局文件样例：

<?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">
    <data>
        <variable
            name="test"
            type="com.zkq.myviewmodel.bean.User" />
    </data>

    <LinearLayout
        android:id="@+id/main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".ui.main.MainFragment">


        <ImageView
            android:id="@+id/image"
            android:layout_width="100dp"
            android:layout_height="100dp"
            app:imageSrc="@{test.imageUrl}"/>

        <TextView
            android:id="@+id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{`name: `+test.name}"
           />


        <TextView
            android:id="@+id/text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{`password: `+test.password}"
            />


        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="跳转"
            android:onClick="@{test.click}"
            />
    </LinearLayout>


</layout>

这里得data文件里面得name=“XXXX”，可以有用户自己定义，用来表示com.zkq.myviewmodel.bean.User这个类，方便后续调用 

    <data>
        <variable
            name="test"
            type="com.zkq.myviewmodel.bean.User" />
    </data>

 用户就可以直接使用 android:text="@{`name: `+test.name}" 直接绑定user类下面得name字段，这里使用了一个拼接，这里得拼接符号不是单引号，是键盘左上角“1”左边那个符号，

 android:text="@{`name: `+test.name}"

•  数据对象

这里得user就对应布局中得数据，这种类型的对象具有永不改变的数据，课修改得数据类型，我们后面再讲

public class User {
    private String name;
    private String password;
    private String imageUrl;

    public User(String name, String password, String imageUrl) {
        this.name = name;
        this.password = password;
        this.imageUrl = imageUrl;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getImageUrl() {
        return imageUrl;
    }

    public void setImageUrl(String imageUrl) {
        this.imageUrl = imageUrl;
    }

    //自定义属性：提供一个静态方法来加载image
    @BindingAdapter("bind:imageSrc")
    public static void getImage(ImageView view, String url){
        Picasso.with(view.getContext()).load(url).into(view);
    }

    public void click(View view){
        Toast.makeText(view.getContext(),getName() , Toast.LENGTH_SHORT).show();
    }
}

这里重点看一下，这里通过 @BindingAdapter("bind:imageSrc") 自定义了一个imageSrc标签，通过这个方法，加载图片

    //自定义属性：提供一个静态方法来加载image
    @BindingAdapter("bind:imageSrc")
    public static void getImage(ImageView view, String url){
        Picasso.with(view.getContext()).load(url).into(view);
    }

结合布局文件中得布局，就可以实现加载网络图片得功能

   <ImageView
            android:id="@+id/image"
            android:layout_width="100dp"
            android:layout_height="100dp"
            app:imageSrc="@{test.imageUrl}"/>

• 数据绑定

 默认情况下，在编译以后会生成对应activity得Bingding，我们这里是MainActivity，生成得就是MainActivityBinding ，而对应生成得布局中得（test变量）生成setTest方法

       MainActivityBinding viewDataBinding = DataBindingUtil.setContentView(this, R.layout.main_activity);
        user = new User("张三", "123456", "https://imagev2.xmcdn.com/group59/M0A/AE/A4/wKgLel0_6jSB96guAAQiVnZ8T6o580.jpg!op_type=3&columns=140&rows=140&magick=png");
        viewDataBinding.setTest(user);

到这里，数据绑定就成功了，运行效果

实现可以修改数据

前面我们实现一个不能修改user得数据得方法，如果我们要动态改变name  password得值，我们需要修改

1. 首先我们user需要继承BaseObservable 
2. 在修改的变量get方法那里，添加标签@Bindable
3. 在修改的变量set方法那里，调用notifyPropertyChanged通知刷新

完整的user修改，这里的BR是自动生成的，引用的是import androidx.databinding.library.baseAdapters.BR;

public class User extends BaseObservable {
    private String name;
    private String password;
    private String imageUrl;

    public User(String name, String password, String imageUrl) {
        this.name = name;
        this.password = password;
        this.imageUrl = imageUrl;
    }
    @Bindable
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
        notifyPropertyChanged(BR.name);
    }
    @Bindable
    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
        notifyPropertyChanged(BR.password);
    }

    public String getImageUrl() {
        return imageUrl;
    }

    public void setImageUrl(String imageUrl) {
        this.imageUrl = imageUrl;
    }

    //自定义属性：提供一个静态方法来加载image
    @BindingAdapter("bind:imageSrc")
    public static void getImage(ImageView view, String url){
        Picasso.with(view.getContext()).load(url).into(view);
    }

    public void click(View view){
        Toast.makeText(view.getContext(),getName() , Toast.LENGTH_SHORT).show();
        name = "lisi";
//        view.getContext().startActivity(new Intent(view.getContext(), SecondActivity.class));
    }
}

然后我们在绑定的地方修改user的值，就可以达到修改效果，我们启动一个hadler，5秒以后，修改name，password的值

        MainActivityBinding viewDataBinding = DataBindingUtil.setContentView(this, R.layout.main_activity);
        user = new User("张三", "123456", "https://imagev2.xmcdn.com/group59/M0A/AE/A4/wKgLel0_6jSB96guAAQiVnZ8T6o580.jpg!op_type=3&columns=140&rows=140&magick=png");
        viewDataBinding.setTest(user);


        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                user.setName("李四");
                user.setPassword("*******");
            }
        },5000);

 最终结果

总结

  这里需要使用andridx，需要设置支持dataBinding 

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

demo下载demo下载