开发者社区> tangyangkai> 正文

SwipeRefreshLayout的下拉刷新与上拉加载

简介: SwipeRefreshLayout–Google官方提出的下拉刷新控件,广泛应用在各种APP中。一直想弄一个既能支持下拉刷新,又能够上拉加载,同时还能实现类似于QQ的滑动删除效果。
+关注继续查看

SwipeRefreshLayout–Google官方提出的下拉刷新控件,广泛应用在各种APP中。一直想弄一个既能支持下拉刷新,又能够上拉加载,同时还能实现类似于QQ的滑动删除效果。上网找了很多资料,最后达到了下面的效果:
这里写图片描述

参考资料:
SwipeRefreshLayout的上拉加载与下拉刷新:

http://blog.csdn.net/u012036813/article/details/38959507

Listview的滑动删除:

http://blog.csdn.net/lmj623565791/article/details/22961279

Android事件传递机制:

http://blog.csdn.net/yanzi1225627/article/details/22592831

接下来看看具体实现过程。

1.界面布局:

 <com.example.swiperefreshlayoutdemo.RefreshLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/swipe_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <com.example.swiperefreshlayoutdemo.QQListView
            android:id="@+id/list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
        </com.example.swiperefreshlayoutdemo.QQListView>
    </com.example.swiperefreshlayoutdemo.RefreshLayout>

因为要实现上拉加载以及滑动删除,所以用的都是自定义的RefreshLayout以及Listview。
2.代码实现:

SwipeRefreshLayout的上拉加载实现有两种方法,一种是实现滑动监听,当滑动到底部时实现加载更多功能;一种是通过事件传递机制监听上拉动作,然后实现加载更多功能。先看第一种加载原理:

自定义的SwipeRefreshLayout:

//继承自SwipeRefreshLayout,从而实现滑动到底部时上拉加载更多的功能.

public class RefreshLayout extends SwipeRefreshLayout implements    OnScrollListener {

    // listview实例
    private ListView mListView;
    // 上拉接口监听器, 到了最底部的上拉加载操作
    private OnLoadListener mOnLoadListener;
    // ListView的加载中footer
    private View mListViewFooter;
    // 是否在加载中 ( 上拉加载更多 )
    private boolean isLoading = false;

    public RefreshLayout(Context context) {
        this(context, null);
    }

    public RefreshLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        //一个圆形进度条
        mListViewFooter = LayoutInflater.from(context).inflate(
                R.layout.listview_footer, null, false);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right,
            int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        // 初始化ListView对象
        if (mListView == null) {
            getListView();
        }
    }

    // 获取ListView对象
    private void getListView() {
        int childs = getChildCount();
        if (childs > 0) {
            View childView = getChildAt(0);
            if (childView instanceof ListView) {
                mListView = (ListView) childView;
                // 设置滚动监听器给ListView
                mListView.setOnScrollListener(this);
            }
        }
    }



    // 设置加载状态,添加或者移除加载更多圆形进度条
    public void setLoading(boolean loading) {
        isLoading = loading;
        if (isLoading) {
            mListView.addFooterView(mListViewFooter);
        } else {
            mListView.removeFooterView(mListViewFooter);

        }
    }

    //设置监听器
    public void setOnLoadListener(OnLoadListener loadListener) {
        mOnLoadListener = loadListener;
    }

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {

    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem,
            int visibleItemCount, int totalItemCount) {

        // 判断是否到了最底部,并且不是在加载数据的状态
        if (mListView.getLastVisiblePosition() == mListView.getAdapter()
                .getCount() - 1 && isLoading == false) {
            // 首先设置加载状态
            setLoading(true);
            // 调用加载数据的方法
            mOnLoadListener.onLoad();

        }

    }

    // 加载更多的接口
    public interface OnLoadListener {
        public void onLoad();
    }
}

