Android 架构模式之 MVVM

• Android 架构模式之 MVC
  
• Android 架构模式之 MVP
  
• Android 架构模式之 MVVM
  

  
各人好！
作为 Android 步伐猿，你认识 MVVM 架构吗。学过了 MVC 架构、MVP 架构，为什么还要继续 MVVM 架构？又是什么缘故原由导致它让人又爱又恨？
架构计划的目标

   通过计划使步伐模块化，模块内 高内聚、模块间 低耦合，提高开辟效率，便于复用及后续维护。
  对 MVVM 的理解

上图是 MVVM 的架构图，我们都知道，MVVM架构中 M 代表 Model（模型）、V 代表 View（视图）、VM 代表 ViewModel（视图模型）。它们的职责分别是：
   

• View 负责吸取用户的输入事件，然后将事件转达给 ViewModel；
  
• ViewModel 收到事件后，会进行业务分发，通知 Model 获取数据；
  
• Model 区分数据来源，进而通过不同渠道获取数据，拿到数据后返回给 ViewModel；
  
• ViewModel 进行后续处理，或者通知 View 更新 UI。
  

  假如有看过 MVP 架构，会感觉这两个是一样的，不消怀疑，就是一样的，还有 MVC 也是一样的，因为这些都是从 MVC 演变过来的，只是每次演变都是为相识决特定的问题。
区别是实现方式不一样了，MVVM 架构是基于框架实现，变成了基于数据驱动。MVVM 是基于 DataBinding 框架进行数据 单向/双向 绑定，实现了 View 和 Model 的数据同步，这种方式增强了 xml 的能力，使得 Activity/Fragment 可以专职维护 View 的初始化，同时也减少了不少编码任务，这也体现了框架的强大之处。但是这里我们仅引入 DataBinding 库，以最少的引入，来相识 MVVM 架构的思绪，至于那些常用的开辟库，他们只是在 MVVM 架构的底子之上帮我们大大提高了开辟效率、规避可能存在的问题风险。
代码实现

Model

BaseModel.java

1. public abstract class BaseModel {
3. }

复制代码

View

BaseActivity.java

1. public abstract class BaseActivity<B extends ViewDataBinding, VM extends BaseViewModel> extends AppCompatActivity {
3.     protected B mBinding;
4.     protected VM mViewModel;
6.     @Override
7.     protected void onCreate(@Nullable Bundle savedInstanceState) {
8.         super.onCreate(savedInstanceState);
9.         this.mViewModel = createViewModel();
10.         setVariable();
11.     }
13.     /**
14.      * 初始化 ViewModel
15.      * @return
16.      */
17.     public abstract VM createViewModel();
19.     /**
20.      * 初始化 xml 中定义的变量
21.      */
22.     public abstract void setVariable();
24.     @Override
25.     protected void onDestroy() {
26.         super.onDestroy();
28.         if (mViewModel != null) {
29.             mViewModel.onDestroy();
30.             mViewModel = null;
31.         }
32.     }
33. }

复制代码

ViewModel

BaseViewModel.java

1. public abstract class BaseViewModel<M extends BaseModel> {
3.     protected M mModel;
5.     public BaseViewModel() {
6.         this.mModel = createModel();
7.     }
9.     protected abstract M createModel();
11.     public void onDestroy() {
12.         if (mModel != null) {
13.             mModel = null;
14.         }
15.     }
16. }

复制代码

上述代码中可以看到，View 中持有 ViewModel 引用，ViewModel 中持有 Model 引用，持有顺序为正向顺序，然后通过 setVariable 函数将 View 和 ViewModel 进行关联，关联后就会通过 DataBinding 在框架层进行数据绑定，代码很简洁，职责分配的也很清楚。
Android 中 MVVM 的问题

不幸的是，在 MVVM 架构中一旦出现了问题，会是噩梦般的存在，很难发现缘故原由，以致没有提示，以是我们在编写代码的时候务必勤于调试，完成一个小功能点就看一下效果，免得写了很多功能，最后一路报错，那样在排错的时候会无从动手、毫无思绪。
ViewModel 中会定义大量的数据绑定对象，以及 getter/setter 方法，会导致 ViewModel 越来越臃肿，可以思量进一步提取操作。
Google 建议

   

