0

让Android Support V4中的SwipeRefreshLayout支持上拉加载更多

前言

原 来的Android SDK中并没有下拉刷新组件,但是这个组件确实绝大多数APP必备的一个部件。好在google在v4包中出了一个 SwipeRefreshLayout,但是这个组件只支持下拉刷新,不支持上拉加载更多的操作。因此,我们就来简单的扩展一下这个组件以实现上拉下载的 目的。

基本原理

上 拉加载或者说滚动到底部时自动加载,都是通过判断是否滚动到了ListView或者其他View的底部,然后触发相应的操作,这里我们以ListView 来说明。因此我们需要在监听ListView的滚动事件,当ListView滚动到底部时自动触发加载操作;但是当用户支持手指滑动屏幕,没有滚动时,我 们也需要让它加载,因此这种情形就是上拉加载更多。所以我们需要在触摸事件里面进行判断,如果到了底部,且用户是上拉操作,那么执行加载更多。更多关于下 拉刷新、上拉加载请参考打造通用的Android下拉刷新组件(适用于ListView、GridView等各类View)
时间有限,直接上代码吧。

实现代码

  1. /**
  2.  * 继承自SwipeRefreshLayout,从而实现滑动到底部时上拉加载更多的功能.
  3.  * 
  4.  * @author mrsimple
  5.  */
  6. public class RefreshLayout extends SwipeRefreshLayout implements OnScrollListener {
  7.     /**
  8.      * 滑动到最下面时的上拉操作
  9.      */
  10.     private int mTouchSlop;
  11.     /**
  12.      * listview实例
  13.      */
  14.     private ListView mListView;
  15.     /**
  16.      * 上拉监听器, 到了最底部的上拉加载操作
  17.      */
  18.     private OnLoadListener mOnLoadListener;
  19.     /**
  20.      * ListView的加载中footer
  21.      */
  22.     private View mListViewFooter;
  23.     /**
  24.      * 按下时的y坐标
  25.      */
  26.     private int mYDown;
  27.     /**
  28.      * 抬起时的y坐标, 与mYDown一起用于滑动到底部时判断是上拉还是下拉
  29.      */
  30.     private int mLastY;
  31.     /**
  32.      * 是否在加载中 ( 上拉加载更多 )
  33.      */
  34.     private boolean isLoading = false;
  35.     /**
  36.      * @param context
  37.      */
  38.     public RefreshLayout(Context context) {
  39.         this(context, null);
  40.     }
  41.     public RefreshLayout(Context context, AttributeSet attrs) {
  42.         super(context, attrs);
  43.         mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
  44.         mListViewFooter = LayoutInflater.from(context).inflate(R.layout.listview_footer, null,
  45.                 false);
  46.     }
  47.     @Override
  48.     protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
  49.         super.onLayout(changed, left, top, right, bottom);
  50.         // 初始化ListView对象
  51.         if (mListView == null) {
  52.             getListView();
  53.         }
  54.     }
  55.     /**
  56.      * 获取ListView对象
  57.      */
  58.     private void getListView() {
  59.         int childs = getChildCount();
  60.         if (childs > 0) {
  61.             View childView = getChildAt(0);
  62.             if (childView instanceof ListView) {
  63.                 mListView = (ListView) childView;
  64.                 // 设置滚动监听器给ListView, 使得滚动的情况下也可以自动加载
  65.                 mListView.setOnScrollListener(this);
  66.                 Log.d(VIEW_LOG_TAG, “### 找到listview”);
  67.             }
  68.         }
  69.     }
  70.     /*
  71.      * (non-Javadoc)
  72.      * @see android.view.ViewGroup#dispatchTouchEvent(android.view.MotionEvent)
  73.      */
  74.     @Override
  75.     public boolean dispatchTouchEvent(MotionEvent event) {
  76.         final int action = event.getAction();
  77.         switch (action) {
  78.             case MotionEvent.ACTION_DOWN:
  79.                 // 按下
  80.                 mYDown = (int) event.getRawY();
  81.                 break;
  82.             case MotionEvent.ACTION_MOVE:
  83.                 // 移动
  84.                 mLastY = (int) event.getRawY();
  85.                 break;
  86.             case MotionEvent.ACTION_UP:
  87.                 // 抬起
  88.                 if (canLoad()) {
  89.                     loadData();
  90.                 }
  91.                 break;
  92.             default:
  93.                 break;
  94.         }
  95.         return super.dispatchTouchEvent(event);
  96.     }
  97.     /**
  98.      * 是否可以加载更多, 条件是到了最底部, listview不在加载中, 且为上拉操作.
  99.      * 
  100.      * @return
  101.      */
  102.     private boolean canLoad() {
  103.         return isBottom() && !isLoading && isPullUp();
  104.     }
  105.     /**
  106.      * 判断是否到了最底部
  107.      */
  108.     private boolean isBottom() {
  109.         if (mListView != null && mListView.getAdapter() != null) {
  110.             return mListView.getLastVisiblePosition() == (mListView.getAdapter().getCount() – 1);
  111.         }
  112.         return false;
  113.     }
  114.     /**
  115.      * 是否是上拉操作
  116.      * 
  117.      * @return
  118.      */
  119.     private boolean isPullUp() {
  120.         return (mYDown – mLastY) >= mTouchSlop;
  121.     }
  122.     /**
  123.      * 如果到了最底部,而且是上拉操作.那么执行onLoad方法
  124.      */
  125.     private void loadData() {
  126.         if (mOnLoadListener != null) {
  127.             // 设置状态
  128.             setLoading(true);
  129.             //
  130.             mOnLoadListener.onLoad();
  131.         }
  132.     }
  133.     /**
  134.      * @param loading
  135.      */
  136.     public void setLoading(boolean loading) {
  137.         isLoading = loading;
  138.         if (isLoading) {
  139.             mListView.addFooterView(mListViewFooter);
  140.         } else {
  141.             mListView.removeFooterView(mListViewFooter);
  142.             mYDown = 0;
  143.             mLastY = 0;
  144.         }
  145.     }
  146.     /**
  147.      * @param loadListener
  148.      */
  149.     public void setOnLoadListener(OnLoadListener loadListener) {
  150.         mOnLoadListener = loadListener;
  151.     }
  152.     @Override
  153.     public void onScrollStateChanged(AbsListView view, int scrollState) {
  154.     }
  155.     @Override
  156.     public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount,
  157.             int totalItemCount) {
  158.         // 滚动时到了最底部也可以加载更多
  159.         if (canLoad()) {
  160.             loadData();
  161.         }
  162.     }
  163.     /**
  164.      * 加载更多的监听器
  165.      * 
  166.      * @author mrsimple
  167.      */
  168.     public static interface OnLoadListener {
  169.         public void onLoad();
  170.     }
  171. }
