Android ListView 下拉刷新,上拉加载更多,带动画 自定义控件

原创 2016年08月29日 16:37:11

之前每次 项目中用到ListView 的 下拉刷新 以及上拉分页加载 都是 用的 网上 下载 的 类库,

使用起来 诸多不便 ,于是 趁着有空 ,自己封装了ListView 让其 实现 下拉刷新,以及分页加载功能。

以下是 效果图:

当 滑动到 ListView 顶部 或 尾部 时,再次手指上拉或下拉 则会 触发 ListView 的 刷新 ,并 显示 刷新 动画,完成后动画会 缓慢消失。



Demo 下载 地址:点击打开链接

具体 实现原理:

首先对 ListView 要设置 OnScrollListener 监听 其 滑动 状态 ,并 记录此 状态。

ListView的 滑动 状态 有 三种

	静止状态,SCROLL_STATE_IDLE
	手指滚动状态,SCROLL_STATE_TOUCH_SCROLL
	手指不动了,但是屏幕还在滚动状态。SCROLL_STATE_FLING

上下拉刷新 时 ListView的 滚动状态 必须为 手指滚动才触发刷新。


还要 对 ListView 设置 触摸 监听。

判断 ListView 的 滑动 方向,计算其 手指拖动距离,以及手指抬起时的 刷新动画的 状态

以下是 ListView 的 触摸 和 滚动 监听 代码

首先 在 滚动 监听 了 记录 当前 的 滚动状态。

然后 在 触摸监听里  当状态 为 Action.Move 移动 时,判断滚动的 方向,以及 ListView 当前位置 处于顶部还是底部,并且 是否正在刷新。

然后 根据 手指 移动的 距离 除以相应倍数 ,让 刷新动画 控件 缓慢 出现。 在Action.Up 中 判断 当前的 刷新控件 显示 的 高度 是否 触发 刷新 方法。


    int currentScorllState;

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        currentScorllState = scrollState;
    }

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

    boolean rememberFreshYTag = true;
    float freshY;
    float tempY;
    int times = 3;
    boolean downTag = false;
    float y;

    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        y = motionEvent.getY();
        switch (motionEvent.getAction()) {
            case MotionEvent.ACTION_MOVE:
                float scrollHeight = y - tempY;
                if (scrollHeight > 0) {
                    downTag = true;
                } else {
                    downTag = false;
                }
                if (currentScorllState == OnScrollListener.SCROLL_STATE_TOUCH_SCROLL
                        && this.getFirstVisiblePosition() == 0
                        && this.getTop() == 0
                        && downTag
                        && !freshingTag
                        ) {
                    topFreshTag = true;
                    if (rememberFreshYTag) {
                        freshY = y;
                    }
                    rememberFreshYTag = false;

                    float min = Math.min(headHeight + headHeight / 2, (y - freshY) / times);
                    imageViewHead.setPadding(0, (int) (-headHeight + min), 0, 0);
                    Log.i("testss", "topFresh" + y);
                } else if (currentScorllState == OnScrollListener.SCROLL_STATE_TOUCH_SCROLL
                        && this.getLastVisiblePosition() == getCount() - 1
                        && this.getBottom() == this.getHeight()
                        && !downTag
                        && !freshingTag
                        ) {
                    bottomFreshTag = true;
                    if (rememberFreshYTag) {
                        freshY = y;
                    }
                    rememberFreshYTag = false;
                    float min = Math.min(footHeight + footHeight / 2, -(y - freshY));
                    imageViewFoot.setPadding(0, 0, 0, (int) (-footHeight + min));

                    Log.i("testss", "buttomFresh" + y + "---" + freshY);
                }
                break;
            case MotionEvent.ACTION_UP:
                if (topFreshTag && !freshingTag) {
                    Log.i("testss", "uptopFreshTag");
                    // 手指 抬起时 符合 条件 则 触发 顶部刷新
                    judgeToFresh(TOP_FRESH, imageViewHead, headHeight);
                }
                if (bottomFreshTag && !freshingTag) {
//                    Log.i("testss", "upbottomFreshTag");
                    // 手指 抬起时 符合 条件 则 触发 底部刷新
                    judgeToFresh(BOTTOM_FRESH, imageViewFoot, footHeight);
                }
                break;
        }
        tempY = y;
        return super.onTouchEvent(motionEvent);
    }