• 编写数据驱动型 UI
  
• xml 与 Activity/Fragment 通过 databinding 进行关联
  
• Activity/Fragment 尽可能保持精简
  
• ViewModel 充当毗连器
  
• 通过 协程 处理耗时操作
  
• 尽可能利用 依赖项注入 最佳实践，主要是构造函数注入。
  

  注意事项

   

• 避免 ViewModel 持有 任何与生命周期相关的范例的引用。如，Activity, Fragment, Context 或 Resources。假如某元素需要在 ViewModel 中利用 Context，则应重新严格评估其是否位于正确的层级中。
  
• AndroidViewModel 中持有 applicationContext，但官方 建议 利用 ViewModel，而非 AndroidViewModel，不应在 ViewModel 中利用 Application。正确做法是将依赖项移至界面层或数据层。
  

  try a demo

   点击按钮，哀求 wanandroid 网站的 banner 接口数据，将最后一条数据展示到UI
将 表现控件/输入控件 绑定到同一个 Bean 上，检察数据绑定的效果
  

MVVM 架构的 Demo 是从 MVP 架构那套代码变更过来的，只涉及上述几个文件的变动，文件数/代码量都大大减少了，这里多了一个 IUpdateListener，主要用于定义数据更新的接口，Bean 中会实现更新接口，也可以不带它。
Bean

   继承自 BaseObservable，是被观察者角色，View 充当观察者。
在需要关注的属性的 getter/setter 上通过 @Bindable 和 notifyPropertyChanged(BR.xx) 进行绑定
  IUpdateListener.java

1. public interface IUpdateListener<T> {
2.     /**
3.      * 获取到新数据后，用于更新与 xml 绑定的实体类的属性值
4.      * @param t
5.      */
6.     void update(T t);
7. }

复制代码

Banner.java

1. public class Banner extends BaseObservable implements IUpdateListener<Banner> {
3.     private String desc;
4.     private int id;
5.     private String imagePath;
6.     private int isVisible;
7.     private int order;
8.     private String title;
9.     private int type;
10.     private String url;
12.     public String getDesc() {
13.         return desc;
14.     }
16.     public void setDesc(String desc) {
17.         this.desc = desc;
18.     }
20.     public int getId() {
21.         return id;
22.     }
24.     public void setId(int id) {
25.         this.id = id;
26.     }
28.     public String getImagePath() {
29.         return imagePath;
30.     }
32.     public void setImagePath(String imagePath) {
33.         this.imagePath = imagePath;
34.     }
36.     public int getIsVisible() {
37.         return isVisible;
38.     }
40.     public void setIsVisible(int isVisible) {
41.         this.isVisible = isVisible;
42.     }
44.     public int getOrder() {
45.         return order;
46.     }
48.     public void setOrder(int order) {
49.         this.order = order;
50.     }
52.     @Bindable
53.     public String getTitle() {
54.         return title;
55.     }
57.     public void setTitle(String title) {
58.         this.title = title;
59.         notifyPropertyChanged(BR.title);
60.     }
62.     public int getType() {
63.         return type;
64.     }
66.     public void setType(int type) {
67.         this.type = type;
68.     }
70.     public String getUrl() {
71.         return url;
72.     }
74.     public void setUrl(String url) {
75.         this.url = url;
76.     }
78.     @Override
79.     public void update(Banner banner) {
80.         setDesc(banner.desc);
81.         setId(banner.id);
82.         setImagePath(banner.imagePath);
83.         setIsVisible(banner.isVisible);
84.         setOrder(banner.order);
85.         setTitle(banner.title);
86.         setType(banner.type);
87.         setUrl(banner.url);
88.     }
90.     @Override
91.     public String toString() {
92.         return "Banner{" +
93.                 "desc='" + desc + '\'' +
94.                 ", id=" + id +
95.                 ", imagePath='" + imagePath + '\'' +
96.                 ", isVisible=" + isVisible +
97.                 ", order=" + order +
98.                 ", title='" + title + '\'' +
99.                 ", type=" + type +
100.                 ", url='" + url + '\'' +
101.                 '}';
102.     }
103. }

