关闭

Android打造不一样的EmptyView

标签: androidemptyView
9216人阅读 评论(20) 收藏 举报
分类:

大家都对ListView非常熟悉,目测也会经常使用ListView的一个方法setEmptyView,来设置当数据加载中或者数据加载失败的一个提醒的效果,这个方法虽然使用起来简单,但是如果你提供一个复杂的布局,例如:

在数据加载失败后,添加一个Button让用户可以选择重新加载数据。

那么,你可能会这么做,find这个button,然后给button设置点击事件,好吧。。。一个两个的还可以忍受,那多了呢?比如我遇到的这个情况,在测试阶段,老板让加一个刷新的功能,要是按照这种方法,估计现在现在我还在加班(2015/7/27 23:00),那有没有一种更加方便的方式,几行代码就可以搞定?而且不需要写那些烦人的setOnClickListener?能不能提供一个不仅仅局限于ListViewEmptyView,因为我不仅仅在ListView上使用。

答案是肯定的,这篇博客,我们就去实现一个这样的组件,在实现之间,我们来看看ListView和他的EmptyView是怎么一个关系,首先定位到ListView.setEmptyView方法:

   @android.view.RemotableViewMethod
    public void setEmptyView(View emptyView) {
        mEmptyView = emptyView;

        // If not explicitly specified this view is important for accessibility.
        if (emptyView != null
                && emptyView.getImportantForAccessibility() == IMPORTANT_FOR_ACCESSIBILITY_AUTO) {
            emptyView.setImportantForAccessibility(IMPORTANT_FOR_ACCESSIBILITY_YES);
        }

        final T adapter = getAdapter();
        final boolean empty = ((adapter == null) || adapter.isEmpty());
        updateEmptyStatus(empty);
    }

继续跟进代码updateEmptyStatus

private void updateEmptyStatus(boolean empty) {
    if (isInFilterMode()) {
        empty = false;
    }

    if (empty) {
        if (mEmptyView != null) {
            mEmptyView.setVisibility(View.VISIBLE);
            setVisibility(View.GONE);
        } else {
            // If the caller just removed our empty view, make sure the list view is visible
            setVisibility(View.VISIBLE);
        }

        // We are now GONE, so pending layouts will not be dispatched.
        // Force one here to make sure that the state of the list matches
        // the state of the adapter.
        if (mDataChanged) {
            this.onLayout(false, mLeft, mTop, mRight, mBottom);
        }
    } else {
        if (mEmptyView != null) mEmptyView.setVisibility(View.GONE);
        setVisibility(View.VISIBLE);
    }
}

唉,原来也没啥,看代码31~37行,就是根据数据是否为空,来控制显示mEmptyView和ListView本身。
既然原理简单,那么我们完全可以自己实现一个。但是,我们的原理正好和ListView的这个相反:

ListView是通过绑定一个emptyView实现的
而我们,是通过EmptyView绑定ListView(其他view也ok)实现的。
我们的EmptyView提供一个通用的方式,加载中时提醒加载中,加载失败提醒加载失败,并提供一个Button供用户刷新使用。

分析完了,接下来就是编码了,首先我们继承一个RelativeLayout来实现这么一个布局:

public class EmptyView extends RelativeLayout {

    private String mText;
    private String mLoadingText;

    private TextView mTextView;
    private Button mButton;
  private View mBindView;
...
}

简单说一下4个变量的作用。
mText表示数据为空时提醒的文本。
mLoadingText表示加载中提醒的文本。
mTextView显示提醒文本。
mButton提供给用户刷新的按钮。
mBindView我们要绑定的view。

ok,继续代码:

public class EmptyView extends RelativeLayout {
    ...
    public EmptyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.EmptyView, 0, 0);
        String text = ta.getString(R.styleable.EmptyView_android_text);
        String buttonText = ta.getString(R.styleable.EmptyView_buttonText);
        mLoadingText = ta.getString(R.styleable.EmptyView_loadingText);
        ta.recycle();

        init(text, buttonText);
    }
...
}

为了灵活性,这些文本内容我们定义成可以在xml中配置使用,哎?怎么还有一个buttonText,这个当然是按钮上的文字了。
继续代码,可以看到调用了init方法。
来看看:

