简单大方的状态视图，快了解一下！

前言

状态视图是大家平时都会使用的视图，目的是为了灵活地切换数据、错误、加载和空数据这几种状态，为方便平日使用，我就封装了一款简洁大方的状态视图，以下就是使用效果：

状态视图

特点

该状态视图的优点是：

• 样式灵活：各状态下的文本、错误、空数据状态下的Drawable和加载动画的颜色可随意修改，并且默认样式足够简洁美观
• 状态切换灵活
• 使用简单：提供默认样式

使用

第一步：添加依赖

在需要使用的模块中的build.gradle文件中添加：

implementation 'com.orient:Orient-Ui:1.0.1'

第二步：添加进布局文件xml

假设父布局是线性布局，数据视图为TextView，则我们的布局代码为：

<?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"
    ...>
      
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        .../>
          
    <!-- Data View'visibility should be gone  -->
    <TextView
        android:id="@+id/tv_name"
        ...
        android:visibility="gone"/>
          
    <com.orient.me.widget.placeholder.StatusView
        android:id="@+id/sv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:comEmptyText="@string/test_empty"
        app:comErrorText="@string/test_error"
        app:comLoadingText="@string/test_loading"
        app:comLoadingColor="@color/amber_300"
        />
          
</LinearLayout>

在这里我有必要介绍一下StatusView的六个属性：

名称	作用
app:comEmptyText	空数据状态下显示的文本
app:comErrorText	错误状态下显示的文本
app:comLoadingText	加载状态下显示的文本
app:comLoadingColor	加载动画的颜色
app:comEmptyDrawable	空数据状态下的Drawable资源文件
comErrorDrawable	错误状态下的Drawable资源文件

即使你一个值都不设置，它也是有默认值的，在上面的布局文件中，我只使用了以上属性的前四个，有需求的同学可以自行设置。

注意：数据视图的android:visibility需要设置为gone。

第三步：获取并绑定

在这一步，我们需要获取状态视图和数据视图，然后进行绑定：

@BindView(R.id.toolbar)
Toolbar mToolbar;
@BindView(R.id.tv_name)
TextView mContent;
@BindView(R.id.sv_content)
StatusView mStatusView;

@Override
protected void initWidget() {
    super.initWidget();
    // 视图绑定
    mStatusView.bind(mContent);
    
    //  ... 状态事件切换设置
}

我在上面的代码中使用了ButterKnife，以及initWidget方法发生在Activity的生命周期onCreate中。

这里的状态视图是mStatusView，数据视图是TextView，当然，你也可以将RecycelrView、ListView甚至布局文件设置为数据视图，然后调用StatusView#bind完成绑定。

第四步：状态切换

在第三步代码中我省略了状态切换的设置：

protected void initWidget() {
    super.initWidget();
    // 视图绑定
    mStatusView.bind(mContent);
    // 初始为 空数据 状态
    mStatusView.triggerEmpty();

    mToolbar.setNavigationOnClickListener(v -> onBackPressed());
    mToolbar.inflateMenu(R.menu.place_holder_menu);
    mToolbar.setOnMenuItemClickListener(item -> {
        switch (item.getItemId()){
            case R.id.menu_loading:
                // 切换为 加载 状态
                mStatusView.triggerLoading();
                return true;
            case R.id.menu_show_data:
                // 切换为 显示数据 的状态
                mStatusView.triggerOk();
                return true;
            case R.id.menu_error:
                // 切换为 显示错误 的状态
                mStatusView.triggerNetError();
                //mEmptyView.triggerError();
                return true;
            case R.id.menu_null:
                // 切换为错误状态
                mStatusView.triggerEmpty();
                // 需要条件的时候可以使用 mEmptyView.triggerOkOrEmpty(boolean isOk);
                return true;
            default:
                return false;
        }
    });
}

除了第三步的视图绑定，initWidget还做了：

• 将StatusView初始为空数据状态
• 设置Toolbar的菜单栏
• 设置Toolbar菜单的点击事件，四个状态的切换方法可以从中看出

上述代码写完以后，效果就出现了：

效果

关于项目

项目地址：https://github.com/mCyp/Orient-Ui

如果你对时间轴感兴趣，也可以关注该项目或者阅读我的上篇文章：

《花式实现时间轴，样式由你来定！》

致谢

• Qiujuer：StatusView改编自Qiujuer老师的慕课网视频中EmptyView。
• AVLoadingIndicatorView：加载动画的代码来自该库，效果很赞！
• 旅游图标：对于这种彩色风格的图标，爱了爱了~❤️