我理解的MVVM架构及实战Demo

我理解的MVVM架构及实战Demo

简介

MVVM架构模式，即Model-View-ViewModel三个层级，MVVM模式出来的时间已经很长了，网上关于MVVM模式的解析也有很多，我这里只说一下我自己的理解，基本上是和MVP模式相比较的一个差异。

先说一下MVVM中，我理解的各层的作用：

• Model： 数据处理层，用来存储数据和处理数据，这一层的作用和MVP中的Model层类似；

• View：UI显示更新和处理与用户的交互。这一层和MVP中的View层有一点区别，在MVP模式中，View的界面更新是由Presenter层驱动的，而在MVVM模式中，View的界面更新是采用观察者模式去动态监听数据变化，数据改变后由自己来改变，变被动为主动，这样View层与其他层的耦合度进一步降低了。并且若采用了DataBinding的形式后，View的UI数据更改完全由程序自动化更改，我们少去很多初始化工作和setText()等繁复操作。

• ViewModel：处理逻辑中转任务的媒介，很类似于MVP模式中的Presenter层，但是它相比Presenter层的优点在于，它不用去通知View层去更新UI界面，降低了和View的耦合度，并且同一个ViewModel可以同时绑定多个View层，达到共同更新数据的目的。

MVVM模式中的一些相关知识点

Demo中会涉及一下一些关于MVVM模式的知识，不清楚的同学可以先了解一下，加深印象。

Lifecycle

Lifecycle是Google官方提供的方便管理生命周期事件的方式，可以更方便的监听生命周期变化事件，它以注解的方式作用在方法上，当生命周期方法调用时，它也会被跟随调用。

LiveData

LiveData是一种用来持有数据的对象，并且当数据改变时，去通知处于active状态的观察者去做出相应的改变。在Android中，处于STARTED或者RESUME状态下的观察者被认为是active状态。LiveData基于Lifecycle。

也就是说，当多个View层共享同一组数据时（一个Activity和多个Fragment），这组数据可以通过LiveData的形式持有，因为LiveData持有的数据是根据View的当前状态去通知的，因此，它不会产生一些类似于View被销毁后还去更改UI的一些奇怪的crash现象。

并且，LiveData通过Lifecycle的方式，已经监听了View的生命周期，它会跟随View层在View被销毁的时候销毁（旋转屏等重建行为不会受影响）。

DataBinding

Databing是Google发布的一个用来支持MVVM模式的框架，它的主要作用是用来降低布局和逻辑的耦合度。
以前，我们都是在布局xml文件中写好控件，然后通过findViewById的形式去手动更新UI，DataBindind的出现，让我们省去了查找控件和手动更新UI的操作，我们仅需要把布局中的控件和Model层的数据关联起来，当数据改变时，UI也会跟着改变，达到双向绑定的目的。

实战演练

理论知识就介绍到这里，网上有很多相关的资料介绍，大家可以自行查找。这里，我通过实战Demo来告诉一下大家我理解的MVVM模式是什么样的，若有不正确，还请指正。

准备工作

这次的Demo也是参考网上其他人的博客来写的，功能是获取Bing网站首页的图片并显示，Bing网站首页图片的获取地址是：

https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1

其中，idx的数字表示不同的图片，获取到的Json文件格式如下：

{
    "images":Array[1],
    "tooltips":{
        "loading":"正在加载...",
        "previous":"上一个图像",
        "next":"下一个图像",
        "walle":"此图片不能下载用作壁纸。",
        "walls":"下载今日美图。仅限用作桌面壁纸。"
    }
}

其中，"images":Array[1]中包含图片的URL和描述，展开后是这样的：

{
    "startdate":"20190901",
    "fullstartdate":"201909011600",
    "enddate":"20190902",
    "url":"/th?id=OHR.RamsauWimbachklamm_ZH-CN1602837695_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp",
    "urlbase":"/th?id=OHR.RamsauWimbachklamm_ZH-CN1602837695",
    "copyright":"拉姆绍的Wimbachklamm峡谷，德国巴伐利亚 (© Westend61 GmbH/Alamy)",
    "copyrightlink":"https://www.bing.com/search?q=Wimbachklamm%E5%B3%A1%E8%B0%B7&form=hpcapt&mkt=zh-cn",
    "title":"",
    "quiz":"/search?q=Bing+homepage+quiz&filters=WQOskey:%22HPQuiz_20190901_RamsauWimbachklamm%22&FORM=HPQUIZ",
    "wp":true,
    "hsh":"9f822f5607e3cec381408303a73c1986",
    "drk":1,
    "top":1,
    "bot":1,
    "hs":[

    ]
}

通过Json文件我们得到，真正的图片地址是https://www.bing.com/开头，接上Json中Array中的url，即为图片地址。

下面不多说，直接开撸代码。

因为本Demo使用了DataBinding + LiveData的形式，因此需要首先在module的build.gradle文件中加上：

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