zoukankan      html  css  js  c++  java

  • listView下拉刷新加载数据

             这个下拉效果在网上最早的例子恐怕就是Johan Nilsson的实现，http://johannilsson.com/2011/03/13/android-pull-to-refresh-update.html。

     

    如果这篇文章对您有用，劳烦几秒钟帮忙投下票：http://vote.blog.csdn.net/item/blogstar/aomandeshangxiao，Csdn 2012博客之星投票，谢谢！！！

     

            后面的很多例子应该都是仿照这个写的，下面的这个例子就是对这个例子的修改，先看下一个点击的效果，我看到其他的分析博客里面没有谈到这一点，在这个代码中，我们一直看到是listview的第二项，而listview的第一项被遮挡了起来，滑动至第一项：


           点击头条，头条会变成以下：


     

    然后，过一段时间，刷新完成以后，listview又setSelection(1),增加一条数据，同时，把顶部给遮挡住：


    这是点击刷新，然后是下拉刷新：


            最后结果和点击刷新相同。那现在开始看下代码：

            首先看下所用到的控件和变量：

    [java] view plaincopy
     
    1. // 状态  
    2.     private static final int TAP_TO_REFRESH = 1;//点击刷新  
    3.     private static final int PULL_TO_REFRESH = 2;  //拉动刷新   
    4.     private static final int RELEASE_TO_REFRESH = 3; //释放刷新  
    5.     private static final int REFRESHING = 4;  //正在刷新  
    6.     // 当前滑动状态  
    7.     private int mCurrentScrollState;  
    8.     // 当前刷新状态   
    9.     private int mRefreshState;  
    10.     //头视图的高度  
    11.     private int mRefreshViewHeight;  
    12.     //头视图 原始的top padding 属性值  
    13.     private int mRefreshOriginalTopPadding;  
    14.     private int mLastMotionY;  
    15.     // 监听对listview的滑动动作  
    16.     private OnRefreshListener mOnRefreshListener;  
    17.     //箭头图片  
    18.     private static  int REFRESHICON = R.drawable.goicon;      
    19.     //listview 滚动监听器  
    20.     private OnScrollListener mOnScrollListener;  
    21.     private LayoutInflater mInflater;  
    22.     private RelativeLayout mRefreshView;  
    23.     //顶部刷新时出现的控件  
    24.     private TextView mRefreshViewText;  
    25.     private ImageView mRefreshViewImage;  
    26.     private ProgressBar mRefreshViewProgress;  
    27.     private TextView mRefreshViewLastUpdated;  
    28.     // 箭头动画效果  
    29.     //变为向下的箭头  
    30.     private RotateAnimation mFlipAnimation;  
    31.     //变为逆向的箭头  
    32.     private RotateAnimation mReverseFlipAnimation;  
    33.     //是否反弹  
    34.     private boolean mBounceHack;  

    看下点击刷新的代码过程：

    在init()方法中初始化各个控件及设置监听：

    [java] view plaincopy
     
    1. private void init(Context context) {  
    2.         // Load all of the animations we need in code rather than through XML     
    3.         mFlipAnimation = new RotateAnimation(0, -180,RotateAnimation.RELATIVE_TO_SELF,   
    4.                 0.5f,RotateAnimation.RELATIVE_TO_SELF, 0.5f);  
    5.         mFlipAnimation.setInterpolator(new LinearInterpolator());  
    6.         mFlipAnimation.setDuration(250);  
    7.         mFlipAnimation.setFillAfter(true);  
    8.                        
    9.         mReverseFlipAnimation = new RotateAnimation(-180, 0,RotateAnimation.RELATIVE_TO_SELF, 0.5f,RotateAnimation.RELATIVE_TO_SELF, 0.5f);  
    10.         mReverseFlipAnimation.setInterpolator(new LinearInterpolator());  
    11.         mReverseFlipAnimation.setDuration(250);  
    12.         mReverseFlipAnimation.setFillAfter(true);  
    13.   
    14.         mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
    15.         mRefreshView = (RelativeLayout) mInflater.inflate(R.layout.pull_to_refresh_header, this, false);  
    16.         mRefreshViewText =(TextView) mRefreshView.findViewById(R.id.pull_to_refresh_text);  
    17.         mRefreshViewImage =(ImageView) mRefreshView.findViewById(R.id.pull_to_refresh_image);  
    18.         mRefreshViewProgress =(ProgressBar) mRefreshView.findViewById(R.id.pull_to_refresh_progress);  
    19.         mRefreshViewLastUpdated =(TextView) mRefreshView.findViewById(R.id.pull_to_refresh_updated_at);  
    20.   
    21.         mRefreshViewImage.setMinimumHeight(50);  
    22.         mRefreshView.setOnClickListener(new OnClickRefreshListener());  
    23.         mRefreshOriginalTopPadding = mRefreshView.getPaddingTop();  
    24.         mRefreshState = TAP_TO_REFRESH;  
    25.         //为listview头部增加一个view    
    26.         addHeaderView(mRefreshView);  
    27.         super.setOnScrollListener(this);  
    28.         measureView(mRefreshView);  
    29.         mRefreshViewHeight = mRefreshView.getMeasuredHeight();    
    30.     }  

     

    我们看到，mRefreshView控件既是listview用于刷新的头控件，这里它设置了监听事件：

    [java] view plaincopy
     
    1. mRefreshView.setOnClickListener(new OnClickRefreshListener());  


    我们再来看下监听事件的定义：

    [java] view plaincopy
     
    1. private class OnClickRefreshListener implements OnClickListener {  
    2.         @Override  
    3.         public void onClick(View v) {  
    4.             if (mRefreshState != REFRESHING) {  
    5.                 prepareForRefresh();    
    6.                 onRefresh();   
    7.             }  
    8.         }  
    9.     }  


    调用了preparForRefresh()（准备刷新）和onRefresh()（刷新）两个方法，然后在查看这两个方法的定义：

    [java] view plaincopy
     
    1. public void prepareForRefresh() {  
    2.         resetHeaderPadding();   // 恢复header的边距   
    3.         mRefreshViewImage.setVisibility(View.GONE);  
    4.         // We need this hack, otherwise it will keep the previous drawable.  
    5.         // 注意加上，否则仍然显示之前的图片    
    6.         mRefreshViewImage.setImageDrawable(null);  
    7.         mRefreshViewProgress.setVisibility(View.VISIBLE);  
    8.         // Set refresh view text to the refreshing label  
    9.        mRefreshViewText.setText(R.string.pull_to_refresh_refreshing_label);  
    10.         mRefreshState = REFRESHING;  
    11.     }  
    12.     public void onRefresh() {  
    13.         if (mOnRefreshListener != null) {  
    14.             mOnRefreshListener.onRefresh();  
    15.         }  
    16.     }  


    其中，后者还是回调方法。

    我们看下preparForRefresh()方法中，引用了resetHeadPadding()方法：

    [java] view plaincopy
     
    1. /**  
    2.      * Sets the header padding back to original size. 
    3.      * 将head的边距重置为初始的数值  
    4.      */   
    5.     private void resetHeaderPadding() {  
    6.         mRefreshView.setPadding(  
    7.                 mRefreshView.getPaddingLeft(),  
    8.                 mRefreshOriginalTopPadding,  
    9.                 mRefreshView.getPaddingRight(),  
    10.                 mRefreshView.getPaddingBottom());  
    11.     }      


    从新设置下header距上下左右的距离。

    最重要的方法应该是：onScroll()和onTouchEvent()方法，先看下onTouchEvent()方法：

    [java] view plaincopy
     
    1. @Override  
    2.     public boolean onTouchEvent(MotionEvent event) {  
    3.         //当前手指的Y值  
    4.         final int y = (int) event.getY();  
    5.         mBounceHack = false;     
    6.         switch (event.getAction()) {  
    7.             case MotionEvent.ACTION_UP:  
    8.                 //将垂直滚动条设置为可用状态  
    9.                 if (!isVerticalScrollBarEnabled()) {  
    10.                     setVerticalScrollBarEnabled(true);  
    11.                 }  
    12.                 if (getFirstVisiblePosition() == 0 && mRefreshState != REFRESHING) {  
    13.                     // 拖动距离达到刷新需要  
    14.                     if ((mRefreshView.getBottom() >= mRefreshViewHeight  
    15.                             || mRefreshView.getTop() >= 0)  
    16.                             && mRefreshState == RELEASE_TO_REFRESH) {    
    17.                         // 把状态设置为正在刷新  
    18.                         // Initiate the refresh  
    19.                         mRefreshState = REFRESHING; //将标量设置为，正在刷新  
    20.                         // 准备刷新  
    21.                         prepareForRefresh();    
    22.                         // 刷新    
    23.                         onRefresh();    
    24.                     } else if (mRefreshView.getBottom() < mRefreshViewHeight  
    25.                             || mRefreshView.getTop() <= 0) {  
    26.                         // Abort refresh and scroll down below the refresh view  
    27.                         //停止刷新，并且滚动到头部刷新视图的下一个视图  
    28.                         resetHeader();  
    29.                         setSelection(1); //定位在第二个列表项  
    30.                     }  
    31.                 }  
    32.                 break;  
    33.             case MotionEvent.ACTION_DOWN:  
    34.                 // 获得按下y轴位置   
    35.                 mLastMotionY = y;    
    36.                 break;              
    37.             case MotionEvent.ACTION_MOVE:  
    38.                 //更行头视图的toppadding 属性  
    39.                 applyHeaderPadding(event);  
    40.                 break;  
    41.         }  
    42.         return super.onTouchEvent(event);  
    43.     }  


    当按下的时候，记录按下y轴的位置，然后在move中调用了applyHeaderPadding()方法，我们再看下这个方法：

    [java] view plaincopy
     
    1. // 获得header距离   
    2.     private void applyHeaderPadding(MotionEvent ev) {  
    3.         //获取累积的动作数  
    4.         int pointerCount = ev.getHistorySize();  
    5.         for (int p = 0; p < pointerCount; p++) {  
    6.             //如果是释放将要刷新状态  
    7.             if (mRefreshState == RELEASE_TO_REFRESH) {     
    8.                 if (isVerticalFadingEdgeEnabled()) {     
    9.                     setVerticalScrollBarEnabled(false);  
    10.                 }  
    11.                 //历史累积的高度  
    12.                 int historicalY = (int) ev.getHistoricalY(p);  
    13.                 // Calculate the padding to apply, we divide by 1.7 to  
    14.                 // simulate a more resistant effect during pull.  
    15.                 // 计算申请的边距，除以1.7使得拉动效果更好  
    16.                 int topPadding = (int) (((historicalY - mLastMotionY)- mRefreshViewHeight) / 1.7);  
    17.                 mRefreshView.setPadding(  
    18.                         mRefreshView.getPaddingLeft(),  
    19.                         topPadding,  
    20.                         mRefreshView.getPaddingRight(),  
    21.                         mRefreshView.getPaddingBottom());  
    22.             }  
    23.         }  
    24.     }  


    通过记录滑动距离，实时变化头部mRefreshView的上下左右的距离。

    最后，看下手指松开的ACTION_UP：

    [java] view plaincopy
     
    1. case MotionEvent.ACTION_UP:  
    2.                 //将垂直滚动条设置为可用状态  
    3.                 if (!isVerticalScrollBarEnabled()) {  
    4.                     setVerticalScrollBarEnabled(true);  
    5.                 }  
    6.                 if (getFirstVisiblePosition() == 0 && mRefreshState != REFRESHING) {  
    7.                     // 拖动距离达到刷新需要  
    8.                     if ((mRefreshView.getBottom() >= mRefreshViewHeight  
    9.                             || mRefreshView.getTop() >= 0)  
    10.                             && mRefreshState == RELEASE_TO_REFRESH) {    
    11.                         // 把状态设置为正在刷新  
    12.                         // Initiate the refresh  
    13.                         mRefreshState = REFRESHING; //将标量设置为：正在刷新  
    14.                         // 准备刷新  
    15.                         prepareForRefresh();    
    16.                         // 刷新    
    17.                         onRefresh();    
    18.                     } else if (mRefreshView.getBottom() < mRefreshViewHeight  
    19.                             || mRefreshView.getTop() <= 0) {  
    20.                         // Abort refresh and scroll down below the refresh view  
    21.                         //停止刷新，并且滚动到头部刷新视图的下一个视图  
    22.                         resetHeader();  
    23.                         setSelection(1); //定位在第二个列表项  
    24.                     }  
    25.                 }  
    26.                 break;  


    当滑动距离大于一个item的距离时，添加一个item，否则，弹回。

    看完onTouchEvent()，然后再看一下onScroll()方法：

    [java] view plaincopy
     
    1. @Override  
    2.     public void onScroll(AbsListView view, int firstVisibleItem,int visibleItemCount, int totalItemCount) {  
    3.         // When the refresh view is completely visible, change the text to say  
    4.         // "Release to refresh..." and flip the arrow drawable.  
    5.         // 在refreshview完全可见时，设置文字为松开刷新，同时翻转箭头   
    6.         //如果是接触滚动状态,并且不是正在刷新的状态  
    7.         if (mCurrentScrollState == SCROLL_STATE_TOUCH_SCROLL&& mRefreshState != REFRESHING) {  
    8.             if (firstVisibleItem == 0) {    
    9.                 //如果显示出来了第一个列表项，显示刷新图片  
    10.                 mRefreshViewImage.setVisibility(View.VISIBLE);  
    11.                 //如果下拉了listiview,则显示上拉刷新动画  
    12.                 if ((mRefreshView.getBottom() >= mRefreshViewHeight + 20|| mRefreshView.getTop() >= 0)  
    13.                         && mRefreshState != RELEASE_TO_REFRESH) {   
    14.                     mRefreshViewText.setText(R.string.pull_to_refresh_release_label);  
    15.                     mRefreshViewImage.clearAnimation();  
    16.                     mRefreshViewImage.startAnimation(mFlipAnimation);  
    17.                     mRefreshState = RELEASE_TO_REFRESH;     
    18.                   //如果下拉距离不够，则回归原来的状态  
    19.                 } else if (mRefreshView.getBottom() < mRefreshViewHeight + 20  
    20.                         && mRefreshState != PULL_TO_REFRESH) {      
    21.                     mRefreshViewText.setText(R.string.pull_to_refresh_pull_label);  
    22.                     if (mRefreshState != TAP_TO_REFRESH) {  
    23.                         mRefreshViewImage.clearAnimation();  
    24.                         mRefreshViewImage.startAnimation(mReverseFlipAnimation);  
    25.                     }  
    26.                     mRefreshState = PULL_TO_REFRESH;  
    27.                 }  
    28.             } else {     
    29.                 mRefreshViewImage.setVisibility(View.GONE);    
    30.                 resetHeader();     
    31.             }  
    32.           //如果是滚动状态+ 第一个视图已经显示+ 不是刷新状态  
    33.         } else if (mCurrentScrollState == SCROLL_STATE_FLING  && firstVisibleItem == 0  
    34.                 && mRefreshState != REFRESHING) {  
    35.             setSelection(1);  
    36.             mBounceHack = true;     
    37.         } else if (mBounceHack && mCurrentScrollState == SCROLL_STATE_FLING) {  
    38.             setSelection(1);         
    39.         }  
    40.         if (mOnScrollListener != null) {  
    41.             mOnScrollListener.onScroll(view, firstVisibleItem,visibleItemCount, totalItemCount);  
    42.         }  
    43.     }  


    该方法是在滑动过程中，各种状况的处理。

           onScroll()方法和onTouchEvent()方法的执行过程应该是，先onTouchEvent()的ACTION_DOWN，然后是ACTION_MOVE和onScroll()方法同时进行，最后是onTouchEvent()的ACTION_UP。也可以自己打log看一下。这样在onTouchEvent()处理header，就是mRefreshView的外部的各个熟悉，onScroll()里面处理header（mRefreshView）里面内部的控件变化，从逻辑上来说比较清晰。

           在onScroll()中，引用方法resetHeader()方法：

    [java] view plaincopy
     
    1. /**  
    2.      * Resets the header to the original state. 
    3.      * 重置header为之前的状态  
    4.      */   
    5.     private void resetHeader() {  
    6.         if (mRefreshState != TAP_TO_REFRESH) {  
    7.             mRefreshState = TAP_TO_REFRESH;   
    8.             resetHeaderPadding();  
    9.             // 将刷新图标换成箭头   
    10.             // Set refresh view text to the pull label  
    11.             mRefreshViewText.setText(R.string.pull_to_refresh_tap_label);  
    12.             // Replace refresh drawable with arrow drawable  
    13.             // 清除动画   
    14.             mRefreshViewImage.setImageResource(REFRESHICON);  
    15.             // Clear the full rotation animation  
    16.             mRefreshViewImage.clearAnimation();  
    17.             // Hide progress bar and arrow.  
    18.             // 隐藏图标和进度条   
    19.             mRefreshViewImage.setVisibility(View.GONE);  
    20.             mRefreshViewProgress.setVisibility(View.GONE);  
    21.         }  
    22.     }  


    resetHead就是header（mRefreshView）的内部的具体操作。

           当一切都完成以后，就可以调用onRefreshComplete()方法：

    [java] view plaincopy
     
    1. /**  
    2.      * Resets the list to a normal state after a refresh. 
    3.      * 重置listview为普通的listview 
    4.      * @param lastUpdated  
    5.      * Last updated at.  
    6.      */    
    7.       
    8.     public void onRefreshComplete(CharSequence lastUpdated) {  
    9.         setLastUpdated(lastUpdated);  
    10.         onRefreshComplete();   
    11.     }  
    12.     /**  
    13.      * Resets the list to a normal state after a refresh. 
    14.      * 重置listview为普通的listview， 
    15.      */  
    16.     public void onRefreshComplete() {          
    17.         resetHeader();  
    18.         // If refresh view is visible when loading completes, scroll down to  
    19.         // the next item.  
    20.         if (mRefreshView.getBottom() > 0) {  
    21.             invalidateViews();  //重绘视图  
    22.             setSelection(1);  
    23.         }  
    24.     }  

    重新绘制listivew,然后setSelection(1)。完成!

          最后是源代码的下载地址：http://download.csdn.net/detail/aomandeshangxiao/4117390

          还有其他两篇相关：listView下拉刷新2，listView滑动刷新代码(分页功能)。

    来源：http://www.bozhiyue.com/anroid/boke/2016/0318/3589.html
  • 相关阅读:
    常用的学生、课程、成绩、教师表的查询
    flutter 自定义TabBar
    Flutter 设置input边框
    Flutter ReorderableListView 可拖拽的列表
    Flutter NotificationListener 监听列表的滚动
    Flutter 使用Tabbar不要Title
    Nestjs 验证对象数组
    postman 发送数组
    JS面向切面编程AOP
    什么是匿名函数、什么是闭包函数?
  • 原文地址：https://www.cnblogs.com/ruiati/p/3325667.html
Copyright © 2011-2022 走看看