阅读 961

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模式就搭建完毕了!

持续更新,公众号:程序员喵大人

文章分类
Android
文章标签