《安卓-深入浅出MVVM教程》应用篇-01Hello MVVM

2017-10-23 本文已影响1527人 IT天宇

简介

背景

这几年 MVP 架构在安卓界非常流行，几乎已经成为主流框架，它让业务逻辑和 UI操作相对独立，使得代码结构更清晰。

MVVM 在前端火得一塌糊涂，而在安卓这边却基本没见到几个人在用，看到介绍 MVVM 也最多是讲 DataBinding 或介绍思想的。偶尔看到几篇提到应用的，还是对谷歌官网的Architecture Components 文章的翻译。

相信大家看别人博客或官方文档的时候，总会碰到一些坑。要么入门教程写得太复杂（无力吐槽，前面写一堆原理，各种高大上的图，然并卵，到实践部分一笔带过，你确定真的是入门教程吗）。要么就是简单得就是一个 hello world，然后就没有下文了（看了想骂人）。

实在看不下去的我，决定插手你的人生。

01 Hello MVVM (快速入门)
02 Repository （数据仓库）
03 Cache （本地缓存）
04 State Lcee （加载/空/错误/内容视图）
05 Simple Data Source （简单的数据源）
06 Load More （加载更多）
07 DataBinding （数据与视图绑定）
08 RxJava2
09 Dragger2
10 Abstract （抽象）
11 Demo （例子）
12-n 待定（欢迎 github 提建议）

原理篇

01 MyLiveData（最简单的LiveData）
02-n 待定（并不是解读源码，那样太无聊了，打算带你从0撸一个 Architecture）

关于提问

本人水平和精力有限，如果有大佬发现哪里写错了或有好的建议，欢迎在本教程附带的 github仓库提issue。
What？为什么不在博客留言？考虑到国内转载基本无视版权的情况，一般来说你都不是在源出处看到这篇文章，所以留言我也一般是看不到的。

教程附带代码

https://github.com/ittianyu/MVVM

应用篇放在 app 模块下，原理篇放在 implementation 模块下。
每一节代码采用不同包名，相互独立。

前言

快一年没更新安卓技术栈了，今年年初就发现谷歌正在推 Architecture 。这是谷歌推出的快速实现 MVVM 架构的类库。目前已经是RC版本了，正式版应该不远了。体验完这么一个架构之后，只能用一个字形容。

虽然不打算长久的做安卓开发，但在其位谋其职，考虑到安卓社区的发展，有必要给大家涨涨姿势。

思想

什么是 MVVM？

很简单， Model（数据） View（视图） ViewModel（数据视图管理器）

能不能具体点？

Model：bean(实体类)、Data Source（Http请求相关、数据库相关）
View：xml、View、Activity、Fragment 等UI相关
ViewModel：这正是我要说的，先简单理解为管理器

执行流程

ViewModel 负责调用 Model（可以称之为数据源），拿到结果后，更新自身。而 View 与 ViewModel 双向绑定（后面会讲怎么实现绑定的），所以 View 就会自动更新。
这就是 MVVM 大致的思想。

环境配置

首先需要引入 Lifecycles, LiveData and ViewModel 这三个全家桶，而这些库是放在谷歌 maven 上，所以你得在项目根 gradle 文件中加上谷歌 maven

allprojects {
    repositories {
        jcenter()
        maven { url 'https://maven.google.com' }
    }
}

然后在 app 模块的 gradle 文件中加上如下 3 个库，为了便于后面正式版发布后修改版本号，我们通过引用变量。

// Lifecycles, LiveData and ViewModel
compile "android.arch.lifecycle:runtime:$rootProject.lifecycleRuntime"
compile "android.arch.lifecycle:extensions:$rootProject.lifecycle"
annotationProcessor "android.arch.lifecycle:compiler:$rootProject.lifecycle"

相应的，你需要在根 gradle 文件中加上附加属性（gradle 的语法）

ext {
    lifecycle = '1.0.0-rc1'
    lifecycleRuntime = '1.0.3'
}

Model

为了降低学习难度，打算写一个展示用户 id 和 name 的demo。
所以 bean 真的是简单得只有2个属性，省略了 get 和 set 方法（读者练习时自己加上）。

public class User implements Serializable {
    private int id;
    private String name;
// ...getter setter and toString...
}

Model 就写完了，what？说好的数据源呢？
慌，不要慌！下次再讲。

View

所以相应的，我们定义 2 个 TextView 来展示 id 和 name。

a_activity_user.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:id="@+id/v_root"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_id"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/tv_name"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

然后在 Activity 中初始化并获得引用。
这里需要注意，如果你的 support lib >= 26.0.0，则直接继承 AppCompatActivity 就好。否则需要继承 LifecycleActivity。

public class UserActivity extends AppCompatActivity {
    private TextView tvId;
    private TextView tvName;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.a_activity_user);
        initView();
        initData();
    }

    private void initView() {
        tvId = (TextView) findViewById(R.id.tv_id);
        tvName = (TextView) findViewById(R.id.tv_name);
    }

    private void initData() {
        // todo
    }

}

Lifecycle

上面提到 LifecycleActivity，实际上还有 LifecycleFragment，类似的，在 support lib >= 26.0.0 时，默认的 Activity 和 Fragment 基类里面已经集成了，不需要你做修改了。具体可以看官方文档 Lifecycle

用于管理 Activity / Freagment 生命周期，方便查询当前组件生命周期的状态。对应的关系如下图。

那到底有什么用？

只要持有 Lifecycle，就等于知道了容器的生命周期。
比如，实现 LifecycleObserver 之后，就可以在状态发生改变时及时响应。也就是等同于让 Model或其他也拥有了生命周期。（还有这种操作？）

