文档章节

Android 下拉刷新框架实现

恶魔永生
 恶魔永生
发布于 2015/01/26 19:12
字数 3083
阅读 430
收藏 33

1. 关于下拉刷新

下拉刷新这种用户交互最早由twitter创始人洛伦•布里切特(Loren Brichter)发明, 有理论认为,下拉刷新是一种适用于按照从新到旧的时间顺序排列feeds的应用,在这种应用场景中看完旧的内容时,用户会很自然地下拉查找更新的内容,因此下拉刷新就显得非常合理。大家可以参考这篇文章: 有趣的下拉刷新,下面我贴出一个有趣的下拉刷新的案例。

图一、有趣的下拉刷新案例(一)


图一、有趣的下拉刷新案例(二)


2. 实现原理

上面这些例子,外观做得再好看,他的本质上都一样,那就是一个下拉刷新控件通常由以下几部分组成:
【1】Header
Header通常有下拉箭头,文字,进度条等元素,根据下拉的距离来改变它的状态,从而显示不同的样式
【2】Content
这部分是内容区域,网上有很多例子都是直接在ListView里面添加Header,但这就有局限性,因为好多情况下并不一定是用ListView来显示数据。我们把要显示内容的View放置在我们的一个容器中,如果你想实现一个用ListView显示数据的下拉刷新,你需要创建一个ListView旋转到我的容器中。我们处理这个容器的事件(down, move, up),如果向下拉,则把整个布局向下滑动,从而把header显示出来。
【3】Footer
Footer可以用来显示向上拉的箭头,自动加载更多的进度条等。

以上三部分总结的说来,就是如下图所示的这种布局结构:
图三,下拉刷新的布局结构

关于上图,需要说明几点:
1、这个布局扩展于 LinearLayout,垂直排列
2、从上到下的顺序是:Header, Content, Footer
3、Content填充满父控件,通过设置top, bottom的padding来使Header和Footer不可见,也就是让它超出屏幕外
4、下拉时,调用scrollTo方法来将整个布局向下滑动,从而把Header显示出来,上拉正好与下拉相反。
5、派生类需要实现的是:将Content View填充到父容器中,比如,如果你要使用的话,那么你需要把ListView, ScrollView, WebView等添加到容器中。
6、上图中的红色区域就是屏的大小(严格来说,这里说屏幕大小并不准确,应该说成内容区域更加准确)

3. 具体实现

明白了实现原理与过程,我们尝试来具体实现,首先,为了以后更好地扩展,设计更加合理,我们把下拉刷新的功能抽象成一个接口:

1、IPullToRefresh<T extends View>

