简介
背景
这几年 MVP 架构在安卓界非常流行，几乎已经成为主流框架，它让业务逻辑 和 UI操作相对独立，使得代码结构更清晰。
MVVM 在前端火得一塌糊涂，而在安卓这边却基本没见到几个人在用，看到介绍 MVVM 也最多是讲 DataBinding 或 介绍思想的。偶尔看到几篇提到应用的，还是对谷歌官网的Architecture Components 文章的翻译。
相信大家看别人博客或官方文档的时候，总会碰到一些坑。要么入门教程写得太复杂（无力吐槽，前面写一堆原理，各种高大上的图，然并卵，到实践部分一笔带过，你确定真的是入门教程吗）。要么就是简单得就是一个 hello world，然后就没有下文了（看了想骂人）。
实在看不下去的我，决定插手你的人生。
目录
《安卓-深入浅出MVVM教程》大致分两部分：应用篇、原理篇。
采用循序渐进方式，内容深入浅出，符合人类学习规律，希望大家用最少时间掌握 MVVM。
应用篇：
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 模块下。
每一节代码采用不同包名，相互独立。
前言
上一节我们加入了缓存。这一节我来回答上一次的问题。
重新请求数据
下拉刷新 或者 重发请求 是常见的需求。
怎么在 MVVM 中实现呢？
其实第一节就有提到，LiveData 直接调用 setValue 或 PostValue 就会触发一次数据更新操作。
为了使得 username 可以改变，我们要把他定义为一个可变的 LiveData。
那么我们怎么在 username 改变的时候去更新 user 呢？
我们可以通过 Transformations.switchMap 来生成一个监听 username 的 LiveData
public class UserViewModel extends ViewModel {
private UserRepository userRepository = UserRepository.getInstance();
private MutableLiveData ldUsername;
private LiveData ldUser;
public LiveData getUser() {
if (null == ldUser) {
ldUsername = new MutableLiveData<>();
ldUser = Transformations.switchMap(ldUsername, new Function>() {
@Override
public LiveData apply(String username) {
return userRepository.getUser(username);
}
});
}
return ldUser;
}
public void reload(String username) {
ldUsername.setValue(username);
}
}
当需要请求数据的时候，View 中调用 reload 方法即可触发。
这里不再往下讲了，因为还要加入多状态。
多状态视图
最常见的状态是 Loading Content Empty Error
Bean
所以首先想到的是定义枚举类型
public enum Status {
Loading,
Content,
Empty,
Error,
}
有了类型该怎么使用？
作为 MVVM 架构，核心思想是根据 Data 渲染 View，所以很自然想到根据状态和数据来渲染 View。然而状态和数据是难以分离的，所以一般会想到通过一个 bean 来把数据和状态包装起来。
public class Lcee {
public final Status status;
public final T data;
public final Throwable error;
public Lcee(Status status, T data, Throwable error) {
this.status = status;
this.data = data;
this.error = error;
}
}
为了方便外部使用，我们再定义一些工厂方法。
public static Lcee content(T data) {
return new Lcee<>(Status.Content, data, null);
}
public static Lcee error(T data, Throwable error) {
return new Lcee<>(Status.Error, data, error);
}
public static Lcee error(Throwable error) {
return error(null, error);
}
public static Lcee empty(T data) {
return new Lcee<>(Status.Empty, data, null);
}
public static Lcee empty() {
return empty(null);
}
public static Lcee loading(T data) {
return new Lcee<>(Status.Loading, data, null);
}
public static Lcee loading() {
return loading(null);
}
Model
DataSource
因为 bean 变了，所以 DataSource 和实现都得修改。
先把接口的返回值改成 LiveData
public interface UserDataSource {
LiveData> queryUserByUsername(String username);
}
UserRepository
UserRepository 里面的返回值也要改
public LiveData> getUser(String username) {
...
}
LocalUserDataSource
然后先改本地数据源 LocalUserDataSource
这里出现了一个 MediatorLiveData，这是什么鬼？
它也是一个 LiveData，不过可以添加多个数据源
我没听错吧？他自己不是数据源吗？
是的，他可以观察其他数据。
因为这样，我们就可以实现 LiveData
@Override
public LiveData> queryUserByUsername(String username) {
final MediatorLiveData> data = new MediatorLiveData<>();
data.setValue(Lcee.loading());
data.addSource(userService.queryByUsername(username), new Observer() {
@Override
public void onChanged(@Nullable User user) {
if (null == user) {
data.setValue(Lcee.empty());
} else {
data.setValue(Lcee.content(user));
}
}
});
return data;
}
RemoteUserDataSource
而远程数据源就不用转换了，只需要修改一下 LiveData 的类型。
@Override
public LiveData> queryUserByUsername(String username) {
final MutableLiveData> data = new MutableLiveData<>();
data.setValue(Lcee.loading());
userApi.queryUserByUsername(username)
.enqueue(new Callback() {
@Override
public void onResponse(Call call, Response response) {
User user = response.body();
if (null == user) {
data.setValue(Lcee.empty());
return;
}
data.setValue(Lcee.content(user));
// update cache
LocalUserDataSource.getInstance().addUser(user);
}
@Override
public void onFailure(Call call, Throwable t) {
t.printStackTrace();
data.setValue(Lcee.error(t));
}
});
return data;
}
ViewModel
因为数据变了，ViewModel 也得做小修改，实际上就是改了返回值
public LiveData> getUser() {
...
}
View
View 要根据数据渲染，现在数据改了， View 自然也要改。
重新请求数据
为了可以实现输入用户名然后进行重新请求数据，我们得不得加入编辑框和按钮，其实就是 左边输入框，右边按钮
相应的，在 Activity 中初始化
etUsername = (EditText) findViewById(R.id.et_username);
为了方便取值，定义一个方法
private String getUsername() {
return etUsername.getText().toString();
}
还记得一开始说的，重新请求数据吗，现在可以调用这样一个方法就实现重新请求数据了。
private void reload() {
// reload
userViewModel.reload(getUsername());
}
多状态视图
XML
为了显示4种状态视图，我们需要先定义
把状态视图整合到一起后就是这样的。
初始化View
然后记得初始化
vContent = findViewById(R.id.v_content);
vError = findViewById(R.id.v_error);
vLoading = findViewById(R.id.v_loading);
vEmpty = findViewById(R.id.v_empty);
修改观察的数据类型
这里也要修改观察的数据类型
private void initData() {
...
userViewModel.getUser().observe(this, new Observer>() {
@Override
public void onChanged(@Nullable Lcee data) {
updateView(data);
}
});
reload();
}
响应事件
具体怎么渲染的等下再说，我们还需要处理一些用户点击事件。
- 用户点击 错误/空 视图后，触发重新加载。
- 点击搜索按钮/键盘回车后，隐藏键盘，触发重新加载
private void initEvent() {
View.OnClickListener reloadClickListener = new View.OnClickListener() {
@Override
public void onClick(View view) {
hideKeyboard();
reload();
}
};
vError.setOnClickListener(reloadClickListener);
vEmpty.setOnClickListener(reloadClickListener);
findViewById(R.id.btn_search).setOnClickListener(reloadClickListener);
etUsername.setOnKeyListener(new View.OnKeyListener() {
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_ENTER) {
hideKeyboard();
reload();
return true;
}
return false;
}
});
}
private void hideKeyboard() {
((InputMethodManager) getSystemService(INPUT_METHOD_SERVICE))
.hideSoftInputFromWindow(UserActivity.this.getCurrentFocus().getWindowToken(),
InputMethodManager.HIDE_NOT_ALWAYS);
}
渲染
接下来就是重点，渲染 view
根据四种状态去渲染
private void updateView(Lcee lcee) {
switch (lcee.status) {
case Content: {
showContent();
tvId.setText(lcee.data.getId() + "");
tvName.setText(lcee.data.getName());
break;
}
case Empty: {
showEmpty();
break;
}
case Error: {
showError();
break;
}
case Loading: {
showLoading();
break;
}
}
}
同时为了方便调用，我们封装 4 个方法来切换 4 种视图
private void showContent() {
vContent.setVisibility(View.VISIBLE);
vEmpty.setVisibility(View.GONE);
vError.setVisibility(View.GONE);
vLoading.setVisibility(View.GONE);
}
private void showEmpty() {
vContent.setVisibility(View.GONE);
vEmpty.setVisibility(View.VISIBLE);
vError.setVisibility(View.GONE);
vLoading.setVisibility(View.GONE);
}
private void showError() {
vContent.setVisibility(View.GONE);
vEmpty.setVisibility(View.GONE);
vError.setVisibility(View.VISIBLE);
vLoading.setVisibility(View.GONE);
}
private void showLoading() {
vContent.setVisibility(View.GONE);
vEmpty.setVisibility(View.GONE);
vError.setVisibility(View.GONE);
vLoading.setVisibility(View.VISIBLE);
}
总结
到此为止，我们解决了一大难题。
What？你已经掌握 MVVM 了？
好戏才刚刚开始