阅读 4568

Android从零开始搭建MVVM架构(1)————DataBinding

在真正接触并使用MVVM架构的时候,整个人都不好了。因为个人觉得,MVVM相对于MVC、MVP学习难度比较大,设计的知识点不是一点半点。所以想慢慢记录下自己的成长。如有错误希望指正。


从零开始搭建MVVM架构系列文章(持续更新):
Android从零开始搭建MVVM架构(1)————DataBinding
Android从零开始搭建MVVM架构(2)————ViewModel
Android从零开始搭建MVVM架构(3)————LiveData
Android从零开始搭建MVVM架构(4)————Room(从入门到进阶)
Android从零开始搭建MVVM架构(5)————Lifecycles
Android从零开始搭建MVVM架构(6)————使用玩Android API带你搭建MVVM框架(初级篇)
Android从零开始搭建MVVM架构(7) ———— 使用玩Android API带你搭建MVVM框架(终极篇)


首先看一张图,(这里就是一些人口中所说的“AAC框架”)

我说下我的理解:AAC(Android Architecture Components) :实际上是android官方提供的一系列组件,用来实现MVVM架构的。 这里提下 lifecycles:就是处理UI界面的生命周期,在26版本以后的Support库中,AppCompatActivity和SupportActivity中都实现了LifecycleOwner,内部已经对UI界面的生命周期做了处理了。我们可以直接代码点进去,如下

好了,回到DataBinding。这是MVVM框架的第一步。DataBinding是studio自带的。只需要在我们app build.gradle的android标签下加上:

dataBinding {
        enabled = true
    }
复制代码

一、初始DataBinding(建议使用studio3.5,好用)

DataBinding最厉害的功能是可以将我们的数据和view绑定。这句话体现不出来,那可以说成,DataBinding可以将数据和xml绑定。而且还支持双向绑定:意思你改了bean里的数据,他会自动改变view里显示的数据。你改了xml里的数据,如editText里的数据,他会自动改变bean里的数据。
在android标签加上后,来到我们的xml布局下,对着xml的第一行,按下Alt + Enter,选择 “Convert to data binding layout”,就可以生成DataBinding的布局规则

生成如下,我这里改成了RelativeLayout布局

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

    <data>

    </data>

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

    </RelativeLayout>
</layout>
复制代码


Activity里需要绑定下布局,框架自动会生成DataBinding类,类名是:xml名称+Binding。

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.activity_main);
        //写上这句后,上面的代码可以注释哦
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
    }
复制代码

此外还可以自定义生成类名,这里我就自定义了类名MyBinding

    <data class="MyBinding">

    </data>
复制代码

1.1、设置数据及点击事件

在xml里的<data>标签里加上要设置的数据,我这里有一个String,有一个OnClickListener:

  • <variable>标签里的 name相当于数据引用
  • type 是数据类型,也可以理解为包名.类名。常用数据类型,直接写类型
  • 在设置值的时候的时候用@{value},value就是<variable>里的数据引用
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
            name="textStr"
            type="String" />
            
        <variable
            name="onClickListener"
            type="android.view.View.OnClickListener" />

    </data>

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

        <TextView
            android:id="@+id/txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{textStr}"
            android:onClick="@{onClickListener}"
            />

    </RelativeLayout>
</layout>

复制代码


那么在Activity设置数据和设置点击事件(意思设置了variable标签后DataBinding会自动生成get和set方法。studio3.5后只要xml写上,IDE会自动生成,低版本可能需要Make Project下)。如下就实现了一个设置数据,和设置点击事件。

通过以下代码可以看到,只要绑定下布局,通过Binding对象,可以做任何事。从此不再使用findViewById,亦或是butterKnife。

public class BaseUseActivity extends AppCompatActivity implements View.OnClickListener {
    private ActivityBaseuseBinding baseuseBinding;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_baseuse);
        baseuseBinding = DataBindingUtil.setContentView(this, R.layout.activity_baseuse);
        baseuseBinding.setTextStr("这里就能设置数据");
        baseuseBinding.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        baseuseBinding.txt.setText("点击设置的数据");
    }
}
复制代码

