《安卓-深入浅出MVVM教程》应用篇-04 State Lcee （加载/空/错误/内容视图）

简介

背景

这几年 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 模块下。
每一节代码采用不同包名，相互独立。

前言

上一节我们加入了缓存。这一节我来回答上一次的问题。

重新请求数据

下拉刷新或者重发请求是常见的需求。
怎么在 MVVM 中实现呢？

其实第一节就有提到，LiveData 直接调用 setValue 或 PostValue 就会触发一次数据更新操作。

为了使得 username 可以改变，我们要把他定义为一个可变的 LiveData。
那么我们怎么在 username 改变的时候去更新 user 呢？

我们可以通过 Transformations.switchMap 来生成一个监听 username 的 LiveData

public class UserViewModel extends ViewModel {
    private UserRepository userRepository = UserRepository.getInstance();
    private MutableLiveData<String> ldUsername;
    private LiveData<User> ldUser;

    public LiveData<User> getUser() {
        if (null == ldUser) {
            ldUsername = new MutableLiveData<>();
            ldUser = Transformations.switchMap(ldUsername, new Function<String, LiveData<User>>() {
                @Override
                public LiveData<User> 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<T> {
    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 <T> Lcee<T> content(T data) {
        return new Lcee<>(Status.Content, data, null);
    }

    public static <T> Lcee<T> error(T data, Throwable error) {
        return new Lcee<>(Status.Error, data, error);
    }
    public static <T> Lcee<T> error(Throwable error) {
        return error(null, error);
    }

    public static <T> Lcee<T> empty(T data) {
        return new Lcee<>(Status.Empty, data, null);
    }
    public static <T> Lcee<T> empty() {
        return empty(null);
    }

    public static <T> Lcee<T> loading(T data) {
        return new Lcee<>(Status.Loading, data, null);
    }
    public static <T> Lcee<T> loading() {
        return loading(null);
    }

Model

DataSource
因为 bean 变了，所以 DataSource 和实现都得修改。

先把接口的返回值改成 LiveData<Lcee<User>>

public interface UserDataSource {
    LiveData<Lcee<User>> queryUserByUsername(String username);
}

UserRepository
UserRepository 里面的返回值也要改

public LiveData<Lcee<User>> getUser(String username) {
...
}

LocalUserDataSource

然后先改本地数据源 LocalUserDataSource
这里出现了一个 MediatorLiveData，这是什么鬼？
它也是一个 LiveData，不过可以添加多个数据源
我没听错吧？他自己不是数据源吗？
是的，他可以观察其他数据。

因为这样，我们就可以实现 LiveData<User> 转换为 LiveData<Lcee<User>>

@Override
public LiveData<Lcee<User>> queryUserByUsername(String username) {
    final MediatorLiveData<Lcee<User>> data = new MediatorLiveData<>();
    data.setValue(Lcee.<User>loading());

    data.addSource(userService.queryByUsername(username), new Observer<User>() {
        @Override
        public void onChanged(@Nullable User user) {
            if (null == user) {
                data.setValue(Lcee.<User>empty());
            } else {
                data.setValue(Lcee.content(user));
            }
        }
    });
    return data;
}

RemoteUserDataSource

而远程数据源就不用转换了，只需要修改一下 LiveData 的类型。

@Override
public LiveData<Lcee<User>> queryUserByUsername(String username) {
    final MutableLiveData<Lcee<User>> data = new MutableLiveData<>();
    data.setValue(Lcee.<User>loading());

    userApi.queryUserByUsername(username)
            .enqueue(new Callback<User>() {
                @Override
                public void onResponse(Call<User> call, Response<User> response) {
                    User user = response.body();
                    if (null == user) {
                        data.setValue(Lcee.<User>empty());
                        return;
                    }
                    data.setValue(Lcee.content(user));
                    // update cache
                    LocalUserDataSource.getInstance().addUser(user);
                }

                @Override
                public void onFailure(Call<User> call, Throwable t) {
                    t.printStackTrace();
                    data.setValue(Lcee.<User>error(t));
                }
            });
    return data;
}

ViewModel

因为数据变了，ViewModel 也得做小修改，实际上就是改了返回值

public LiveData<Lcee<User>> getUser() {
...
}

View

View 要根据数据渲染，现在数据改了， View 自然也要改。

重新请求数据

为了可以实现输入用户名然后进行重新请求数据，我们得不得加入编辑框和按钮，其实就是左边输入框，右边按钮

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <EditText
        android:id="@+id/et_username"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:imeOptions="actionSearch"
        android:singleLine = "true"
        android:text="ittianyu" />

    <Button
        android:id="@+id/btn_search"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="search" />

</LinearLayout>

相应的，在 Activity 中初始化

etUsername = (EditText) findViewById(R.id.et_username);

为了方便取值，定义一个方法

private String getUsername() {
    return etUsername.getText().toString();
}

还记得一开始说的，重新请求数据吗，现在可以调用这样一个方法就实现重新请求数据了。

private void reload() {
    // reload
    userViewModel.reload(getUsername());
}

多状态视图

XML
为了显示4种状态视图，我们需要先定义
把状态视图整合到一起后就是这样的。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <EditText
            android:id="@+id/et_username"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:imeOptions="actionSearch"
            android:singleLine = "true"
            android:text="ittianyu" />

        <Button
            android:id="@+id/btn_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="search" />

    </LinearLayout>

    <FrameLayout
        android:id="@+id/v_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/v_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical">

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

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

        </LinearLayout>

        <FrameLayout
            android:id="@+id/v_error"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="Network error, click to reload" />

        </FrameLayout>

        <FrameLayout
            android:id="@+id/v_empty"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="User not exist" />

        </FrameLayout>

        <FrameLayout
            android:id="@+id/v_loading"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ProgressBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center" />

        </FrameLayout>

    </FrameLayout>
</LinearLayout>

初始化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<Lcee<User>>() {
        @Override
        public void onChanged(@Nullable Lcee<User> 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<User> 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 了？

不存在的.jpg

好戏才刚刚开始

最后编辑于：2017.12.11 05:17:31

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,294评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,493评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,790评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,595评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,718评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,906评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,053评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,797评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,250评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,570评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,711评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,388评论 4赞 332
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,018评论 3赞 316
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,796评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,023评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,461评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,595评论 2赞 350

《安卓-深入浅出MVVM教程》应用篇-04 State Lcee （加载/空/错误/内容视图）

《安卓-深入浅出MVVM教程》应用篇-04 State Lcee （加载/空/错误/内容视图）

简介

背景

目录

应用篇：

原理篇

关于提问

教程附带代码

前言

重新请求数据

多状态视图

Bean

Model

ViewModel

View

重新请求数据

多状态视图

总结

推荐阅读更多精彩内容