public class EmptyView extends RelativeLayout {
    ...
    private void init(String text, String buttonText) {
        if(TextUtils.isEmpty(text)) text = "暂无数据";
        if(TextUtils.isEmpty(buttonText)) buttonText = "重试";
        if(TextUtils.isEmpty(mLoadingText)) mLoadingText = "加载中...";
        mText = text;

        mTextView = new TextView(getContext());
        mTextView.setText(text);
        LayoutParams textViewParams = new LayoutParams(
                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        textViewParams.addRule(RelativeLayout.CENTER_IN_PARENT);
        mTextView.setId(R.id.id_empty_text);
        addView(mTextView, textViewParams);

        mButton = new Button(getContext());
        mButton.setText(buttonText);
        LayoutParams buttonParams = new LayoutParams(
                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        buttonParams.addRule(RelativeLayout.CENTER_HORIZONTAL);
        buttonParams.addRule(RelativeLayout.BELOW, R.id.id_empty_text);
        addView(mButton, buttonParams);
    }
    ...
}

init方法中,上来,我们去判断这些文本是否为空,如果为空,提供默认的文本。接下来new了一个TextViewButton并添加到该控件中,TextViewButton是上下排列的。至此,布局已经完成了,那怎么控制呢?我们想要的是什么效果呢?

在数据加载的时候调用loading方法,显示正在加载中的文本。
在数据加载成,隐藏该view。
在数据加载失败,显示加载失败的文本,并提供一个按钮去刷新数据。

ok,我们按照这个条目一个个的来实现,首先是loading

public class EmptyView extends RelativeLayout {
    ...
    public void loading() {
    if(mBindView != null) mBindView.setVisibility(View.GONE);
        setVisibility(View.VISIBLE);
        mButton.setVisibility(View.INVISIBLE);
        mTextView.setText(mLoadingText);
    }
    ...
}

loading方法很简单,首先判断mBindView是否为空,不为空则隐藏它,然后让该控件可见,继续让Button不可见,因为在加载中的时候,我们不允许点击的发生。最后就是让TextView显示正在加载中的文本。
继续看看加载成功的方法,这个更简单啦。

public class EmptyView extends RelativeLayout {
    ...
    public void success() {
        setVisibility(View.GONE);
    if(mBindView != null) mBindView.setVisibility(View.VISIBLE);
    }
    ...
}

只有两行代码,就是让该控件隐藏,让绑定的view显示。
那么加载失败呢?同样简单!

public class EmptyView extends RelativeLayout {
    ...
    public void empty() {
    if(mBindView != null) mBindView.setVisibility(View.GONE);
        setVisibility(View.VISIBLE);
        mButton.setVisibility(View.VISIBLE);
        mTextView.setText(mText);
    }
    ...
}

不多说了,唯一注意的就是我们让Button显示了。
至此,我们整个效果就完成了,在加载数据的时候调用loading方法来显示加载中的文本,加载失败后,调用empty来显示加载失败的文本和刷新的按钮,在加载成功后直接隐藏控件!
控件倒是完成了,我们还不知道mBindView怎么来的,其实也很简单。我们在代码中需要调用bindView(View view)方法来指定。

public class EmptyView extends RelativeLayout {
    ...
    public void bindView(View view) {
        mBindView = view;
    }
    ...
}

哈哈,剩下最后一个问题了,按钮的点击事件怎么做?难道要在使用的时候添加onClick事件?哎,那样太麻烦了,要知道,我有很多文件要改的,我希望一行代码就可以搞定!

亮点来了:

public class EmptyView extends RelativeLayout {
    ...
    public void buttonClick(final Object base, final String method,
            final Object... parameters) {
        mButton.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                int length = parameters.length;
                Class<?>[] paramsTypes = new Class<?>[length];
                for (int i = 0; i < length; i++) {
                    paramsTypes[i] = parameters[i].getClass();
                }
                try {
                    Method m = base.getClass().getDeclaredMethod(method, paramsTypes);
                    m.setAccessible(true);
                    m.invoke(base, parameters);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        });
    }
    ...
}

利用反射去做,我们只需要指定调用哪个对象上的哪个方法,需要参数的话就传入参数即可。
这段代码简单说一下,首先我们给button设置了一个点击事件,在事件响应的时候,首先遍历参数,获取参数的类型。然后根据方法名反射出方法,最后直接invoke去执行。这样我们使用起来就非常方便了,完成了我们一行代码搞定的目标。
好激动,来测试一下吧:
先看xml布局。

<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=".MainActivity">

    <loader.org.emptyview.EmptyView
        android:id="@+id/empty_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <TextView
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</RelativeLayout>

我们没有使用ListView,而是使用了一个TextView,再来看看在Activity中怎么调用:

public class MainActivity extends AppCompatActivity {

    private EmptyView mEmptyView;
    private TextView mTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mEmptyView = (EmptyView) findViewById(R.id.empty_view);
        mTextView = (TextView) findViewById(R.id.name);

        mEmptyView.bindView(mTextView); // 设置bindView
        mEmptyView.buttonClick(this, "loadData"); // 当button点击时调用哪个方法
        loadData();
    }

    /**
     * 加载数据
     */
    private void loadData() {
        mEmptyView.loading(); // 加载中
        // 2s后出结果
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                Random r = new Random();
                int res = r.nextInt(2);
                // 失败
                if(res == 0) {
                    mEmptyView.empty(); // 显示失败
                }else {
                    // 成功
                    mEmptyView.success();
                    mTextView.setText("success");
                }
            }
        }, 2000);
    }
}

