Android 基于Databinding 的入门级 MVVM 模式搭建

MVVM模式将应用分为三层：

Model层：主要负责数据的提供。Model层提供业务逻辑的数据结构（比如，实体类），提供数据的获取（比如，从本地数据库或者远程网络获取数据），提供数据的存储。
View层：主要负责界面的显示。View层不涉及任何的业务逻辑处理，它持有ViewModel层的引用，当需要进行业务逻辑处理时通知ViewModel层。
ViewModel层：主要负责业务逻辑的处理。ViewModel层不涉及任何的视图操作。通过官方提供的Data Binding库，View层和ViewModel层中的数据可以实现绑定，ViewModel层中数据的变化可以自动通知View层进行更新，因此ViewModel层不需要持有View层的引用。ViewModel层可以看作是View层的数据模型和Presenter层的结合。

MVVM模式最大的优势在于：ViewModel层不持有View层的引用。这样进一步降低了耦合，View层代码的改变不会影响到ViewModel层。当View层发生改变时，只要View层绑定的数据不变，那么ViewModel层就不需要改变。不用再编写很多样板代码。通过官方的Data Binding库，UI和数据之间可以实现绑定，不用再编写大量的findViewById()和操作视图的代码了。极大的提高了开发过程中在UI界面数据绑定上的开发效率！

首先我们从最基础的MVVM构架开始入手，暂且称为MVVM入门级版本，主要是围绕Databinding和ViewMode来封装实现，抛弃掉烦不胜烦的findViewById以及通过ButterKnife方式获取view操作的方式。

第一步，创建一个空白的工程，入门级的我们先把工程内分好包结构：

包结构参考

activity层或者fragment层用于存放Activity或者Fragment；
vm层用于存放ViewModel；
presenter层用于存放数据操作和网络交互逻辑；

不要忘了开启databinding功能，这样我们就能通过关联databinding少些一大片的view代码，在工程Module:app的gradle文件下：

android {

    //... 省略一大堆默认配置
    
    dataBinding {
        enabled = true
    }
｝

开启databinding功能以后，回到我们创建的layout文件，默认的是这样的:

默认布局文件

直接选中根目录，alt+emter或者直接鼠标点击提示灯泡，选择第一个Convert to data binding layout，AS就会自动将布局文件转换成我们需要的databinding结构：

<?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>
          <!--此处添加和绑定viewModel:我们这里直接和刚创建的MainVM绑定起来-->
        <variable
            name="viewModel"
            type="com.jf.mvvm.vm.MainVM" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".activity.MainActivity">

        <TextView
            android:id="@+id/txv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{viewModel.title}"
            tools:text="txv_title"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/txv_title2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{viewModel.title2}"
            tools:text="txv_title2"
            app:layout_constraintTop_toBottomOf="@+id/txv_title"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_marginTop="20dp"/>

        <Button
            android:id="@+id/btn_test"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@+id/txv_title2"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_marginTop="20dp"
            android:onClick="@{viewModel::onTestClick}"
            android:text="测试一下"/>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

附上我们初级的VM文件，就是一个普通的java类，里面提供了一个getter方法，默认情况下databinding是可以直接获取VM文件中的getter以及public的属性值的：

public class MainVM{

    //通过MainPresenter可以跟数据库以及后台做通讯操作，用于更新UI数据
    private MainPresenter mainPresenter = new MainPresenter();
    // 布局文件可以直接读取该属性值
    public String title2 = "这里的值也可以显示";

    public String getTitle(){
        return "这是textView显示的内容";
    }

    public void onTestClick(View view){
        Log.d("mvvm","onTestClick!!!!");
    }
}

为了关联VM和layout文件，我们需要在MainActivity中调用DataBindingUtil.setContentView()方法，并绑定MainVM到布局文件中，Fragment可以通过DataBindingUtil.inflate(inflater, layoutRes, container,false);来进行页面布局绑定：

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityMainBinding binding = DataBindingUtil.setContentView(this,R.layout.activity_main);
        binding.setViewModel(new MainVM());
    }

运行APP工程，我们就能看到我们初步完成的基于Databinding的MVVM工程结果了：

运行结果

点击按钮我们后台也看到了日志：com.jf.mvvm D/mvvm: onTestClick!!!!

我们再更新一下代码，将VM中的点击操作和数据联动起来：

public class MainVM{

    public String title2 = "这里的值也可以显示";
    private MainPresenter mainPresenter = new MainPresenter();

    public String getTitle(){
        if(!"这里的值也可以显示".equals(title2)){
            return "我的值也一起变吧！";
        }
        return "这是textView显示的内容";
    }

    public void onTestClick(View view){
        title2 = "我的值改变了！";
        Log.d("mvvm","onTestClick >>> "+title2 + " >>> "+getTitle());
    }

}

点击以后，页面没有发生任何事情，但是我们的日志里记录的值是成功更新了的：

onTestClick >>> 我的值改变了！ >>> 我的值也一起变吧！

了解过Databinding使用以后，我们知道，如果要更新值并同步到UI里，我们需要这样做，将VM文件继承androidx.databinding.BaseObservable，并且在需要通知的绑定数据上加上@Bindable，这样我们就可以通过调用notifyPropertyChanged(BR.title);来通知UI刷新对应的属性值（title为目标属性值）：

public class MainVM extends BaseObservable {

    //通过MainPresenter可以跟数据库以及后台做通讯操作，用于更新UI数据
    private MainPresenter mainPresenter = new MainPresenter();
    // 布局文件可以直接读取该属性值
    @Bindable
    public String title2 = "这里的值也可以显示";

    @Bindable
    public String getTitle(){
        if(!"这里的值也可以显示".equals(title2)){
            return "我的值也一起变吧！";
        }
        return "这是textView显示的内容";
    }

    public void onTestClick(View view){
        title2 = "我的值改变了！";
        Log.d("mvvm","onTestClick >>> "+title2 + " >>> "+getTitle());
        notifyPropertyChanged(BR.title);
        notifyPropertyChanged(BR.title2);
    }

}

完成上述改进以后，我们再次运行APP，点击测试一下按钮，会发现页面展示的值已经成功按我们预想的值改变了！

到目前为止，我们最初级最简单的MVVM模式就搭建完毕了！

操作过程中关于Databinding的使用可以参考别人已经写得很详细得文章：DataBinding 的简单使用

源码地址：https://github.com/jackyflame/MvvmSimple

Android MVVM 搭建：封装Activity