Android 下拉刷新框架实现

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

  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

  1. /**
  2. * 判断刷新的View是否滑动到顶部
  3. *
  4. * @return true表示已经滑动到顶部，否则false
  5. */
  6. protected abstract boolean isReadyForPullDown();
  7. /**
  8. * 判断刷新的View是否滑动到底
  9. *
  10. * @return true表示已经滑动到底部，否则false
  11. */
  12. protected abstract boolean isReadyForPullUp();
  • 创建可下拉刷新的View（也就是content view）的抽象方法是

[java] 
view plain
copy

  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

  1. @Override
  2. public void onCreate(Bundle savedInstanceState) {
  3. super.onCreate(savedInstanceState);
  4. mPullListView = new PullToRefreshListView(this);
  5. setContentView(mPullListView);
  6. // 上拉加载不可用
  7. mPullListView.setPullLoadEnabled(false);
  8. // 滚动到底自动加载可用
  9. mPullListView.setScrollLoadEnabled(true);
  10. mCurIndex = mLoadDataCount;
  11. mListItems = new LinkedList<String>();
  12. mListItems.addAll(Arrays.asList(mStrings).subList(0, mCurIndex));
  13. mAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, mListItems);
  14. // 得到实际的ListView
  15. mListView = mPullListView.getRefreshableView();
  16. // 绑定数据
  17. mListView.setAdapter(mAdapter);
  18. // 设置下拉刷新的listener
  19. mPullListView.setOnRefreshListener(new OnRefreshListener<ListView>() {
  20. @Override
  21. public void onPullDownToRefresh(PullToRefreshBase<ListView> refreshView) {
  22. mIsStart = true;
  23. new GetDataTask().execute();
  24. }
  25. @Override
  26. public void onPullUpToRefresh(PullToRefreshBase<ListView> refreshView) {
  27. mIsStart = false;
  28. new GetDataTask().execute();
  29. }
  30. });
  31. setLastUpdateTime();
  32. // 自动刷新
  33. mPullListView.doPullRefreshing(true, 500);
  34. }

这是初始化一个下拉刷新的布局，并且调用setContentView来设置到Activity中。

在下拉刷新完成后，我们可以调用
onPullDownRefreshComplete()和onPullUpRefreshComplete()方法来停止刷新和加载

5. 运行效果

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

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

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

6. 源码下载

实现这个下拉刷新的框架，并不是我的原创，我也是参考了很多开源的，把我认为比较好的东西借鉴过来，从而形成我的东西，我主要是参考了下面这个demo：

https://github.com/chrisbanes/Android-PullToRefresh 这个demo写得不错，不过他这个太复杂了，我们都知道，一旦复杂了，万一我们要添加一些需要，自然也要费劲一些，我其实就是把他的简化再简化，以满足我们自己的需要。

源码下载请猛点我

转载请说明出处

http://blog.csdn.net/leehong2005/article/details/12567757 

谢谢！！！

7. Bug修复

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

1，对于ListView的下拉刷新，当启用滚动到底自动加载时，如果footer由隐藏变为显示时，出现显示异常的情况

这个问题已经修复了，修正的代码如下：

  • PullToRefreshListView#setScrollLoadEnabled方法，修正后的代码如下：

[java] 
view plain
copy

  1. @Override
  2. public void setScrollLoadEnabled(boolean scrollLoadEnabled) {
  3. if (isScrollLoadEnabled() == scrollLoadEnabled) {
  4. return;
  5. }
  6. super.setScrollLoadEnabled(scrollLoadEnabled);
  7. if (scrollLoadEnabled) {
  8. // 设置Footer
  9. if (null == mLoadMoreFooterLayout) {
  10. mLoadMoreFooterLayout = new FooterLoadingLayout(getContext());
  11. mListView.addFooterView(mLoadMoreFooterLayout, null, false);
  12. }
  13. mLoadMoreFooterLayout.show(true);
  14. } else {
  15. if (null != mLoadMoreFooterLayout) {
  16. mLoadMoreFooterLayout.show(false);
  17. }
  18. }
  19. }
  • LoadingLayout#show方法，修正后的代码如下：

