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

前言

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

特色

该状态视图的优势是：

• 样式灵活：各状态下的文本、错误、空数据状态下的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菜单的点击事件，四个状态的切换方法能够从中看出

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

关于项目

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

若是你对时间轴感兴趣，也能够关注该项目或者阅读个人上篇文章：

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

致谢

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