定义一个定位监听器，可以在生命周期不同状态下，做对应的操作，再也不用在 Activity 中加生命周期注册或取消操作了。

class MyLocationListener implements LifecycleObserver {
    private boolean enabled = false;
    public MyLocationListener(Context context, Lifecycle lifecycle, Callback callback) {
       ...
    }

    @OnLifecycleEvent(Lifecycle.Event.ON_START)
    void start() {
        if (enabled) {
           // connect
        }
    }

    public void enable() {
        enabled = true;
        if (lifecycle.getState().isAtLeast(STARTED)) {
            // connect if not connected
        }
    }

    @OnLifecycleEvent(Lifecycle.Event.ON_STOP)
    void stop() {
        // disconnect if connected
    }
}

而在 Activity 中，只需要传入 lifecycle 就可以了。优雅得不像话。

myLocationListener = new MyLocationListener(this, getLifecycle(), location -> {
            // update UI
        });

ViewModel

ViewModel 就类似于 MVP 中的 Presenter 或者 MVC 中的 Controller。（不清楚什么是 MVC MVP 也没关系，就是个概念而已）

现在我们完全没有必要自己定义 ViewModel 来管理 UI 生命周期，谷歌大礼包中就有 ViewModel

所以很自然的我们写出这样的一个类。

public class UserViewModel extends ViewModel {}

你可能好奇 ViewModel，点进去看发现就是只有一个空方法的抽象类。可以，这很谷歌。但从 onCleared 这方法名可以看出，这还是有用处的。

LiveData

接下来就是要去调用 Model 并和 View 绑定，在继续往下讲之前，还需要介绍一下 LiveData，没错，就是它，可以轻松的实现和 View 的绑定。

它能自动响应生命周期方法，可被观察（数据改变时通知观察者），所以可以实现 Model 和 View 的绑定。

具有以下优点：

避免内存泄露：由于 Observer 和 Lifecycle 绑定，当 Lifecycle 被销毁后，Observer 自动被清理。
避免崩溃：避免在 Activity 被销毁后更新数据导致的崩溃情况
数据可共享：数据可在多个 fragment 中共享。甚至可以通过单例的 LiveData 实现全局数据共享
不需要在 Activity 中处理生命周期
数据更新及时：当数据在 UI 不可见的时更新了，在可见时，数据会及时更新到UI上

具体用法

创建一个可变的 LiveData，也就是 MutableLiveData。
并通过一个方法返回。没错，就是这么简单，只需要 new 出来就行了。

// Create a LiveData with a String
private MutableLiveData<String> mCurrentName;

public MutableLiveData<String> getCurrentName() {
    if (mCurrentName == null) {
        mCurrentName = new MutableLiveData<String>();
    }
    return mCurrentName;
}

在 Activity / Fragment 中观察 LiveData。也就是当 LiveData 数据发生变化时，自动回调方法来更新 UI。

final Observer<String> nameObserver = new Observer<String>() {
    @Override
    public void onChanged(@Nullable final String newName) {
        // Update the UI, in this case, a TextView.
        mNameTextView.setText(newName);
    }
};
getCurrentName().observe(this, nameObserver);

那什么时候会更新数据？

更新数据一般是 UI 这边触发的，比如我们给按钮绑定一个事件，点击之后去更改 name。

mButton.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        String anotherName = "John Doe";
        getCurrentName().setValue(anotherName);
    }
});

是的，你想更新 UI 上的文本，只需要修改 LiveData 中的数据即可。

ViewModel + LiveData

讲完 LiveData，我们回到 ViewModel。
为了显示 id 和 name，我们需要一个 LiveData<User>。
对外公开一个 getUser 方法和 setUsername 方法。
这里你会发现 getUser 并不是线程安全的，因为这个案例不会有在多线程中 getUser，所以没必要加，实际上还可以把 user 初始化放到成员变量定义的地方。

public class UserViewModel extends ViewModel {
    private MutableLiveData<User> user;

    public LiveData<User> getUser() {
        if (user == null)
            user = new MutableLiveData<>();
        return user;
    }

    public void setUsername(String username) {
        user.setValue(new User(1, username));
    }
}

View 和 ViewModel 绑定

之前提到了 LiveData，它可以方便的被观察。
还有 ViewModel，可以自动响应生命周期。
所以就是这两个东西，方便的实现绑定操作。

之前我已经初始化了 UserActivity 的View，现在来完善 initData。

通常来说，一个 View 只和一个 ViewModel 绑定。所以我们需要一个 Activity 级别的单例 ViewModel，我们可以通过 ViewModelProviders.of(this).get(UserViewModel.class) 来简单的实现。

然后通过 userViewModel 取得 LiveData 并添加监听（绑定操作）。

这个回调方法里面，我们就可以更新与该数据相关的 UI。

没错，绑定就是这么简单便捷。

    private UserViewModel userViewModel;

    private void initData() {
        userViewModel = ViewModelProviders.of(this).get(UserViewModel.class);
        userViewModel.getUser().observe(this, new Observer<User>() {
            @Override
            public void onChanged(@Nullable User user) {
                updateView(user);
            }
        });

        userViewModel.setUsername("ittianyu");
    }

    private void updateView(User user) {
        tvId.setText(user.getId() + "");
        tvName.setText(user.getName());
    }

总结

有了这样一个构架，以后就不需要为 n 处都要修改 View 导致的复杂的 UI 逻辑而头疼了。

而数据请求也可以更纯粹，不需要管 UI 是怎么显示的。

简单来说就是请求数据完成并更新数据后，通过通知 UI 去根据数据来渲染界面。

没错，今后安卓也可以像前端那样愉快的写 UI 了。也可以像后端那样层次分明的专心处理数据了，妙不可言。