以下 是判断 是否 刷新的方法

 /**
     * 判断 是否 触发 刷新
     *
     * @param freshType 刷新 的类型 顶部刷新 或 底部刷新
     * @param imageView 刷新动画 的 控件
     * @param height    当前 刷新动画 控件 显示 的 高度
     */
    private void judgeToFresh(int freshType, ImageView imageView, int height) {

        int paddingHeight = freshType == TOP_FRESH ? imageView.getPaddingTop() : imageView.getPaddingBottom();
        if (paddingHeight == height / 2) {
            imageView.setPadding(0, 0, 0, 0);
            freshingTag = true;
            if (freshType == TOP_FRESH) {
                onTopFresh();
            } else {
                onBottomFresh();
            }
        } else {
            dissHeadOrFootView(imageView, freshType, -paddingHeight, height);
        }
    }

    /**
     * 开始 顶部 刷新
     */
    private void onTopFresh() {
        // 开启 动画
        startOrStopAnimation(imageViewHead, true);
        /**
         * 如果 设置 了外部 监听
         * 则 调用 外部监听 的 刷新 方法
         * 否则 过1s后 自动完成 刷新动画
         */
        if (onListViewFreshListener == null) {
            tempHandler.sendEmptyMessageDelayed(TOP_FRESH, 1000);
        } else {
            onListViewFreshListener.onTopFreshing();
        }
    }

    /**
     * 开始 底部 刷新
     */
    private void onBottomFresh() {
        // 开启 动画
        startOrStopAnimation(imageViewFoot, true);
        /**
         * 如果 设置 了外部 监听
         * 则 调用 外部监听 的 刷新 方法
         * 否则 过1s后 自动完成 刷新动画
         */
        if (onListViewFreshListener == null) {
            tempHandler.sendEmptyMessageDelayed(BOTTOM_FRESH, 1000);
        } else {
            onListViewFreshListener.onBottomFreshing();
        }
    }




Demo 下载 地址:点击打开链接


版权声明:本文为博主原创文章,未经博主允许不得转载。

Android源码解析--超好看的下拉刷新动画

本篇博客代码下载地址:https://github.com/Yalantis/Taurus 最近在github上看到了好多高端、大气、上档次的动画效果,如果给你的项目中加上这些动画,相信你的app一定...
  • lyhhj
  • lyhhj
  • 2015年08月30日 20:09
  • 4675

Android UI- PullToRrefresh自定义下拉刷新动画

Android UI- PullToRrefresh自定义下拉刷新动画 如果觉得本文不错,麻烦投一票,2014年博客之星投票地址:http://vote.blog.csdn.net/blogstar2...
  • wwj_748
  • wwj_748
  • 2015年01月08日 18:49
  • 24313

Android仿QQ邮箱下拉刷新动画(三个小球围绕中心转动)

仿QQ邮箱下拉刷新动画(三个小球围绕中心转动) 该动画的实现主要借鉴了海龙的博客- 两个小球不停的绕中心旋转的进度条 ,在此感谢下。 1 首先上图(折腾了好久才把gif给搞了上去)2 分析2.1 ...
  • u012950099
  • u012950099
  • 2016年06月27日 22:45
  • 1207

Android使用SVG实现今日头条下拉刷新动画

1 SVG的全称是Scalable Vector Graphics,叫可缩放矢量图形。它和位图(Bitmap)相对,SVG不会像位图一样因为缩放而让图片质量下降。 2 Android L开始...
  • u012950099
  • u012950099
  • 2016年07月26日 21:54
  • 2071

Ultra-Pull-To-Refresh 自定义下拉刷新视差动画

下拉刷新视差动画也是这几天公司的一个动画,今晚终于不用加班了,加上好多小伙伴问我这个效果,就把这个动画用博客的形式介绍给大家吧,对了如果你想和我交流更多,可以加我博客联系方式中的QQ群。首先要说明,今...
  • yanzhenjie1003
  • yanzhenjie1003
  • 2016年12月04日 02:20
  • 8711

android 自定义下拉刷新动画效果

今天公司让把官方的下拉刷新动画改一下,自己仔细读pullTorefresh源码,终于发现了蛛丝马迹,现我就自己理解将修改步骤给大家讲解一下。 本篇博文要给大家分享的是如何使用修改开源项目PullToR...
  • qq_28533013
  • qq_28533013
  • 2016年02月15日 14:38
  • 797

Android自定义下拉刷新动画--仿百度外卖下拉刷新

转至Hankkin 好久没写博客了,小编之前一段时间一直在找工作,从天津来到了我们的大帝都,感觉还不错。好了废话不多说了,开始我们今天的主题吧。现如今的APP各式各样,同样也带来...
  • qq_18110665
  • qq_18110665
  • 2016年04月11日 16:11
  • 409

修改PullToRefresh下拉刷新动画

修改PullToRefresh下拉刷新动画开源框架PullToRefresh在android开发中的使用非常广泛,通常我们使用PullToRefresh是将这样的项目作依赖添加到自己的项目上,但是这样...
  • plmmmmlq
  • plmmmmlq
  • 2015年11月27日 12:33
  • 2976

XRefreshView集成以及自定义下拉刷新动画

XRefreshView集成以及自定义GIF动画 1 继承第三方库    compile 'com.huxq17.xrefreshview:xrefreshview:3.6.9'     //依...
  • u013297881
  • u013297881
  • 2017年08月03日 13:49
  • 531

android各种效果(下拉刷新,动画等)

  • 2014年03月19日 17:13
  • 6.41MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android ListView 下拉刷新,上拉加载更多,带动画 自定义控件
举报原因:
原因补充:

(最多只允许输入30个字)