preface

The state view is a common view, with the purpose of flexibly switching between data, error, load and empty data states. To facilitate daily use, I have encapsulated a simple and generous state view, and the following is the use effect:

The characteristics of

The advantages of this state view are:

  • Flexible style: Text in each state,error,Empty dataA state ofDrawableAnd loading animation colors can be modified at will, and the default style is sufficientConcise and beautiful
  • Flexible state switching
  • Easy to use: Provide default styles

use

Step 1: Add dependencies

In the build.gradle file in the module you want to use add:

implementation 'com. Received: received a Ui: 1.0.1'
Copy the code

Step 2: Add to the layout file XML

Assuming that the parent layout is linear and the data view is TextView, our layout code is:

<?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>
Copy the code

It’s worth mentioning the six properties of StatusView:

The name of the role
app:comEmptyText Empty dataThe text displayed in the state
app:comErrorText errorThe text displayed in the state
app:comLoadingText loadingThe text displayed in the state
app:comLoadingColor Load the color of the animation
app:comEmptyDrawable Empty dataDrawable resource file in state
comErrorDrawable errorDrawable resource file in state

It has a default value even if you don’t set any values. In the layout file above, I only used the first four of the above attributes, so you can set them yourself if you want.

Note: The Android: Visibility of the data view needs to be set to GONE.

Step 3: Get and bind

In this step, we need to get the state view and the data view and bind them:

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

@Override
protected void initWidget(a) {
	super.initWidget();
	// View binding
	mStatusView.bind(mContent);
	
	/ /... Status event switching Settings
}
Copy the code

I use ButterKnife in the code above, and the initWidget method occurs in the Activity’s life cycle onCreate.

The state view is mStatusView and the data view is TextView. Of course, you can change RecycelrView, ListView or even layout file to data view and call StatusView#bind.

Step 4: State switch

In the third step of the code I omitted the setting of the state switch:

protected void initWidget(a) {
	super.initWidget();
	// View binding
	mStatusView.bind(mContent);
	// The initial data state is empty
	mStatusView.triggerEmpty();

	mToolbar.setNavigationOnClickListener(v -> onBackPressed());
	mToolbar.inflateMenu(R.menu.place_holder_menu);
	mToolbar.setOnMenuItemClickListener(item -> {
		switch (item.getItemId()){
			case R.id.menu_loading:
				// Switches to the loading state
				mStatusView.triggerLoading();
				return true;
			case R.id.menu_show_data:
				// Change the state to display data
				mStatusView.triggerOk();
				return true;
			case R.id.menu_error:
			    // Switch to display error state
				mStatusView.triggerNetError();
				//mEmptyView.triggerError();
				return true;
			case R.id.menu_null:
			    // Switch to an error state
				mStatusView.triggerEmpty();
				/ / need conditions can use mEmptyView triggerOkOrEmpty (Boolean isOk);
				return true;
			default:
			    return false; }}); }Copy the code

In addition to the view binding in step 3, initWidget also does:

  • willStatusViewFor the initialEmpty datastate
  • Set up theToolbarThe menu bar
  • Set up theToolbarMenu click events,Four state switching methodsYou can see that

After the above code is written, the effect appears:

About the project

Project address: github.com/mCyp/Orient…

If you’re interested in the timeline, you can also follow this project or read my previous post:

Fancy Implementation timeline, style up to you!

Thank you

  • Qiujuer:StatusViewAdapted from teacher Qiujuer’s MOOC videoEmptyView.
  • AVLoadingIndicatorView: The code to load the animation comes from this library, and the effect is great!
  • Travel ICONS: Love this colorful style icon ~❤️