欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-14 23:46:33
...

简介

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);

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

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

实现可以修改数据

前面我们实现一个不能修改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);

 最终结果

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

总结

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

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

demo下载demo下载

相关标签: Jetpack DataBinding