首先,我们通过mEmptyView.bindView(mTextView)来设置要绑定的view,这里当然是TextView了。
接下来,通过mEmptyView.buttonClick(this, "loadData")设置按钮点击后执行哪个方法,这里是当前对象上的loadData方法,并且没有参数。
getData中模拟延迟2s后获取数据,数据的成功失败是随机的,当失败了,调用empty方法,成功后调用success方法。
哈哈,就是这么简单,来看看代码的效果:


ok~ok~,非常完美。

代码下载,戳这里

15
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

[Android] 快速实现一个通用EmptyView

好的APP应当具备良好的交互, 最好能贴心的满足用户的需求. 而人性化的提醒就是其中之一. 某些APP中经常会看到这样的场景, 当加载内容失败, 或者获取内容失败时, 界面会变成一个可与用后交互的场景. 允许用户点击屏幕或者界面中某个按钮, 尝试重新获取内容或者检测网络连接等等.  And...
  • stzy00
  • stzy00
  • 2015-08-18 22:14
  • 1430

ListView之EmptyView

关键字: ListView EmptyView setEmptyView 最新开发一个应用程序,需要用到当ListView为空时设置一些View来显示提示内容。我们已经知道ListView有一个公开的方法:setEmptyView(View v) 可是这个...
  • xiangqiao123
  • xiangqiao123
  • 2014-01-08 10:20
  • 10145

实战EmptyView,为ListView的加载缓冲

前言在我们的大多数应用中,会用到ListView,而ListView的数据,有时候是来自网络或者耗时操作之后得到的,这时候,有必要在数据显示之前提供一个友好的提示,结合上一篇文章的Android实战页面内容加载动画成果,再结合ListView自身的属性,我们来实现一下这种效果。首先见效果图 Lis...
  • sbsujjbcy
  • sbsujjbcy
  • 2015-06-20 17:01
  • 3896

Android通用的EmptyLayout-展示不用状态的界面

转载请标明出处: http://www.weyye.me/detail/empty-layout/ 本文出自:【Wey Ye的博客】前言在做项目的时候,经常会遇到列表数据为空的时候展示的空布局,如果你用的是ListView ,目测会经常使用ListView的一个方法setEmptyView ,如果...
  • yewei02538
  • yewei02538
  • 2016-08-31 16:45
  • 2051

RecyclerView添加EmptyView

最近在用RecyclerView的时候,竟然发现它不可以像以前使用listView或者gridView时,当列表为空时,显示一个特殊的empty view来提示用户。没关系,o(^▽^)o,我们可以自己来实现这个功能。
  • whitley_gong
  • whitley_gong
  • 2016-05-02 14:46
  • 14116

关于AdapterView中EmptyView的使用,记录而已

当我们使用ListView或者GridView的时候,当网络没有连接或者网络状况不好超时出错,或者后台数据为空时,经常会出现没有数据的情况。此时如果空荡荡的一个页面,会显得不是很友好。所以,我们需要有个友好提示给用户,咳咳,此时就应该EmptyView出场了!! 废话不多说,还是先看效果,我们这个...
  • Moy01
  • Moy01
  • 2015-08-25 10:20
  • 571

Android ListView setEmptyView

http://my.eoe.cn/yaming/archive/879.html 1 当我们使用ListView或GridView的时候,当列表为空的时候,我们需要一个特殊的View来提示用户操作,于是就有了setEmptyView().下面...
  • Hknock
  • Hknock
  • 2014-01-09 18:08
  • 20490

ListView与GridView中SetEmptyView方法的使用,及触发条件

我们在使用ListView与GridView组件的时候通常为给用户一个友好的界面提示。在没有数据的时候我们可以给用户一个提示。我们这时候就用到了setEmptyView这个方法, 这个方法。 使用的方式: 1.我们提示的view与LIstView是同一个xml文件,我们就可以在java文件中直...
  • s932974516
  • s932974516
  • 2016-01-10 15:00
  • 1213

关于AdapterView中EmptyView的使用,记录而已

当我们使用ListView或者GridView的时候,当网络没有连接或者网络状况不好超时出错,或者后台数据为空时,经常会出现没有数据的情况。此时如果空荡荡的一个页面,会显得不是很友好。所以,我们需要有个友好提示给用户,咳咳,此时就应该EmptyView出场了!! 废话不多说,还是先看效果,我们这个...
  • Moy01
  • Moy01
  • 2015-08-25 10:20
  • 571

Android开发:ListView添加EmptyView的帮助类

在项目开发过程中,会碰到许许多多的ListView,古老的方法就是每碰到一个ListView,就在xml文件里面写上emptyView,然后添加emptyView,其实在很多时候,不同ListView的emptyView是一样的,对此,写一个简单的帮助类,在ListView需要增加emptyView...
  • weidongjian
  • weidongjian
  • 2015-03-04 11:51
  • 1235
    个人资料
    • 访问:648153次
    • 积分:6909
    • 等级:
    • 排名:第3919名
    • 原创:80篇
    • 转载:0篇
    • 译文:2篇
    • 评论:625条
    文章分类
    博客专栏
    友情链接

    鸿洋_

    Aggie的博客

    梁肖技术中心

    极客导航

    最新评论