实战EmptyView,为ListView的加载缓冲

前言

在我们的大多数应用中,会用到ListView,而ListView的数据,有时候是来自网络或者耗时操作之后得到的,这时候,有必要在数据显示之前提供一个友好的提示,结合上一篇文章的Android实战页面内容加载动画成果,再结合ListView自身的属性,我们来实现一下这种效果。首先见效果图
实战EmptyView,为ListView的加载缓冲_第1张图片

ListView的实现

ListView自身带有一个setEmptyView(View view);方法,用于显示没有数据时的视图,当然其本意或许是加载完成后如果数据为0显示的视图,其实我们也可以将它用来当做加载过程中显示的图。
在使用这个方法之前,我们需要在布局文件中,在ListView的同级加入这个View。我们使用上一篇文章的58同城加载的View来实现。如下

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context="cn.edu.zafu.emptyview.ListViewSampleActivity">

    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></ListView>

    <cn.edu.zafu.emptyview.view.LoadingView
        android:id="@+id/loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="invisible"
        >
    </cn.edu.zafu.emptyview.view.LoadingView>
</RelativeLayout>

之后再代码中通过setEmptyView方法设置该View即可

ListView mListView = (ListView) findViewById(R.id.listview);
LoadingView mLoadingView = (LoadingView) findViewById(R.id.loading);
mListView.setEmptyView(mLoadingView);

其余的操作系统会帮你完成,如在没数据前一直显示该加载的View,加载完成后如果有数据该View会被隐藏。

GridView的实现

GridView的实现同ListView,下面贴关键代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"

                tools:context="cn.edu.zafu.emptyview.GridViewSampleActivity">

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="3"

        ></GridView>

    <cn.edu.zafu.emptyview.view.LoadingView
        android:id="@+id/loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="invisible"
        >
    </cn.edu.zafu.emptyview.view.LoadingView>

</RelativeLayout>
GridView mGridView = (GridView) findViewById(R.id.gridview);
LoadingView mLoadingView = (LoadingView) findViewById(R.id.loading);
mGridView.setEmptyView(mLoadingView);

RecyclerView的实现

相比ListView和GridView来说,RecyclerView的实现相对来说比较复杂一点,主要是RecyclerView并没有提供setEmptyView方法,但其实也不难,只要我们继承RecyclerView来提供这样一个方法,达到这种效果即可,首先我们新建一个类继承RecyclerView

package cn.edu.zafu.emptyview.view;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.view.View;

/** * Created by lizhangqu on 2015/6/20. */
public class EmptyRecyclerView extends RecyclerView {

    private View mEmptyView;

    public void setEmptyView(View emptyView) {
        mEmptyView = emptyView;
    }
    public EmptyRecyclerView(Context context) {
        super(context);
    }

    public EmptyRecyclerView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public EmptyRecyclerView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }


}

内部要持有一个emptyView的对象,并提供setEmptyView()方法,达到ListView一样的调用方法,然而这还不够,因为我们不知道数据何时发生变换,因此我们需要一个观察者,当数据改变时通知我们的观察者,在观察者中实现相应的逻辑对EmptyView和RecyclerView自身进行隐藏和显示,那么我们来实现这个观察者

   private AdapterDataObserver emptyObserver = new AdapterDataObserver() {
        @Override
        public void onChanged() {
        //数据改变时回调
            Adapter<?> adapter = getAdapter();
            if (adapter != null && mEmptyView != null) {
                //如果没数据
                if (adapter.getItemCount() == 0) {
                    //显示mEmptyView,隐藏自身
                    mEmptyView.setVisibility(View.VISIBLE);
                    EmptyRecyclerView.this.setVisibility(View.GONE);
                } else {
                    //显示自身,隐藏mEmptyView
                    mEmptyView.setVisibility(View.GONE);
                    EmptyRecyclerView.this.setVisibility(View.VISIBLE);
                }
            }
        }
    };

那么什么时候进行观察者的注册呢,最佳时机就是setAdapter方法,那么我们重写该方法

   @Override
    public void setAdapter(Adapter adapter) {
        super.setAdapter(adapter);
        if (adapter != null) {
            adapter.registerAdapterDataObserver(emptyObserver);
        }
        emptyObserver.onChanged();
        //一定要调用一下,通知观察者显示空View
    }

这样一来也引来了一个问题,我们再观察者里判断emptyview是否为null。于是导致了在设置适配器之前,必须先设置EmptyView,这个在调用的时候注意一下就好了,调用代码如下

mLoadingView = (LoadingView) findViewById(R.id.loading);
        mRecyclerView = (EmptyRecyclerView) findViewById(R.id.recyclerView);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext()));
        //必须在调用设置适配器前调用setEmptyView
        mRecyclerView.setEmptyView(mLoadingView);
        mRecyclerView.setAdapter(new RecyclerViewAdapter(getApplicationContext(), mList));

一个EmptyView的帮助类

在项目开发过程中,会碰到许许多多的ListView,古老的方法就是每碰到一个ListView,就在xml文件里面写上emptyView,然后添加emptyView,其实在很多时候,不同ListView的emptyView是一样的,对此,写一个简单的帮助类,在ListView需要增加emptyView的时候,只要添加一行代码就可以实现了

public class EmptyViewHelper {
    private ListView mListView;
    private View mEmptyView;
    private Context mContext;

    public EmptyViewHelper(ListView listView) {
        mListView = listView;
        mContext = listView.getContext();
        initEmptyView();
    }

    public EmptyViewHelper(ListView listView, int emptyViewRes) {
        mListView = listView;
        mContext = listView.getContext();
        initEmptyView(emptyViewRes);
    }

    private void initEmptyView(int emptyViewRes) {
        mEmptyView = View.inflate(mContext, emptyViewRes, null);
        ((ViewGroup)mListView.getParent()).addView(mEmptyView);
        mListView.setEmptyView(mEmptyView);
    }
}

这个帮助类,获取当前的Listview,然后inflate提前写好的emptyView,然后设置emptyView,然后,当一个listview需要添加emptyView的时候,只要如下一行代码就可以了

EmptyViewHelper emptyViewHelper = new EmptyViewHelper(mListview, R.layout.empty_view);

实现方法还是很简单的,这样做有以下好处

  • 预前写好emptyView,每次碰到需要设置emptyView,只要一行代码就可以实现
  • 当emptyView需要更改的时候,只要更改了emptyView,所有listview中绑定的emptyView也就随着更改了

源码下载

http://download.csdn.net/detail/sbsujjbcy/8824855

你可能感兴趣的:(ListView,GridView,loading,EmptyView,rv)