这里还能调用类里的方法,且需要特别注意,在使用DataBinding的时候,包名一定是小写,不然找不到包名,假设我们这里定义个类,然后调用类里的方法。

public class OnClickUtil {

    public void onClickWithMe(View view) {
        Toast.makeText(view.getContext(), "调用类里的方法", Toast.LENGTH_SHORT).show();
    }
}
复制代码

其他步骤都一样,唯一不同的是,调用类里方法的写法不同。假设button点击调用。用::表示调用,后面接的是方法名。

            <Button
            ...
            android:onClick="@{onClickUtil::onClickWithMe}"
            />
复制代码

1.2、<import>和别名alias的使用

这里我们先定义同名的2个类User。放在不同包里。

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

    public User(String name, int age) {
        this.name = name;
        this.age = age;
    }
}
复制代码

之前我们的<data>标签就可以用<import>。

    <data>
        <import type="com.lihang.databindinglover.bean.User"/>

        <variable
            name="use_first"
            type="User" />
    </data>
复制代码


<import>的用法是在同一个xml里需要用到多次User的时候,type类型只需要写<import>的类名就可以代表了,就不需要总是写包名.类型。但这个时候也就出现2个同名不同包的类是需要用到alias别名,不然类名重复了。

<data>
        <import type="com.lihang.databindinglover.bean.User"/>

        <import
            alias="loverUser"
            type="com.lihang.databindinglover.User"/>

        <variable
            name="user_first"
            type="User" />

        <variable
            name="user_second"
            type="loverUser" />
    </data>
复制代码

Activity里的使用都是非常简单的,如果有不明白,稍后放出链接。


这里还有特殊功能,比如我们再布局预览页面。通常会使用 tools:text="中间的"来预览布局,这个时候可以通过

            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.name,default = 预览文字}"
            />
复制代码

使用default的时候,即使是studio3.5里,也不提示,不过不影响。还有一点,在DataBinding里,已经处理了null。所以这个时候你在Activity里给user设置为null。也不会崩溃


二、DataBinding在Fragment和RecyclerView里的使用

在Fragment的使用和Activity里的使用一样。获取根目录的方式如下。

//注意获取根布局是
View view = activityAlisBinding.getRoot();
复制代码

这里重点介绍下再recyclerView里的用法。我们以前是不是写ViewHolder写的烦了?用上了DataBinding后,这么告诉你一个ViewHolder就能搞定一切需要的ViewHolder

先看下我们的唯一的ViewHolder。首先提下,自动生成的Binding的父类都是ViewDataBinding。我是把ViewHolder单独拉出来了。这样大家都能用:

public class NewViewHolder extends RecyclerView.ViewHolder {
    public ViewDataBinding binding;

    public NewViewHolder(ViewDataBinding binding) {
        super(binding.getRoot());
        this.binding = binding;
    }
}
复制代码


在Adapter里只需要职业

 @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
        ItemNewOrderBinding binding = DataBindingUtil.inflate(LayoutInflater.from(viewGroup.getContext()), R.layout.item_new_order, viewGroup, false);
        return new NewViewHolder(binding);
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {
        NewViewHolder newViewHolder = (NewViewHolder) viewHolder;
        //如果是多布局,那么对binding进行一个 instansof的一个判断就好。这样我们的ViewHolder永远只需要一个
        ItemNewOrderBinding binding = (ItemNewOrderBinding) newViewHolder.binding;
        binding.txtName.setText("这样就能使用了!!");
    }
复制代码

三、单向数据绑定

单向绑定可以理解为,改变了bean对象里的数据,就会自动改变我们xml的显示。这里涉及到3个类: BaseObservable、ObservableField、ObservableCollection。看这个名字就知道有点类似观察者模式

3.1、BaseObservable

首先我们定义个以Dog类

public class Dog extends BaseObservable {

    //如果是public修饰的,直接用@Bindable
    @Bindable
    public String name;
    //如果是private修饰的,则在get方法使用@Bindable
    private String color;


    public void setDataOnlyName(String name, String color) {
        this.name = name;
        this.color = color;
        //只刷name字段
        notifyPropertyChanged(com.lihang.databindinglover.BR.name);
    }

