MVC、MVP的区别和MVVM设计模式及实例

    MVVM简介                MVC和MVP的区别


可能你使用过 MVP 设计模式来对代码进行解耦, 但是当前谷歌发布 Data Binding 库来更加简化我们的代码 , 也催生了 MVVM 设计模式在 Android 中的引用 . 在 MVP 中, 我们需要 Model 、 View 、 Presenter 三样进行配合使用 , 但是在 View 中 还是会出现大量的类似 ShowLoad 之类的代码 . 而这次的 MVVM 是由 Model , View , ViewModel 进行配合的 . 其中的区别主要在于 ViewModel , Data Binding 的奇妙之处在于可以将 XML 文件与指定的 JAVA 类绑定 , 实现数据自动更新的效果 .下面来看看结构图：

在 MVVM 设计模式中 , 对于 View 中的数据更新操作都是通过 Data Binding 框架实现的 , 在 Model 发生变化时做出反映 .看看效果图：

依然跟 MVP 的实例一样是一个查询 IP 地址归属地的 Demo .


首先需要打开 Data Binding 绑定功能 , 在 APP 的 build.gradle 文件中添加如下部分

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

先来看 XML 文件的变化

<?xml version="1.0" encoding="utf-8"?><layout xmlns:android="http://schemas.android.com/apk/res/android">  <data>    <variable        name="viewModel"        type="com.shire.mvvmdemo.viewModel.MainViewModel"        />  </data>  <RelativeLayout      android:layout_width="match_parent"      android:layout_height="match_parent"      android:paddingBottom="@dimen/activity_vertical_margin"      android:paddingLeft="@dimen/activity_horizontal_margin"      android:paddingRight="@dimen/activity_horizontal_margin"      android:paddingTop="@dimen/activity_vertical_margin"      >    <EditText        android:id="@+id/et_ip"        android:layout_width="200dp"        android:layout_height="wrap_content"        android:hint="IP地址"        />    <Button        android:id="@+id/btn_search"        android:layout_width="200dp"        android:layout_height="wrap_content"        android:layout_toEndOf="@id/et_ip"        android:onClick="@{viewModel.search}"        android:text="查询"        />    <TextView        android:id="@+id/tv_msg"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@id/et_ip"        />    <ProgressBar        android:id="@+id/pb_load"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@id/btn_search"        android:layout_toStartOf="@id/btn_search"        android:visibility="gone"        style="?android:attr/progressBarStyleSmall"        />  </RelativeLayout></layout>

可以看到 根节点用的是 <layout> 标签 , 并且还出现了一个 <data> 标签 , 在 <data> 标签中还有一个 <variable> 标签 , 在 <variable> 标签中就是我们需要绑定的类以及他的名字 .


这里使用的名字为 viewModel , 绑定的类是 MainViewModel . 至于绑定这个有什么用, 下面会说到 .


再来看看 Activity 文件

public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);        binding.setViewModel(new MainViewModel(binding));    }}

你没看错 , 就是只有这几行代码 ! 其中的 ActivityMainBinding 类是 Data Binding 框架为我们自动生成的 , 这与你的 XML 文件名字相关 , 比如我的 XML 文件名字是 activity_main 那么生成的类就会取消下划线并且在最后加上 Binding 就得到了 ActivityMainBinding . 这个类的实例可以通过 DataBindingUtil.setContentView 来得到 . 这个类里面有我们 XML 文件里所有的控件信息 . 由此 , 也再也不需要去 findViewById 了! 我们先调用了 setViewModel 方法来设置 ViewModel 并且传进去了这个 Binding , 然后我们进入这个 ViewModel 来看看吧 . 界面上的管理目前基本可以全部转移到 ViewModel 中了.

public class MainViewModel implements onSearchListener {  private ActivityMainBinding binding;  private SearchModel searchModel = new SearchModel();  private Handler handler;  public MainViewModel(ActivityMainBinding binding) {    this.binding = binding;    handler = new Handler(Looper.getMainLooper());  }  public void search(View view) {    binding.pbLoad.setVisibility(View.VISIBLE);    searchModel.getIPaddressInfo(binding.etIp.getText().toString().trim(), this);  }  @Override public void onSuccess(final IPAddress ipAddress) {    handler.post(new Runnable() {      @Override public void run() {        binding.pbLoad.setVisibility(View.GONE);        binding.tvMsg.setText(ipAddress.toString());      }    });  }  @Override public void onError() {    handler.post(new Runnable() {      @Override public void run() {        binding.pbLoad.setVisibility(View.GONE);        binding.tvMsg.setText("查询失败");      }    });  }}

构造方法中我们初始化了两个类 Handler 和 ActivityMainBinding , 其中 handler 用于子线程操作完成后更新主线程 UI , ActivityMainBinding 用于操作 View 控件 .


主要看看 search 方法 . 这个方法在 XML 文件中有被绑定到按钮上 , 没注意的可以上去看看 .

binding.pbLoad.setVisibility(View.VISIBLE);

这个就能实现加载动画的显示了! 很方便吧 不需要 findViewById , 然后就是调用 Model 的方法获取需要的信息 , 这里传入了文本编辑框的内容

searchModel.getIPaddressInfo(binding.etIp.getText().toString().trim(), this);

同样的 binding.etIp.getText() 就能拿到内容了 , 各种方便有木有 .


后面拿到了结果之后就通过接口回调对 View 进行了更新 .

@Override public void onSuccess(final IPAddress ipAddress) {    handler.post(new Runnable() {      @Override public void run() {        binding.pbLoad.setVisibility(View.GONE);        binding.tvMsg.setText(ipAddress.toString());      }    });  }