[java] 
view plain
copy

  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. ViewGroup.LayoutParams params = mContainer.getLayoutParams();
  12. if (null != params) {
  13. if (show) {
  14. params.height = ViewGroup.LayoutParams.WRAP_CONTENT;
  15. } else {
  16. params.height = 0;
  17. }
  18. requestLayout();
  19. setVisibility(show ? View.VISIBLE : View.INVISIBLE);
  20. }
  21. }

在更改LayoutParameter后，调用requestLayout()方法。

  • 图片旋转兼容2.x系统

我之前想的是这个只需要兼容3.x以上的系统，但发现有很多网友在使用过程中遇到过兼容性问题，这次抽空将这个兼容性一并实现了。

       onPull的修改如下：

[java] 
view plain
copy

  1. @Override
  2. public void onPull(float scale) {
  3. if (null == mRotationHelper) {
  4. mRotationHelper = new ImageViewRotationHelper(mArrowImageView);
  5. }
  6. float angle = scale * 180f; // SUPPRESS CHECKSTYLE
  7. mRotationHelper.setRotation(angle);
  8. }

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

[java] 
view plain
copy

  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. * The constructor method.
  18. *
  19. * @param imageView the image view
  20. */
  21. public ImageViewRotationHelper(ImageView imageView) {
  22. mImageView = imageView;
  23. }
  24. /**
  25. * Sets the degrees that the view is rotated around the pivot point. Increasing values
  26. * result in clockwise rotation.
  27. *
  28. * @param rotation The degrees of rotation.
  29. *
  30. * @see #getRotation()
  31. * @see #getPivotX()
  32. * @see #getPivotY()
  33. * @see #setRotationX(float)
  34. * @see #setRotationY(float)
  35. *
  36. * @attr ref android.R.styleable#View_rotation
  37. */
  38. public void setRotation(float rotation) {
  39. if (APIUtils.hasHoneycomb()) {
  40. mImageView.setRotation(rotation);
  41. } else {
  42. if (null == mMatrix) {
  43. mMatrix = new Matrix();
  44. // 计算旋转的中心点
  45. Drawable imageDrawable = mImageView.getDrawable();
  46. if (null != imageDrawable) {
  47. mRotationPivotX = Math.round(imageDrawable.getIntrinsicWidth() / 2f);
  48. mRotationPivotY = Math.round(imageDrawable.getIntrinsicHeight() / 2f);
  49. }
  50. }
  51. mMatrix.setRotate(rotation, mRotationPivotX, mRotationPivotY);
  52. mImageView.setImageMatrix(mMatrix);
  53. }
  54. }
  55. }

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

  • PullToRefreshBase构造方法兼容2.x

在三个参数的构造方法声明如下标注：

@SuppressLint("NewApi")

@TargetApi(Build.VERSION_CODES.HONEYCOMB)

时间： 2024-10-15 13:30:26

Android 下拉刷新框架实现的相关文章

android 下拉刷新框架PullToRefreshScrollView（com.handmark.pulltorefresh）

很简单,实现OnRefreshListener这个监听器. mPullRefreshScrollView .setOnRefreshListener(new OnRefreshListener<ScrollView>() { @Override public void onRefresh( PullToRefreshBase<ScrollView> refreshView) { loadData(); } }); 刷新完成: mPullRefreshScrollView.onRef

032 Android智能下拉刷新框架-SmartRefreshLayout+RecyclerView的使用

1.SmartRefreshLayout介绍 SmartRefreshLayout的目标是打造一个强大,稳定,成熟的下拉刷新框架,并集成各种的炫酷.多样.实用.美观的Header和Footer. 正如名字所说,SmartRefreshLayout是一个“聪明”或者“智能”的下拉刷新布局,由于它的“智能”,它不只是支持所有的View,还支持多层嵌套的视图结构. 它继承自ViewGroup 而不是FrameLayout或LinearLayout,提高了性能. 也吸取了现在流行的各种刷新布局的优点,包

