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

简介

背景

这几年 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<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

好戏才刚刚开始

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容