<Android>使用ScrollView 实现 ListView 的下拉刷新

来源:互联网 发布:qq三国js技能分析 编辑:程序博客网 时间:2024/05/22 05:20

转载请标明出处:http://blog.csdn.net/u013015161/article/details/45680037

下拉刷新 在当下的移动应用中随处可见, 这种交互模式已经逐渐被广大终端用户接受和习惯。 最近就尝试用利用ScrollView + ListView, 写了一个下拉刷新的demo。


实现后的效果图



设计思路

所谓下拉刷新, 就是在界面上方隐藏一块区域, 在手势下拉的时候,该区域逐渐显示。在下拉到一定程度时候放手, 开始进行数据刷新(或其他耗时操作),刷新完毕后区域重新隐藏。于是很自然的就想到可以使用ScrollView。

在执行一般的下拉刷新下, 直接使用ScrollView是没有问题的, 但如果实现ListView的下拉刷新, 即在ScrollView里嵌套使用ListView时, 就会出现ListView的布局问题。为了正确显示ListView, 需要先计算出ListView的实际高度, 并设置为布局参数里的高度。每当数据发生变化时, 重新设置一下ListView的高度即可。 

通过以上思路, 实现了ListView的下拉刷新。


代码实现

首先实现了一个自定义的ScrollView, 即PTRScrollVIew。在布局文件中使用该ScrollView方法如下:

<com.lankton.pulltorefresh.PTRScrollView    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/mPTRScrollView"    android:layout_width="match_parent"    android:layout_height="match_parent">    <LinearLayout        android:orientation="vertical"        android:layout_width="match_parent"        android:layout_height="match_parent">
        <!-- 自定义的头部区域 -->        <include            layout="@layout/header"            android:layout_width="match_parent"            android:layout_height="100dp"/>        <!-- 显示数据的ListView -->        <ListView            android:id="@+id/listview"             android:layout_width="match_parent"            android:layout_height="match_parent"/>    </LinearLayout></com.lankton.pulltorefresh.PTRScrollView>
其中头部区域可以修改layout参数, 引用自己的自定义布局。


PTRScrollView主要方法:

1、在PTRScrollVIew中获得头部隐藏区域和ListView

/*初始化界面, 获得头部隐藏区域和ListView*/    public void initView()    {        LinearLayout wrapper = (LinearLayout) this.getChildAt(0);        headView = wrapper.getChildAt(0);        lv = (ListView) wrapper.getChildAt(1);    }

2、获取当前屏幕高度
/*获得屏幕高度, 在ListView内容高度小于该值时, 设置其高度为该值*/    public int getScreenHeight()    {        if(0 == this.screenHeight)        {            WindowManager wm = (WindowManager)context                    .getSystemService(Context.WINDOW_SERVICE);            screenHeight = wm.getDefaultDisplay().getHeight();        }        return this.screenHeight;    }
3、重定义ListView高度

/*重定义ListView高度,由外部调用*/    public void reSize(ListView lv) {          ListAdapter listAdapter = lv.getAdapter();          if (listAdapter == null) {           return;          }          int totalHeight = 0;          for (int i = 0; i < listAdapter.getCount(); i++) {              View listItem = listAdapter.getView(i, null, lv);            listItem.measure(0, 0);            totalHeight += listItem.getMeasuredHeight();          }                  ViewGroup.LayoutParams params = lv.getLayoutParams();                  params.height = totalHeight            + (lv.getDividerHeight() * (listAdapter.getCount() - 1));                  if(params.height < this.getScreenHeight())        {            params.height = this.screenHeight;        }        lv.setLayoutParams(params);         }
4、设置拉动事件监听器

 public void setOnPullListener(OnPullListener opl)    {        this.onPullListener = opl;    }

OnPullListener是PTRScrollView的内部接口:

/*内部接口OnPullListener, 监听拉动事件*/    interface OnPullListener{        /*参数progress为下拉的从程度,<=0表示完全隐藏,100为完全拉下         * action为动作 */        void onPull(int progress, int action);    }

在onPull方法被回调时, 会向其中传入2个参数, 分别为下拉的程度以及下拉的动作(eg:MotionEvent.ACTION_UP)。使用这两个参数,可以判断是否下拉是否到底,以及是否放手。同时可以用来做一些其他操作,如显示动画等。通过progress值, 本样例中随着下拉,会显示出下拉程度。

OnPull方法在触摸事件发生时被回调,同时保证progress参数值不为负。

/*发生触摸时间,调用onPull回调函数*/    @Override    public boolean onTouchEvent(MotionEvent ev) {        // TODO Auto-generated method stub        int scrollY = this.getScrollY();        int progress = (headViewHeight - scrollY) * 100 / headViewHeight;        int action = ev.getAction();        if(MotionEvent.ACTION_UP == action && progress < 100)        {            this.smoothHide();        }        else if(null != this.onPullListener)         {            if(progress >= 0)            {                this.onPullListener.onPull(progress, action);            }        }        return super.onTouchEvent(ev);    }

5、 PTRScrollView还提供了其他一些接口 ,比如快速收起隐藏区域、平缓收起隐藏区域等。


实际使用

1、实际使用中, 要注意在ListVIews设置完Adapter, 以及Adapter中数据发生变化时要及时调整ListView的高度,可以直接调用PTRScrollView提供的reSize方法。如下:

<pre name="code" class="java">/*lv为显示数据的ListView, sv为PTRScrollView*/lv.setAdapter(new ArrayAdapter<Character>(this,        android.R.layout.simple_list_item_1, charList));sv.reSize(lv);
... ...
((ArrayAdapter)lv.getAdapter()).notifyDataSetChanged(); sv.reSize(lv); 

2、使用OnPullListener: 

其中, progress为100, action为MotionEvent.ACTION_UP, 则可视为下拉到底后放开, 可以执行加载操作了。

sv.setOnPullListener(new OnPullListener(){            boolean isFull = false;            boolean isLoading = false;            @Override            public void onPull(int progress, int action) {                // TODO Auto-generated method stub                if(isLoading)                {                    return;                }                if(progress == 100)                {                    if(!isFull)                    {                        head_img.startAnimation(anim_arrow);                    }                    if(MotionEvent.ACTION_UP == action)                    {                            head_img.clearAnimation();                            head_img.setVisibility(View.INVISIBLE);                            head_img2.setVisibility(View.VISIBLE);                            head_img2.startAnimation(anim);                            head_text.setText("loading...");                            isLoading = true;                            new Thread(new Runnable(){                                @Override                                public void run() {                                    // TODO Auto-generated method stub                                    try {                                        Thread.sleep(3000);                                        charList.add((char) ('a' + nextIndex));                                        nextIndex ++;                                        handler.sendEmptyMessage(0);                                        isLoading = false;                                    } catch (InterruptedException e) {                                        // TODO Auto-generated catch block                                        e.printStackTrace();                                    }                                                                    }                                                            }).start();                                                }                     else                    {                                                head_text.setText("release to refresh");                                                                        }                    isFull = true;                }                else                {                    if(isFull)                    {                        head_img.startAnimation(anim_arrow_reverse);                    }                    head_text.setText("pull to refresh (" + progress + "%)");                    isFull = false;                }                                            }                    });



博文中的代码是截取的片段, 更具体的实现可以参考样例工程,欢迎指正。

ScrollView实现ListView下拉刷新demo




0 0
原创粉丝点击