它具体的定义方法如下:
[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. public interface IPullToRefresh<T extends View> {  
  2.     public void setPullRefreshEnabled(boolean pullRefreshEnabled);  
  3.     public void setPullLoadEnabled(boolean pullLoadEnabled);  
  4.     public void setScrollLoadEnabled(boolean scrollLoadEnabled);  
  5.     public boolean isPullRefreshEnabled();  
  6.     public boolean isPullLoadEnabled();  
  7.     public boolean isScrollLoadEnabled();  
  8.     public void setOnRefreshListener(OnRefreshListener<T> refreshListener);  
  9.     public void onPullDownRefreshComplete();  
  10.     public void onPullUpRefreshComplete();  
  11.     public T getRefreshableView();  
  12.     public LoadingLayout getHeaderLoadingLayout();  
  13.     public LoadingLayout getFooterLoadingLayout();  
  14.     public void setLastUpdatedLabel(CharSequence label);  
  15. }  
这个接口是一个泛型的,它接受View的派生类, 因为要放到我们的容器中的不就是一个View吗?

2、PullToRefreshBase<T extends View>
这个类实现了IPullToRefresh接口,它是从LinearLayout继承过来,作为下拉刷新的一个 抽象基类,如果你想实现ListView的下拉刷新,只需要扩展这个类,实现一些必要的方法就可以了。这个类的职责主要有以下几点:
  • 处理onInterceptTouchEvent()和onTouchEvent()中的事件当内容的View(比如ListView)正如处于最顶部,此时再向下拉,我们必须截断事件,然后move事件就会把后续的事件传递到onTouchEvent()方法中,然后再在这个方法中,我们根据move的距离再进行scroll整个View。
  • 负责创建Header、Footer和Content View在构造方法中调用方法去创建这三个部分的View,派生类可以重写这些方法,以提供不同式样的Header和Footer,它会调用createHeaderLoadingLayout和createFooterLoadingLayout方法来创建Header和Footer创建Content View的方法是一个抽象方法,必须让派生类来实现,返回一个非null的View,然后容器再把这个View添加到自己里面。
  • 设置各种状态:这里面有很多状态,如下拉、上拉、刷新、加载中、释放等,它会根据用户拉动的距离来更改状态,状态的改变,它也会把Header和Footer的状态改变,然后Header和Footer会根据状态去显示相应的界面式样。
3、PullToRefreshBase<T extends View>继承关系
这里我实现了三个下拉刷新的派生类,分别是ListView、ScrollView、WebView三个,它们的继承关系如下:

图四、PullToRefreshBase类的继承关系

关于PullToRefreshBase类及其派和类,有几点需要说明:
  • 对于ListView,ScrollView,WebView这三种情况,他们是否滑动到最顶部或是最底部的实现是不一样的,所以,在PullToRefreshBase类中需要调用两个抽象方法来判断当前的位置是否在顶部或底部,而其派生类必须要实现这两个方法。比如对于ListView,它滑动到最顶部的条件就是第一个child完全可见并且first postion是0。这两个抽象方法是:
[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.  * 判断刷新的View是否滑动到顶部 
  3.  *  
  4.  * @return true表示已经滑动到顶部,否则false 
  5.  */  
  6. protected abstract boolean isReadyForPullDown();  
  7.   
  8. /** 
  9.  * 判断刷新的View是否滑动到底 
  10.  *  
  11.  * @return true表示已经滑动到底部,否则false 
  12.  */  
  13. protected abstract boolean isReadyForPullUp();  
  • 创建可下拉刷新的View(也就是content view)的抽象方法是
[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.  * 创建可以刷新的View 
  3.  *  
  4.  * @param context context 
  5.  * @param attrs 属性 
  6.  * @return View 
  7.  */  
  8. protected abstract T createRefreshableView(Context context, AttributeSet attrs);  
4、LoadingLayout
LoadingLayout是刷新Layout的一个抽象,它是一个抽象基类。Header和Footer都扩展于这个类。这类抽象类,提供了两个抽象方法:
  • getContentSize
这个方法返回当前这个刷新Layout的大小,通常返回的是布局的高度,为了以后可以扩展为水平拉动,所以方法名字没有取成getLayoutHeight()之类的,这个返回值,将会作为松手后是否可以刷新的临界值,如果下拉的偏移值大于这个值,就认为可以刷新,否则不刷新,这个方法必须由派生类来实现。
  • setState
这个方法用来设置当前刷新Layout的状态,PullToRefreshBase类会调用这个方法,当进入下拉,松手等动作时,都会调用这个方法,派生类里面只需要根据这些状态实现不同的界面显示,如下拉状态时,就显示出箭头,刷新状态时,就显示loading的图标。
可能的状态值有: RESET, PULL_TO_REFRESH, RELEASE_TO_REFRESH, REFRESHING, NO_MORE_DATA

LoadingLayout及其派生类的继承关系如下图所示:

图五、LoadingLayout及其派生类的类图

我们可以随意地制定自己的Header和Footer,我们也可以实现如图一和图二中显示的各种下拉刷新案例中的Header和Footer,只要重写上述两个方法getContentSize()和setState()就行了。HeaderLoadingLayout,它默认是显示箭头式样的布局,而RotateLoadingLayout则是显示一个旋转图标的式样。

5、事件处理
我们必须重写PullToRefreshBase类的两个事件相关的方法 onInterceptTouchEvent()和onTouchEvent()方法。由于ListView,ScrollView,WebView它们是放到PullToRefreshBase内部的,所在事件先是传递到PullToRefreshBase#onInterceptTouchEvent()方法中,所以我们应该在这个方法中去处理ACTION_MOVE事件,判断如果当前ListView,ScrollView,WebView是否在最顶部或最底部,如果是,则开始截断事件,一旦事件被截断,后续的事件就会传递到PullToRefreshBase#onInterceptTouchEvent()方法中,我们再在ACTION_MOVE事件中去移动整个布局,从而实现下拉或上拉动作。

6、滚动布局(scrollTo)
如图三的布局结构可知,默认情况下Header和Footer是放置在Content View的最上面和最下面,通过设置padding来让他跑到屏幕外面去了,如果我们将整个布局向下滚动(scrollTo)一定距离,那么Header就会被显示出来,基于这种情况,所以在我的实现中,最终我是调用 scrollTo来实现下拉动作的。

总的说来,实现的重要的点就这些,具体的一些细节在实现在会碰到很多,可以参考代码。

4. 如何使用

使用下拉刷新的代码如下
[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. @Override  
  2.     public void onCreate(Bundle savedInstanceState) {  
  3.         super.onCreate(savedInstanceState);  
  4.           
  5.         mPullListView = new PullToRefreshListView(this);  
  6.         setContentView(mPullListView);  
  7.           
  8.         // 上拉加载不可用  
  9.         mPullListView.setPullLoadEnabled(false);  
  10.         // 滚动到底自动加载可用  
  11.         mPullListView.setScrollLoadEnabled(true);  
  12.           
  13.         mCurIndex = mLoadDataCount;  
  14.         mListItems = new LinkedList<String>();  
  15.         mListItems.addAll(Arrays.asList(mStrings).subList(0, mCurIndex));  
  16.         mAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, mListItems);  
  17.           
  18.         // 得到实际的ListView  
  19.         mListView = mPullListView.getRefreshableView();  
  20.         // 绑定数据  
  21.         mListView.setAdapter(mAdapter);         
  22.         // 设置下拉刷新的listener  
  23.         mPullListView.setOnRefreshListener(new OnRefreshListener<ListView>() {  
  24.             @Override  
  25.             public void onPullDownToRefresh(PullToRefreshBase<ListView> refreshView) {  
  26.                 mIsStart = true;  
  27.                 new GetDataTask().execute();  
  28.             }  
  29.   
  30.             @Override  
  31.             public void onPullUpToRefresh(PullToRefreshBase<ListView> refreshView) {  
  32.                 mIsStart = false;  
  33.                 new GetDataTask().execute();  
  34.             }  
  35.         });  
  36.         setLastUpdateTime();  
  37.           
  38.         // 自动刷新  
  39.         mPullListView.doPullRefreshing(true500);  
  40.     }  
这是初始化一个下拉刷新的布局,并且调用setContentView来设置到Activity中。
在下拉刷新完成后,我们可以调用 onPullDownRefreshComplete()和onPullUpRefreshComplete()方法来停止刷新和加载

5. 运行效果

这里列出了demo的运行效果图。

图六、ListView下拉刷新,注意Header和Footer的样式


图七、WebView和ScrollView的下拉刷新效果图


6. 源码下载

实现这个下拉刷新的框架,并不是我的原创,我也是参考了很多开源的,把我认为比较好的东西借鉴过来,从而形成我的东西,我主要是参考了下面这个demo:
https://github.com/chrisbanes/Android-PullToRefresh 这个demo写得不错,不过他这个太复杂了,我们都知道,一旦复杂了,万一我们要添加一些需要,自然也要费劲一些,我其实就是把他的简化再简化,以满足我们自己的需要。


转载请说明出处
谢谢!!!


7. Bug修复


已知bug修复情况如下,发现了代码bug的看官也可以给我反馈,谢谢~~~

1,对于ListView的下拉刷新,当启用滚动到底自动加载时,如果footer由隐藏变为显示时,出现显示异常的情况
这个问题已经修复了,修正的代码如下:
  • PullToRefreshListView#setScrollLoadEnabled方法,修正后的代码如下:
[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. @Override  
  2. public void setScrollLoadEnabled(boolean scrollLoadEnabled) {  
  3.     if (isScrollLoadEnabled() == scrollLoadEnabled) {  
  4.         return;  
  5.     }  
  6.       
  7.     super.setScrollLoadEnabled(scrollLoadEnabled);  
  8.       
  9.     if (scrollLoadEnabled) {  
  10.         // 设置Footer  
  11.         if (null == mLoadMoreFooterLayout) {  
  12.             mLoadMoreFooterLayout = new FooterLoadingLayout(getContext());  
  13.             mListView.addFooterView(mLoadMoreFooterLayout, nullfalse);  
  14.         }  
  15.           
  16.         mLoadMoreFooterLayout.show(true);  
  17.     } else {  
  18.         if (null != mLoadMoreFooterLayout) {  
  19.             mLoadMoreFooterLayout.show(false);  
  20.         }  
  21.     }  
  22. }  
  • LoadingLayout#show方法,修正后的代码如下:
[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.  * 显示或隐藏这个布局 
  3.  *  
  4.  * @param show flag 
  5.  */  
  6. public void show(boolean show) {  
  7.     // If is showing, do nothing.  
  8.     if (show == (View.VISIBLE == getVisibility())) {  
  9.         return;  
  10.     }  
  11.       
  12.     ViewGroup.LayoutParams params = mContainer.getLayoutParams();  
  13.     if (null != params) {  
  14.         if (show) {  
  15.             params.height = ViewGroup.LayoutParams.WRAP_CONTENT;  
  16.         } else {  
  17.             params.height = 0;  
  18.         }  
  19.           
  20.         requestLayout();  
  21.         setVisibility(show ? View.VISIBLE : View.INVISIBLE);  
  22.     }  
  23. }  
在更改LayoutParameter后,调用requestLayout()方法。
  • 图片旋转兼容2.x系统
我之前想的是这个只需要兼容3.x以上的系统,但发现有很多网友在使用过程中遇到过兼容性问题,这次抽空将这个兼容性一并实现了。
       onPull的修改如下:
[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. @Override  
  2. public void onPull(float scale) {  
  3.     if (null == mRotationHelper) {  
  4.         mRotationHelper = new ImageViewRotationHelper(mArrowImageView);  
  5.     }  
  6.       
  7.     float angle = scale * 180f; // SUPPRESS CHECKSTYLE  
  8.     mRotationHelper.setRotation(angle);  
  9. }  

ImageViewRotationHelper主要的作用就是实现了ImageView的旋转功能,内部作了版本的区分,实现代码如下:

[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.      * The image view rotation helper 
  3.      *  
  4.      * @author lihong06 
  5.      * @since 2014-5-2 
  6.      */  
  7.     static class ImageViewRotationHelper {  
  8.         /** The imageview */  
  9.         private final ImageView mImageView;  
  10.         /** The matrix */  
  11.         private Matrix mMatrix;  
  12.         /** Pivot X */  
  13.         private float mRotationPivotX;  
  14.         /** Pivot Y */  
  15.         private float mRotationPivotY;  
  16.           
  17.         /** 
  18.          * The constructor method. 
  19.          *  
  20.          * @param imageView the image view 
  21.          */  
  22.         public ImageViewRotationHelper(ImageView imageView) {  
  23.             mImageView = imageView;  
  24.         }  
  25.           
  26.         /** 
  27.          * Sets the degrees that the view is rotated around the pivot point. Increasing values 
  28.          * result in clockwise rotation. 
  29.          * 
  30.          * @param rotation The degrees of rotation. 
  31.          * 
  32.          * @see #getRotation() 
  33.          * @see #getPivotX() 
  34.          * @see #getPivotY() 
  35.          * @see #setRotationX(float) 
  36.          * @see #setRotationY(float) 
  37.          * 
  38.          * @attr ref android.R.styleable#View_rotation 
  39.          */  
  40.         public void setRotation(float rotation) {  
  41.             if (APIUtils.hasHoneycomb()) {  
  42.                 mImageView.setRotation(rotation);  
  43.             } else {  
  44.                 if (null == mMatrix) {  
  45.                     mMatrix = new Matrix();  
  46.                       
  47.                     // 计算旋转的中心点  
  48.                     Drawable imageDrawable = mImageView.getDrawable();  
  49.                     if (null != imageDrawable) {  
  50.                         mRotationPivotX = Math.round(imageDrawable.getIntrinsicWidth() / 2f);  
  51.                         mRotationPivotY = Math.round(imageDrawable.getIntrinsicHeight() / 2f);  
  52.                     }  
  53.                 }  
  54.                   
  55.                 mMatrix.setRotate(rotation, mRotationPivotX, mRotationPivotY);  
  56.                 mImageView.setImageMatrix(mMatrix);  
  57.             }  
  58.         }  
  59.     }  

最核心的就是,如果在2.x的版本上,旋转ImageView使用Matrix。

  • PullToRefreshBase构造方法兼容2.x
在三个参数的构造方法声明如下标注:
    @SuppressLint("NewApi")
    @TargetApi(Build.VERSION_CODES.HONEYCOMB)

本文转载自:

恶魔永生
粉丝 13
博文 26
码字总数 1423
作品 0
朝阳
高级程序员
私信 提问
SwipeRefreshLayout,用最少的代码定制最美的上下拉刷新样式

下拉刷新框架其实有很多,而且质量都比较高。但是在日常开发中,每一款产品都会有一套自己独特的一套刷新样式。相信有很多小伙伴在个性化定制中都或多或少的遇到过麻烦。今天我就给大家推荐一...

codeGoogle
2018/05/18
0
0
PullToRefreshListView 应用讲解

转载于http://blog.csdn.net/mmjiajia132/article/details/40397813 PullToRefreshListView 用法和ListView 没有什么区别 listview能用的属性 pulltorefresh也能用 我一直认为动手是最好的学...

程序袁_绪龙
2015/08/02
210
0
Android项目实战(五十六):获取WebView加载的url的请求错误码

例如需求,我有一个WebView 加载一个url, 该url对应的网页本身自带下拉刷新 ,但是网页本身会有出现400 500 等异常请求错误码 这时候网页加载失败,页面本身的下拉是无法使用的,要求重新加载...

听着music睡
06/20
0
0
滚动到底部加载更多及下拉刷新listview的使用

最新内容建议直接访问原文:滚动到底部加载更多及下拉刷新listview的使用 本文主要介绍可同时实现下拉刷新及滑动到底部加载更多的ListView的使用。 该ListView优点包括:a. 可自定义下拉响应...

Trinea
2013/06/24
6.7K
3
Google官方下拉刷新组件---SwipeRefreshLayout

原文链接 : http://stormzhang.github.io/android/2014/03/29/android-swiperefreshlayout/ 今天在Google+上看到了SwipeRefreshLayout这个名词,遂搜索了下,发现竟然是刚刚google更新sdk新...

stormzhang
2014/04/03
813
7

没有更多内容

加载失败,请刷新页面

加载更多

学习记录 java面试题(一)

1. JDK和JRE的区别 JDK是整个JAVA的核心,包括了Java运行环境JRE,一堆Java工具和Java基础的类库。通过JDK开发人员将源码 文件(java文件)编译成字节码文件(class文件)。 JRE是Java运行环境,...

Pole丶逐
19分钟前
5
0
springboot 部署到外部tomcat

入口类继承SpringBootServletInitializer 并重写protected SpringApplicationBuilder configure(SpringApplicationBuilder builder)方法 如下 import org.springframework.boot.SpringApplic......

雷开你的门
25分钟前
3
0
hashCode和equals方法的关系

equals相等,hashcode必相等; hashCode()在哈希表中起作用,如HashSet、HashMap等。 当我们向哈希表(如HashSet、HashMap等)中添加对象object时,首先调用hashCode()方法计算object的哈希码,...

无名氏的程序员
29分钟前
2
0
技术分享 | MySQL 慢查询记录原理和内容解析

作者:高鹏 文章末尾有他著作的《深入理解 MySQL 主从原理 32 讲》,深入透彻理解 MySQL 主从,GTID 相关技术知识。 源码版本:percona 5.7.14 本文为学习记录,可能有误请谅解,也提供了一些...

爱可生
37分钟前
3
0
elementui 树型节点

节点选择时,勾选节点。 提交给后端时,传递 this.$refs.menuTree.getCheckedKeys(); 半选父节点 getHalfCheckedKeys() 不需要提交。...

东东笔记
38分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部