listview_footer.xml:
  1. <?xml version=“1.0” encoding=“utf-8”?>
  2. <RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”
  3.     android:layout_width=“fill_parent”
  4.     android:layout_height=“wrap_content”
  5.     android:background=“@color/umeng_comm_comments_bg”
  6.     android:gravity=“center”
  7.     android:paddingBottom=“8dip”
  8.     android:paddingTop=“5dip” >
  9.     <ProgressBar
  10.         android:id=“@+id/pull_to_refresh_load_progress”
  11.         style=“@android:style/Widget.ProgressBar.Small.Inverse”
  12.         android:layout_width=“wrap_content”
  13.         android:layout_height=“wrap_content”
  14.         android:layout_centerVertical=“true”
  15.         android:layout_centerHorizontal=“true”
  16.         android:paddingRight=“100dp”
  17.         android:indeterminate=“true” />
  18.     <TextView
  19.         android:id=“@+id/pull_to_refresh_loadmore_text”
  20.         android:layout_width=“fill_parent”
  21.         android:layout_height=“wrap_content”
  22.         android:layout_gravity=“center”
  23.         android:gravity=“center”
  24.         android:paddingTop=“5dip”
  25.         android:text=“@string/load”
  26.         android:textAppearance=“?android:attr/textAppearanceMedium”
  27.         android:textColor=“@android:color/darker_gray”
  28.         android:textSize=“14sp”
  29.         android:textStyle=“bold” />
  30. </RelativeLayout>