android下拉刷新 &amp; 强制刷新notifyDataSetChanged

这次在项目中实现的是下拉刷新功能,包含两个问题:自定义样式 & 强制刷新. 0.  效果图(模仿git的一个demo): 1.  自定义样式 下拉刷新用到的是普遍的框架PullToRefreshView.java下面会有代码展示,这个框架在网上都能随便搜到,然后定义自定义样式RefreshView.java,下面是代码: PullToRefreshView.java package com.baofoo.mobile.wallet.common.view.pullable; import and

Android下拉刷新控件android-Ultra-Pull-To-Refresh 使用

一.gitHub地址及介绍 https://github.com/liaohuqiu/android-Ultra-Pull-To-Refresh android-Ultra-Pull-To-Refresh (简称 UltraPTR )是一个强大的 Andriod 下拉刷新框架. 1.继承自ViewGroup,Content可以包含任何View: 2.简洁完善的Header抽象,方便进行扩展,构建满足需求的Header: 对比于Android-PullToRefresh 来说,UltraPTR没有

Android 下拉刷新上拉加载 多种应用场景 超级大放送（上）

转载请标明原文地址:http://blog.csdn.net/yalinfendou/article/details/47707017 关于Android下拉刷新上拉加载,网上的Demo太多太多了,这里不是介绍怎么去实现下拉刷新上拉加载,而是针对下拉刷新上拉加载常用的一些应用场景就行了一些总结,包含了下拉刷新上拉加载过程中遇到的一些手势冲突问题的解决方法(只能算是抛砖引玉). 去年9月的时候,那时自己正在独立做Android项目.记得刚刚写完那个ListView列表页面(木有下拉刷新,上拉加载)

【原创：参赛作品】窥视懒人的秘密---android下拉刷新开启手势的新纪元

小飒的成长史原创作品:窥视懒人的秘密---android下拉刷新开启手势的新纪元转载请注明出处 *****************************************************************        前言:窥视懒人那些不为人知的秘密 ***************************************************************** 作为一个程序员,哪有不勤奋的道理,当我们都在为技术奋不顾身的时候.偏偏懒人创造了世界. 有的

android 下拉刷新上拉加载更多，高仿ios左滑动删除item，解决了众多手势问题

一.前言 老规矩,别的不说,这demo是找了很相关知识集合而成的,可以说对我这种小白来说是绞尽脑汁!程序员讲的是无图无真相!现在大家一睹为快! 二.比较关键的还是scroller这个类的 package com.icq.slideview.view; import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.util.TypedValue; i

Android下拉刷新库，利用viewdraghelper实现，集成了下拉刷新，底部加载更多，数据初始加载显示loading等功能

项目Github地址:https://github.com/sddyljsx/pulltorefresh Android下拉刷新库,利用viewdraghelper实现. 集成了下拉刷新,底部加载更多,以及刚进入加载数据的loadview.包括了listview与gridview的改写. 效果1: 效果2: 效果3: 效果4: 效果5: 使用说明: imageList=(ListView)findViewById(R.id.image_list); imageAdapter=new ImageA

Android 下拉刷新上拉加载效果功能，使用开源项目android-pulltorefresh实现

应用场景: 在App开发中,对于信息的获取与演示,不可能全部将其获取与演示,为了在用户使用中,给予用户以友好.方便的用户体验,以滑动.下拉的效果动态加载数据的要求就会出现.为此,该效果功能就需要应用到所需要的展示页面中. 知识点介绍: 本文主要根据开源项目android-pulltorefresh展开介绍. android-pulltorefresh [一个强大的拉动刷新开源项目,支持各种控件下拉刷新 ListView.ViewPager.WevView.ExpandableListView.G