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

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

Android小彩虹2021-08-23 16:35:27220A+A-

简介

背景

这几年 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?为什么不在博客留言?考虑到国内转载基本无视版权的情况,一般来说你都不是在源出处看到这篇文章,所以留言我也一般是看不到的。

教程附带代码

github.com/ittianyu/MV…

应用篇放在 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
不存在的.jpg

好戏才刚刚开始

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们