使用示例

refresh.xml布局文件:
  1. <?xml version=“1.0” encoding=“utf-8”?>
  2. <myview.RefreshLayout xmlns:android=“http://schemas.android.com/apk/res/android”
  3.     android:id=“@+id/swipe_layout”
  4.     android:layout_width=“match_parent”
  5.     android:layout_height=“match_parent” >
  6.     <ListView
  7.         android:id=“@+id/listview”
  8.         android:layout_width=“match_parent”
  9.         android:layout_height=“match_parent” >
  10.     </ListView>
  11. </myview.RefreshLayout>

activity中的使用 :

  1. /**
  2.  * @author mrsimple
  3.  */
  4. public class MainActivity extends Activity {
  5.     @Override
  6.     protected void onCreate(Bundle savedInstanceState) {
  7.         super.onCreate(savedInstanceState);
  8.         setContentView(R.layout.refresh);
  9.         // 模拟一些数据
  10.         final List<String> datas = new ArrayList<String>();
  11.         for (int i = 0; i < 20; i++) {
  12.             datas.add(“item – “ + i);
  13.         }
  14.         // 构造适配器
  15.         final BaseAdapter adapter = new ArrayAdapter<String>(this,
  16.                 android.R.layout.simple_list_item_1,
  17.                 datas);
  18.         // 获取listview实例
  19.         ListView listView = (ListView) findViewById(R.id.listview);
  20.         listView.setAdapter(adapter);
  21.         // 获取RefreshLayout实例
  22.         final RefreshLayout myRefreshListView = (RefreshLayout)
  23.                 findViewById(R.id.swipe_layout);
  24.         // 设置下拉刷新时的颜色值,颜色值需要定义在xml中
  25.         myRefreshListView
  26.                 .setColorScheme(R.color.umeng_comm_text_topic_light_color,
  27.                         R.color.umeng_comm_yellow, R.color.umeng_comm_green,
  28.                         R.color.umeng_comm_linked_text);
  29.         // 设置下拉刷新监听器
  30.         myRefreshListView.setOnRefreshListener(new OnRefreshListener() {
  31.             @Override
  32.             public void onRefresh() {
  33.                 Toast.makeText(MainActivity.this“refresh”, Toast.LENGTH_SHORT).show();
  34.                 myRefreshListView.postDelayed(new Runnable() {
  35.                     @Override
  36.                     public void run() {
  37.                         // 更新数据
  38.                         datas.add(new Date().toGMTString());
  39.                         adapter.notifyDataSetChanged();
  40.                         // 更新完后调用该方法结束刷新
  41.                         myRefreshListView.setRefreshing(false);
  42.                     }
  43.                 }, 1000);
  44.             }
  45.         });
  46.         // 加载监听器
  47.         myRefreshListView.setOnLoadListener(new OnLoadListener() {
  48.             @Override
  49.             public void onLoad() {
  50.                 Toast.makeText(MainActivity.this“load”, Toast.LENGTH_SHORT).show();
  51.                 myRefreshListView.postDelayed(new Runnable() {
  52.                     @Override
  53.                     public void run() {
  54.                         datas.add(new Date().toGMTString());
  55.                         adapter.notifyDataSetChanged();
  56.                         // 加载完后调用该方法
  57.                         myRefreshListView.setLoading(false);
  58.                     }
  59.                 }, 1500);
  60.             }
  61.         });
  62.     }
  63.     }

效果图

github链接 : 下拉刷新库
示例在android_my_pull_demo工程中,进入demo后点击最后一个按钮查看效果即可。注意,在刷新和加载时,需要有一定的延时才能看到效果,这里我们用postDelay来模拟网络请求等延时操作,否则将看不到加载效果。

天边的星星