探索Android中MVVM架构 ｜ 青训营笔记

紫叶传祺
132 阅读4分钟

这是我参与「第四届青训营」笔记创作活动的第34天

探索Android中MVVM架构

一、什么是架构模式

架构模式，也叫架构风格，一个架构模式描述软件系统里的基本的结构组织或纲要。
架构模式提供一些呈现定义好的子系统，指定它们的责任，并给出把它们组织在一起的法则和指南。
一个架构模式常常可以分解成很多个设计模式的联合使用。MVC模式就属于架构模式。

我们先来看一下架构模式的图片：

这里我们以 MVC 模式进行简单展示

img1

  • Model：对应M，数据模型，这里一般指 Java 实体类
  • View：对应V，视图UI，这里一般指 XML 或 Java 的视图对象
  • Controller：对应C，控制器，这里一般指 Activity 或 Fragment

对于早期 Android 开发的时候， MVC 模式相对来说比较友好。到后来的 MVP 模式的出现，还有 MVVM 模式的出现，MVC 模式主键被后者取代。相对于后者而言， MVC 模式他也存在一定的弊端，那就是程序员们写代码时常说的“代码耦合”。

我们大概了解了一下什么是架构模式，也大致看了看 MVC 模式的关系图片和模式概要。我们接下来往下边走~

二、什么是MVVM模式

MVVM 分为 Model，View，ViewModel 三个部分

Model：数据层，包含数据实体和对数据实体的操作，和 MVP 的 Model 没有区别
View：界面层，对应于 Activity，XML，负责数据显示以及用户交互。相比 MVP 的 View，这里面的 View 视图数据一般是在 xml 中使用 DataBinding 进来双向绑定数据的。
ViewModel：关联层，作为中间桥梁，去通知 Model 数据层处理数据业务，并将结果回调给 UI 层处理 UI 逻辑。ViewModel 中只有 Activity 持有 vm 引用，vm 是不持有 View 的引用的，所以 vm 的构造方法中不能传入视图相关的对象。所以重点在于怎么通知 View ，可以通过观察者回调的方式。但是现在一般是结合 Android Jetpack 来进行 View 的更新的。

我们来看一下 MVVM 模式的关系图片

img2

通过观看图片，我们就能发现， MVVM 模式要比 MVC 模式好得多，他是横向双向关系，而 MVC 模式是三角依赖关系。这一点毋庸置疑，在代码的解耦方面，他是非常出色的。

要使用 MVVM 模式，需要结合 Android Jetpack 来实现，
并且在项目模块 build.gradle 里把 DataBinding 启用。

如何协作

关于协作，我们先来下面的一张图：

img3

上图反映了 MVVM 框架中各个模块的联系和数据流的走向。

这里我们大概也过了过 MVVM 模式，接下来我们继续叭~

三、简单使用 MVVM 模式

MVVM 需要用到 DataBinding 知识，参考 Android DataBinding 简单使用

  1. 生成 DataBinding 布局
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>
        <variable
            name="viewModel"
            type="com.app.mvvmdemo.MVVMViewModel" />
    </data>
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">
 
        <TextView
            android:id="@+id/tv_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:text="@{viewModel.result}" />
 
        <EditText
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:text="@={viewModel.userInput}"/>
 
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:onClick="@{viewModel.getData}"
            android:text="替换" />

    </LinearLayout>

</layout>
  1. 实现 MVVMViewModel
public class MVVMViewModel extends BaseObservable {

    private MVVMModel mvvmModel;

    // EditText数据
    private String userInput;

    // 网络返回数据
    private String result;
 
    public MVVMViewModel(Application application){
        this.mvvmModel = new MVVMModel();
    }
 
    public void getData(View view){
        mvvmModel.getHttpData(userInput, new MCallback() {
            @Override
            public void onSuccess(String text) {
                setResult(text);
            }
 
            @Override
            public void onFailed() {
                setResult("数据获取失败");
            }
        });
    }
 
    @Bindable
    public String getResult() {
        return result;
    }
 
    public void setResult(String result) {
        this.result = result;
        notifyPropertyChanged(BR.result);
    }
 
    public String getUserInput() {
        return userInput;
    }
 
    public void setUserInput(String userInput) {
        this.userInput = userInput;
    }
}

public class MVVMModel {

    // 模拟网络请求获取数据
    public void getHttpData(String user, MCallback callback){
        Random random = new Random();
        boolean isSuccess = random.nextBoolean();
        if (isSuccess){
            callback.onSuccess("数据获取成功：" + user);
        } else {
            callback.onFailed();
        }
    }
}

public interface MCallback {

    void onSuccess(String text);
 
    void onFailed();
}
  1. Activity 代码
public class MVVMActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityMvvmBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_mvvm);
        // 绑定 ViewModel
        MVVMViewModel mvvmViewModel = new MVVMViewModel(getApplication());
        binding.setViewModel(mvvmViewModel);
    }
}

通过上边代码的简单使用，我们真正发现了他强大的奥秘。数据变则 UI 变！
接下来我们进入总结阶段~

四、总结

上边我们大概了解了什么是架构模式，也简单看到了 MVC 模式的关系图片。然后我们又看了看什么是 MVVM 模式，他依赖 Android Jetpack ，这一点毋庸置疑。这里没有说 MVP 模式是因为他比较繁琐，而 MVVM ，通过代码简单进行了一下实现，可以很清楚的看到，他几乎没有在 Activity 里进行 View 的 set，get ，这一点还是很不错的。如果还想看一遍请滑到最上方标题处，最后！祝家人们学习顺利，毕业进大厂~

avatar
文章
阅读
粉丝