注释写的很清楚,实现滑动监听,然后初始化listview,写好加载任务接口与方法。在滑动监听方法里面,有几个参数注意一下:
firstVisibleItem 表示在当前屏幕显示的第一个listItem在整个listView里面的位置(下标从0开始)
visibleItemCount表示在现时屏幕可以见到的ListItem(部分显示的ListItem也算)总数
totalItemCount表示ListView的ListItem总数
listView.getLastVisiblePosition()表示在现时屏幕最后一个ListItem (最后ListItem要完全显示出来才算)在整个ListView的位置(下标从0开始)
刚开始只判断是否滑动到了最底部,没有对加载状态进行判断,导致程序运行崩溃,在最底部加载数据时会一直加载。后来加上判断,默认不加载数据,isLoading==false,滑动到最底部加载数据时,设置为true,当加载完成以后,设置为false,加载完毕。

接下来是第二种加载原理:

public class RefreshLayout extends SwipeRefreshLayout {

    // listview实例
    private ListView mListView;
    // 上拉接口监听器, 到了最底部的上拉加载操作
    private OnLoadListener mOnLoadListener;
    // ListView的加载中footer
    private View mListViewFooter;
    // 是否在加载中 ( 上拉加载更多 )
    private boolean isLoading = false;

    // 按下时的y坐标
    private int mYDown;
    // 抬起时的y坐标
    private int mLastY;
    // 滑动到最下面时的上拉操作
    private int mTouchSlop;

    public RefreshLayout(Context context) {
        this(context, null);
    }

    public RefreshLayout(Context context, AttributeSet attrs) {
        super(context, attrs);

        mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
        mListViewFooter = LayoutInflater.from(context).inflate(
                R.layout.listview_footer, null, false);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right,
            int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        // 初始化ListView对象
        if (mListView == null) {
            getListView();
        }
    }

    // 获取ListView对象
    private void getListView() {
        int childs = getChildCount();
        if (childs > 0) {
            View childView = getChildAt(0);
            if (childView instanceof ListView) {
                mListView = (ListView) childView;
            }
        }
    }

    public boolean dispatchTouchEvent(MotionEvent event) {
        final int action = event.getAction();

        switch (action) {
        case MotionEvent.ACTION_DOWN:
            // 按下
            mYDown = (int) event.getRawY();
            break;

        case MotionEvent.ACTION_MOVE:
            // 移动
            mLastY = (int) event.getRawY();
            break;

        case MotionEvent.ACTION_UP:
            // 抬起
            if ((mYDown - mLastY) >= mTouchSlop && isLoading == false) {
                // 设置状态
                setLoading(true);
                //
                mOnLoadListener.onLoad();
            }
            break;
        default:
            break;
        }

        return super.dispatchTouchEvent(event);
    }

    // 设置加载状态
    public void setLoading(boolean loading) {
        isLoading = loading;
        if (isLoading) {
            mListView.addFooterView(mListViewFooter);
        } else {
            mListView.removeFooterView(mListViewFooter);

        }
    }

    // 设置监听器
    public void setOnLoadListener(OnLoadListener loadListener) {
        mOnLoadListener = loadListener;
    }

    // 加载更多的接口
    public interface OnLoadListener {
        public void onLoad();
    }
}

初始化数据都一样,不同的是记录了两个Y坐标,一个按下,一个抬起,用来判断滑动到底部时的上拉动作。getScaledTouchSlop是一个距离,表示滑动的时候,手的移动要大于这个距离才开始移动控件。如果小于这个距离就不触发移动控件,如viewpager就是用这个距离来判断用户是否翻页。
然后就是通过事件传递机制,拿到view的三个动作:
MotionEvent.ACTION_DOWN 按下View,是所有事件的开始
MotionEvent.ACTION_MOVE 滑动事件
MotionEvent.ACTION_UP 与down对应,表示抬起
当滑动的距离大于或者等于要求距离并且加载状态为false时,开始设置状态,加载数据,原理和上面一样。

接下里就是MainActivity的相关代码:

public class MainActivity extends Activity implements OnRefreshListener,
        OnLoadListener {

    private RefreshLayout swipeLayout;
    private QQListView listView;
    private MyAdapter adapter;
    private List<Integer> list = new ArrayList<Integer>();
    private int y = 11;

    @Override
    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        setData();
        setListener();
    }

    private void initView() {
        swipeLayout = (RefreshLayout) findViewById(R.id.swipe_container);
        swipeLayout.setOnRefreshListener(this);
        swipeLayout.setColorScheme(android.R.color.holo_blue_bright,
                android.R.color.holo_green_light,
                android.R.color.holo_orange_light,
                android.R.color.holo_red_light);

    }

    private void setData() {
        list = new ArrayList<>();
        for (int i = 3; i < 12; i++) {
            list.add(i);
        }

        listView = (QQListView) findViewById(R.id.list);
        adapter = new MyAdapter(this, list);
        listView.setAdapter(adapter);

        listView.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> arg0, View arg1,
                    int position, long arg3) {

                Toast.makeText(getApplicationContext(),
                        "这是第" + String.valueOf(position + 1) + "项",
                        Toast.LENGTH_SHORT).show();

            }
        });

        listView.setDelButtonClickListener(new DelButtonClickListener() {

            @Override
            public void clickHappend(int position) {
                list.remove(position);
                refresh();
            }
        });

    }

    private void setListener() {
        swipeLayout.setOnRefreshListener(this);
        swipeLayout.setOnLoadListener(this);
    }

    @Override
    public void onRefresh() {
        swipeLayout.postDelayed(new Runnable() {

            @Override
            public void run() {
                // 更新数据
                list.clear();
                y = 12;
                for (int i = 0; i < 13; i++) {
                    list.add(i);
                }
                refresh();

                // 更新完后调用该方法结束刷新
                swipeLayout.setRefreshing(false);
            }
        }, 1000);

    }

    @Override
    public void onLoad() {
        swipeLayout.postDelayed(new Runnable() {

            @Override
            public void run() {
                // 更新数据
                y++;
                list.add(y);
                refresh();
                // 更新完后调用该方法结束刷新
                swipeLayout.setLoading(false);
            }
        }, 1000);

    }

    private void refresh() {
        adapter.setList(list);
        adapter.notifyDataSetChanged();
    }

}

实现自带的下拉刷新接口方法以及我们自己定义的上拉加载方法,然后在各自的方法里进行业务操作,我这里模拟的是简单数字刷新。到这里,SwipeRefreshLayout的下拉刷新与上拉加载已经完成。最后就是SwipeRefreshLayout的滑动删除。

这里的滑动删除参考的是鸿洋的这篇博客,代码注释,讲解都很详细:

http://blog.csdn.net/lmj623565791/article/details/22961279

滑动删除item原理就是通过回调拿到item的position,然后执行删除操作,更新适配器即可。难点就是解决上拉加载与下拉刷新操作与listview侧滑删除操作冲突的问题

@Override
    public boolean dispatchTouchEvent(MotionEvent ev) {

        //获得动作类型
        int action = ev.getAction();
        int x = (int) ev.getX();
        int y = (int) ev.getY();
        switch (action) {

        case MotionEvent.ACTION_DOWN:
            xDown = x;
            yDown = y;
            /**
             * 如果当前popupWindow显示,则直接隐藏,然后屏蔽ListView的touch事件的下传
             */
            if (mPopupWindow.isShowing()) {
                dismissPopWindow();
                return false;
            }
            // 获得当前手指按下时的item的位置
            mCurrentViewPos = pointToPosition(xDown, yDown);
            View view = getChildAt(mCurrentViewPos - getFirstVisiblePosition());
            mCurrentView = view;
            break;
        case MotionEvent.ACTION_MOVE:
            xMove = x;
            yMove = y;
            int dx = xMove - xDown;
            int dy = yMove - yDown;
            /**
             * 判断是否是从右到左的滑动
             */
            if (xMove < xDown && Math.abs(dx) > touchSlop
                    && Math.abs(dy) < touchSlop) {
                // Log.e(TAG, "touchslop = " + touchSlop + " , dx = " + dx +
                // " , dy = " + dy);
                isSliding = true;
            }
            break;
        }
        return super.dispatchTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        /**
         * 如果是从右到左的滑动才相应 
         */
        if (isSliding) {
            switch (action) {
            case MotionEvent.ACTION_MOVE:

                int[] location = new int[2];
                // 获得当前item的位置x与y 
                mCurrentView.getLocationOnScreen(location);
                // 设置popupWindow的动画  
                mPopupWindow
                        .setAnimationStyle(R.style.popwindow_delete_btn_anim_style);
                mPopupWindow.update();
                mPopupWindow.showAtLocation(mCurrentView, Gravity.LEFT
                        | Gravity.TOP, location[0] + mCurrentView.getWidth(),
                        location[1] + mCurrentView.getHeight() / 2
                                - mPopupWindowHeight / 2);
                // 设置删除按钮的回调  
                mDelBtn.setOnClickListener(new OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        if (mListener != null) {
                            mListener.clickHappend(mCurrentViewPos);
                            mPopupWindow.dismiss();
                        }
                    }
                });
                // Log.e(TAG, "mPopupWindow.getHeight()=" + mPopupWindowHeight);

                break;
            case MotionEvent.ACTION_UP:
                isSliding = false;

            }
            //  相应滑动期间屏幕itemClick事件,避免发生冲突
            return true;
        }

        return super.onTouchEvent(ev);
    }

