简单大方的状态视图,快了解一下!

2,530 阅读3分钟

前言

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

状态视图

特点

该状态视图的优点是:

  • 样式灵活:各状态下的文本、错误空数据状态下的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,当然,你也可以将RecycelrViewListView甚至布局文件设置为数据视图,然后调用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菜单的点击事件,四个状态的切换方法可以从中看出

上述代码写完以后,效果就出现了:

效果

关于项目

项目地址:github.com/mCyp/Orient…

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

《花式实现时间轴,样式由你来定!》

致谢

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