    public void setDataAll(String name, String color) {
        this.name = name;
        this.color = color;
        //刷新全部字段
        notifyChange();
    }
    ...//省略部分代码
}
复制代码

这里我同事改变了name和color的颜色,说明

  • bean对象需要继承 BaseObservable
  • @Bindable 标注用来表示哪个字段需要单向绑定。public修饰的可以直接用@Bindable绑定。private修饰的需要在get()方法上用@Bindable标注
  • notifyChange();刷新所有字段,notifyPropertyChanged(com.lihang.databindinglover.BR.name);刷新单个字段。注意这里说的刷新全是被@Bindable绑定的。如果BR.name出不来。建议build下项目
  • 还有不明白的可以在末尾链接demo看:单向数据绑定 -- BaseObservable.

继承了BaseObservable的bean对象,还可以监听刷新了哪

dog.addOnPropertyChangedCallback(new Observable.OnPropertyChangedCallback() {
            @Override
            public void onPropertyChanged(Observable sender, int propertyId) {
                if (propertyId == com.lihang.databindinglover.BR.name) {
                    Log.e("看看刷新了哪", "刷新了name");
                } else if (propertyId == com.lihang.databindinglover.BR._all) {
                    Log.e("看看刷新了哪", "全部全部");
                } else {
                    Log.e("看看刷新了哪", "未知错误~");
                }
            }
        });
复制代码

3.2、ObservableField

其实这个ObservableField就是对BaseObservable的简化,不用继承,不用主动调刷新代码。
这个时候我们顶一个Human类

public class Human {
    //这里必须是常量,ObservableField<参数类型>
    //其实写上了下面一句,就是BaseObservable,set,get, @Bindable,刷新都封装了。直接看构造方法
    public final ObservableField<String> name = new ObservableField<>();
    //其中也封装了基本数据类型:ObservableInt等
    public final ObservableInt age = new ObservableInt();

    public Human(String name,int age){
        this.name.set(name);
        this.age.set(age);
    }

}
复制代码

Activity和xml里的操作和之前的一样,改变数据,自动改变xml只需要:

//简直太方便了吧
human.name.set("玉玑子");
human.age.set(15);
复制代码

3.3、ObservableCollection

一看就是集合,这里和我们常用的 List Map一样。只不过这里的ObservableList、ObservableMap是封装好的。当我们改变集合里的数据时。xml也会改变。唯一要注意的是,在xml里引用这些集合的时候<类型>,这些符号,会影响xml格式所以要转义。用&lt; 代表<;用&gt代表>(这些转义符,同样支持Mark Down);想了解更多可自行百度 DataBinding转义符。

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

    <data>

        <variable
            name="list"
            type="androidx.databinding.ObservableList&lt;String&gt;" />

        <variable
            name="map"
            type="androidx.databinding.ObservableMap&lt;String,String&gt;" />

        <variable
            name="index"
            type="int" />

        <variable
            name="key"
            type="String" />
    </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="@{list[index],default = 哈哈}" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{map[key],default = 呵呵}" />

    </LinearLayout>
</layout>
复制代码

这里遇到一个坑,就是你的default = “默认值” 这个默认值最好不是data里的引用。不然会报错哦。这里我们带入index = 0 带入,把key = name。代入,然后动态改变,集合里这2个值:

@Override
    public void onClick(View v) {
        int randowInt = new Random().nextInt(100);
        switch (v.getId()){
            case R.id.btn_index:
                //改变list的第一项
                list.add(0,"list的值" + randowInt);
                break;
            case R.id.btn_key:
                map.put("name","map的值" + randowInt);
                break;
        }
    }
复制代码


四、双向数据绑定

意思就是你改变bean对象里的值,他会主动改变xml的显示,改变xml的里的值,他会把bean对象里的属性改变了。 这里我们用1个TextView显示数据;用1个EditTextView绑定bean对象,再用1个Button可以动态查询bean对象里的属性值

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

    <data>
        <variable
            name="human"
            type="com.lihang.databindinglover.bean.Human" />
    </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="@{human.name}" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginTop="20dp"
            android:text="@={human.name}" />

        <Button
            android:id="@+id/btn_search"
            android:layout_marginTop="60dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="动态查询属性"
            />
    </LinearLayout>