事件分发机制原理:在dispatchTouchEvent进行事件分发的时候,如果PopupWindow正在显示,则屏蔽ListView的滚动以及Item的点击,并让PopupWindow隐藏;如果PopupWindow没有显示,才会进行事件的分发。并且在onTouchEvent中返回true,表示消费当前滑动事件。

最后截图的时候比较卡,效果还是不错的。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
语音评测技术在古文背诵中的应用
语音评测技术和语音识别任务非常类似,近些年都获得了快速发展,语音识别中各种端到端算法不仅简化了训练流程,同时降低了整体错误率。评测技术也从原来的 HMM-GMM 升级到 HMM-DNN,准确率大幅提升。
10 0
源码分享-一个帮助flutter开发者快速上手的app
源码分享-一个帮助flutter开发者快速上手的app
12 0
jQuery 已“死”?为清除技术债,我们删掉了前端所有 jQuery 依赖
近期,英国公共部门信息网站 GOV.UK 前端开发主管 Matt Hobbs 宣布该公司删除了 jQuery 作为所有前端应用程序的依赖项,这意味着“在所有 13 个 FE 应用程序中,JS 大小减少了 32 KB(31% ~49% 之间)”。
7 0
【JAVA】【Hutool】介绍与安装
【JAVA】【Hutool】介绍与安装
6 0
django 源码解析 -1 启动流程分析
Django是一款经典的Python Web开发框架,也是最受欢迎的Python开源项目之一。不同于Flask框架,Django是高度集成的,可以帮助开发者快速搭建一个Web项目。 从本周开始,我们一起进入Djaong项目的源码解析,加深对django的理解,熟练掌握python web开发。
11 0
Java8 获取参数名及Idea/Eclipse/Maven配置(转载)
在Java8之前,代码编译为class文件后,方法参数的类型固定,但是方法名称会丢失,方法名称会变成arg0、arg1....。而现在,在Java8开始可以在class文件中保留参数名,这就给反射带来了极大的遍历。像mybatis等需要使用反射机制获取方法参数的时候就可以不用像以前一样需要使用类似于@Para之类的注解。
6 0
1. Spring 简介 + Hello World
Spring 框架简介 在 Java 近20年的历史中,它经历过很好的时代,也经历过饱受诟病的时代。尽管有很多粗糙的地方,如 applet、企业级JavaBean(Enterprise JavaBean,EJB)、Java 数据对象(Java Data Object,JDO)以及无数的日志框架,但是作为一个平台,Java的历史是丰富多彩的,有很多的企业级软件都是基于这个平台构建的。Spring是Java历史中很重要的组成部分。
9 0
Win 上码农软件推荐
有便携和安装两种区分,能选择便携包尽量选择它。安装包类型是便携类软件的补充, 可以按需挑选。如果该软件能做到跨平台, 我会优先推荐.
7 0
别人都不愿意告诉你的Chrome插件,你用过了几个?
在这些年的编码生涯中,用过不少的浏览器。从IE8开始,到如今各色各样的浏览器,让人眼花缭乱;在这么多浏览器中,我最喜欢的是Chrome,其次是Firefox,最后是Safari;用Chrome的童鞋如果没有vpn 的话,可能体验不是太好。
8 0
使用外部包(package)
使用外部包(package)
4 0
+关注
tangyangkai
多实践,多思考,多请教
40
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载