效果如下图:
一般app的列表数据页都会考虑无数据时的情况,为了提升用户体验,在无数据时,都会给用户展示一个友好的页面,效果如上图;
这里如果用的是ListView,一般都会给ListView设置emptyView,之前一个项目里,设置emptyView的逻辑在我加入项目开发时就已经都写好了,但是实现的代码有点让人无法忍受(特别是有强迫症的人),他是在每个页面的回调里都处理一遍这个显示和隐藏emptyView的操作,不仅让代码量变多了,结构上也很难看,其实可以只要一行代码就搞定这个需求,下面是实现代码,方法很简单,我也是随手记个笔记;
/**
* 无数据时显示的内容
*
* @param flag 0:无网络,1:无数据,2:无搜索结果
*/
public static void showListViewNoContent(Context mContext, ListView mListView, int flag) {
if (null != mListView.getEmptyView()) {
((ViewGroup) mListView.getParent()).removeView(mListView.getEmptyView());
}
View layoutView = getLayoutView(mContext, R.layout.view_noresult);
switch (flag) {
case 0:
layoutView = getLayoutView(mContext, R.layout.view_nonetwork);
break;
case 2:
layoutView = getLayoutView(mContext, R.layout.view_nosearch);
break;
}
layoutView.setVisibility(View.GONE);
((ViewGroup) mListView.getParent()).addView(layoutView);
mListView.setEmptyView(layoutView);
}
view_noresult.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:paddingTop="@dimen/dp_50"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/pic_no_result" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_25"
android:src="@drawable/font_no_content" />
</LinearLayout>
view_nonetwork.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:paddingTop="@dimen/dp_50"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_no_network_image" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_25"
android:src="@drawable/font_no_network_text" />
</LinearLayout>
view_nosearch.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:paddingTop="@dimen/dp_50"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/pic_no_result" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_25"
android:src="@drawable/font_search_no" />
</LinearLayout>
再说下给ListView设置EmptyView需要注意的几个地方,大家都知道ListView用setEmptyView(View v)方法来设置ListView数据为空时显示的布局,但是使用这个方法是有限制的,要求这个空布局必须和ListView处在同一个节点上,否则设置了也是没有效果的,你可以把这个EmptyView直接在xml文件里就和ListView放在同一个节点上,例如:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="@+id/emptyview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="no data"/>
</LinearLayout>
或者通过代码把这个EmptyView先添加到ListView的父布局里面,再设置给ListView,也就是上面主要写到的这种方法,例如没网络时这样处理:
if (!CommonUtils.isNetworkAvailable()) {
CommonUtils.showListViewNoContent(mContext, mXListView, 0);
return;
}
我把showListViewNoContent方法放到CommonUtils工具类里面了,布局里的图片和代码就不贴了,无网络、无数据的布局文件里面的控件可以随便改,每个项目的需求也不一样,上面的主要代码也是完整的,拷贝到项目里就可以使用。