复制代码

Model

   哀求接口，获取 banner 数据
  MainModel.java

1. public class MainModel extends BaseModel {
3.     public void getNetworkBanner(ResponseCallback<List<Banner>> callback) {
4.         // 收到需求，请求接口数据
5.         NetworkRepository.getInstance().requestBanners(callback);
6.     }
7. }

复制代码

View

   包含一个 Button，点击哀求接口数据
包含一个 TextView，用于回显数据
包含一个 EditText，用于检察数据绑定 UI 效果
注：xml 的变动是很重要的部分，它的功能增强了很多
  activity_main.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <layout xmlns:android="http://schemas.android.com/apk/res/android"
3.     xmlns:app="http://schemas.android.com/apk/res-auto"
4.     xmlns:tools="http://schemas.android.com/tools">
6.     <data>
8.         <import type="com.villen.mvvm.MainViewModel" />
10.         <import type="com.villen.mvvm.bean.Banner" />
12.         <variable
13.             name="vm"
14.             type="MainViewModel" />
16.         <variable
17.             name="banner"
18.             type="Banner" />
19.     </data>
21.     <LinearLayout
22.         android:layout_width="match_parent"
23.         android:layout_height="match_parent"
24.         android:gravity="center"
25.         android:orientation="vertical"
26.         tools:context=".MainActivity">
28.         <Button
29.             android:id="@+id/btn_banner_info"
30.             android:layout_width="wrap_content"
31.             android:layout_height="wrap_content"
32.             android:onClick="@{(view) -> vm.getNetworkBanner()}"
33.             android:text="@string/get_network_info" />
35.         <EditText
36.             android:id="@+id/et_banner_info"
37.             android:layout_width="wrap_content"
38.             android:layout_height="wrap_content"
39.             android:hint="@string/hint_change_data"
40.             android:text="@={banner.title}" />
42.         <TextView
43.             android:id="@+id/tv_banner_info"
44.             android:layout_width="wrap_content"
45.             android:layout_height="wrap_content"
46.             android:text="@{banner.title}" />
48.     </LinearLayout>
49. </layout>

复制代码

MainActivity.java

1. public class MainActivity extends BaseActivity<ActivityMainBinding, MainViewModel> {
3.     @Override
4.     protected void onCreate(Bundle savedInstanceState) {
5.         mBinding = ActivityMainBinding.inflate(LayoutInflater.from(this));
6.         setContentView(mBinding.getRoot());
7.         super.onCreate(savedInstanceState);
8.     }
10.     @Override
11.     public MainViewModel createViewModel() {
12.         return new MainViewModel();
13.     }
15.     @Override
16.     public void setVariable() {
17.         mBinding.setVm(mViewModel);
18.         mBinding.setBanner(mViewModel.getBanner());
19.     }
20. }

复制代码

ViewModel

   通过 model 获取数据
通知 UI 更新
  MainViewModel.java

1. public class MainViewModel extends BaseViewModel<MainModel> {
3.     private Banner mBanner;
4.     /**
5.      * 获取实体类对象，用于 xml 中数据绑定
6.      */
7.     public Banner getBanner() {
8.         if (mBanner == null) {
9.             mBanner = new Banner();
10.         }
11.         return mBanner;
12.     }
14.     @Override
15.     protected MainModel createModel() {
16.         return new MainModel();
17.     }
19.     /**
20.      * 获取 banner 数据
21.      */
22.     public void getNetworkBanner() {
23.         if (mModel == null) {
24.             return;
25.         }
26.         // 收到新需求，分发给 model 处理
27.         mModel.getNetworkBanner(new ResponseCallback<List<Banner>>() {
28.             @Override
29.             public void onSuccess(List<Banner> banners) {
30.                 if (banners != null && banners.size() > 0) {
31.                     mBanner.update(banners.get(2));
32.                 }
33.             }
35.             @Override
36.             public void onFail(String msg) {
37.                 Log.e("network", msg);
38.             }
39.         });
40.     }
41. }

复制代码

效果展示

附上源码链接
致谢：
感谢 wanandroid 提供的开放API
参考：
Android DataBinding 从入门到进阶，看这一篇就够

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。