Android MVVM 之我见

---

mvvm，实际上是m+v+vm。而vm（ViewModel）依赖于DataBinding，所以先简单介绍下DataBinding的用法。

使用之前要做的配置：

  // 项目gradle
  classpath 'com.android.tools.build:gradle:3.0.1' // gradle插件版本大于1.5

// app gradle
android 
{
  ...
 dataBinding {
    enabled true;// 设置为true
 }
}

---

databinding的基本用法：

首先是xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<layout>
    <data>
        <variable name="myName" type="String"/>
    </data>
<android.support.constraint.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cn.yj.learnmvvm.MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{myName}"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
</layout>

可以看到，根布局使用了<layout>且在内使用了<data>，控件里使用了@{}。

在Activity内使用

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_main);

        final ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        binding.setMyName("张三");
    }

ActivityMainBinding这个类是自动生成的，命名规则是xml+Binding。
由于在xml里面我们设置的name=“myName”，于是ActivityMainBinding类会有一个方法叫setMyName().当我们调用这个方法时，对应的xml里使用到这个name的控件的text将会被赋值。所以app界面将显示“张三”。

---

单向绑定

单向绑定就是当数据源（Model）的值改变时，xml里使用数据源的控件（View）的值也会跟着发生变化。

创建Weather类

public class Weather extends BaseObservable{
    private String name;

    @Bindable
    public String getName() {
        return name;
    }


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

该类继承BaseObservable，在get方法前使用了@Bindable注解，这样在自动生成的BR类里就会有name这个字段，然后就可以被我们使用。notifyPropertyChanged意味着通知变化。

xml的使用

<?xml version="1.0" encoding="utf-8"?>
<layout>
    <data>
        <import type="cn.yj.learnmvvm.model.bean.Weather"/>
        <variable name="weather" type="Weather"/>
    </data>
<android.support.constraint.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cn.yj.learnmvvm.MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{weather.name}"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
</layout>

可以看到，我们将type=“String”，改为了type=“Weather”，并且使用import导入了包。注意name的值不可以大写，否则将编译不过。

Activity的使用

 final ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        final Weather weather = new Weather();
        weather.setName("下雨天");
        binding.setWeather(weather);


        Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                weather.setName("晴天");
            }
        }, 5000);

原本界面显示的是”下雨天“，而在5s后数据源weather.name改为了”晴天“，这时界面的显示也会变成了”晴天“。

---

双向绑定

刚才是数据源发生变化时，xml里面控件对应的值也会发生变化。而双向绑定就是说当xml了控件的值发生变化时，数据源的值也会发生变化。

xml的使用

<?xml version="1.0" encoding="utf-8"?>
<layout>
    <data>
        <import type="cn.yj.learnmvvm.model.bean.Weather"/>
        <variable name="weather" type="Weather"/>
    </data>
<android.support.constraint.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cn.yj.learnmvvm.MainActivity">
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@={weather.name}"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
</layout>

我们把TextView改成了EditText，然后”@{}“改成"@={}";

Activity的使用

 final ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        final Weather weather = new Weather();
        weather.setName("下雨天");
        binding.setWeather(weather);


        Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                Log.d("MyTAG", weather.getName());
            }
        }, 5000);

5s后会打印weather.name的值。如果我们的edittext的值被我们改变后，打印的值也会改变。这时，数据源继不继承BaseObservable都无关紧要。

---

MVVM

关于MVVM，我的了解是把mvp中的p替换成了vm。那么实际做法和mvp也没太大的差异，依然在v层显示数据，m层处理数据，vm层做逻辑交互。

Contract契约类

public class Contract {
    public interface MainView {
        void loading();
    }
    public interface MainVM{
        void getWeather();
    };
}

View层

public class MainActivity extends AppCompatActivity implements Contract.MainView{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_main);

        final ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        MainVM vm = new MainVM(this, binding);
        vm.getWeather();
    }

    @Override
    public void loading() {
        Toast.makeText(this, "加载中...", Toast.LENGTH_LONG).show();
    }
}

Model层

public class MainModel {

    // 模拟数据请求
    public Weather getWeather() {
        Weather weather = new Weather();
        weather.setName("下雨天");
        return weather;
    }
}

ViewModel层

public class MainVM implements Contract.MainVM{
    Contract.MainView view;
    ActivityMainBinding binding;
    MainModel model;

    public MainVM(Contract.MainView view, ActivityMainBinding binding) {
        this.view = view;
        this.binding = binding;
        model = new MainModel();
    }


    @Override
    public void getWeather() {
        view.loading();
        Weather weather = model.getWeather();
        binding.setWeather(weather);
    }
}

这样当view层触发事件时，vm层会调用model层的方法请求到数据源，然后vm层在将binding和数据源绑定（或绑定后数据源直接变化），这样界面就会自动发生变化。传入view的原因是因为根据业务的不同，界面可能还会发生别的变化，比如弹窗、跳转页面等。

---

以上就是我查阅了databinding、mvvm资料后理解的mvvm模式。因为网上的教学例子太复杂，而且也不知道是否正确，所以我写出这个demo。希望可以起到一个抛砖引玉的作用，各位朋友若发现我有写的不正确的地方，望指出，共同进步。