</layout>
复制代码

bean对象绑定xml显示:单向绑定是@{属性值},双向绑定则是@={属性值},效果如下:

五、在include 和 viewStub中使用

5.1 在include中使用。

include的布局如下:

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

    <data>

        <variable
            name="user"
            type="com.lihang.databindinglover.bean.User" />

    </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="@{user.name}" />

    </LinearLayout>
</layout>
复制代码


Activity里引用include这样:

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

    <data>

        <variable
            name="user"
            type="com.lihang.databindinglover.bean.User" />

    </data>

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

        <include
            layout="@layout/include_item"
            app:user="@{user}" />

    </RelativeLayout>
</layout>
复制代码

注意:app:user="@{user}"。第一个user是include里name的引用。第二user是当前传入的值。


5.2、viewStub中的使用

简单介绍下viewStub:被viewStub包裹的。即使页面显示的时候,被包裹的布局也不会加载,除非调用inflate。这样算是对布局卡顿的优化了。include则算是代码里的布局优化。

直接放Activity布局了。被包裹的布局和上面的include一样

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

    <data>

        <variable
            name="user"
            type="com.lihang.databindinglover.bean.User" />
    </data>

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

        <ViewStub
            android:id="@+id/view_stub"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout="@layout/viewstub_layout"
            app:user="@{user}" />

    </RelativeLayout>
</layout>
复制代码


activity里:

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_viewstub);
        binding = DataBindingUtil.setContentView(this, R.layout.activity_viewstub);
        User user = new User("我爱学习", 18);
        binding.viewStub.getViewStub().inflate();
        binding.setUser(user);
    }
复制代码

六、@BindingAdapter的使用。

这里比较重要的用法是,当我们的imageView需要加载网络url时,假如用的是glide去加载,这个时候就需要使用@BindingAdapter。 这个需要一个辅助类:new一个辅助类后,xml里就可以使用了。有点像Dagger2

public class DataBindingHelper {
    //用@BindingAdapter标注,有点类似自定义属性,后面是属性名,方法体类似得到属性值后去做的事情。
    //第一个参数:是当前的控件类型,其实也可以写成View,但是要加载还是要判断是否是imageView
    //第二个参数:是网络加载的url。
    @BindingAdapter("imageWithGlide")
    public static void loadImage(ImageView imageView, String url) {
        Glide.with(imageView).load(url)
                .placeholder(R.mipmap.ic_launcher)
                .error(R.mipmap.ic_launcher)
                .transition(withCrossFade())
                .centerCrop()
                .into(imageView);
    }

    //@BindingAdapter还能修改系统属性值,这是修改textView的属性,意思只要使用DataBinding给textView设置setText值的,
    //都会加上后面这段 " - 我是通过方法加的"
    //我这里先注释掉了。不然整个项目的textView都会加上整个,如果要测试,可以打开
    //@BindingAdapter("android:text")
    //public static void setText(TextView textView, String testStr) {
    //    textView.setText(testStr + " - 我是通过方法加的");
    //}
}
复制代码


我们的xml就是专业:

<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="testStr"
            type="String" />

    </data>


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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/img"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="15dp"
            android:text="@{testStr}" />

        <ImageView
            android:id="@+id/img"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_centerInParent="true"
            app:imageWithGlide="@{imageUrl}" />

    </RelativeLayout>
</layout>
复制代码

activity里就是设置imageUrl和testStr的值。太简单就不写了。


七、DataBinding布局里支持的语法

支持的语法:

  • 算术 + - / * %
  • 字符串合并 +
  • 逻辑 && ||
  • 二元 & | ^
  • 一元 + - ! ~
  • 移位 >> >>> <<
  • 比较 == > < >= <=
  • Instanceof
  • Grouping ()
  • character, String, numeric, null
  • Cast
  • 方法调用
  • Field 访问
  • Array 访问 []
  • 三元 ?:

不支持的语法:

  • this
  • super
  • new
  • 显示泛型调用

Github下载,你的点赞是我最大的动力

我的公众号,刚开始玩

关注下面的标签,发现更多相似文章
评论