簡單大方的狀態視圖，快了解一下！

前言

狀態視圖是你們平時都會使用的視圖，目的是爲了靈活地切換數據、錯誤、加載和空數據這幾種狀態，爲方便平日使用，我就封裝了一款簡潔大方的狀態視圖，如下就是使用效果：

特色

該狀態視圖的優勢是：

• 樣式靈活：各狀態下的文本、錯誤、空數據狀態下的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：加載動畫的代碼來自該庫，效果很贊！
• 旅遊圖標：對於這種彩色風格的圖標，愛了愛了~❤️