listView下拉刷新(仿sina微博Android客户端效果)

最新推荐文章于 2018-06-15 13:55:00 发布
最新推荐文章于 2018-06-15 13:55:00 发布
阅读量2.7w 收藏 39
点赞数 20
分类专栏： android小例子 Android小例子 文章标签： android header listview scroll 新浪微博
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lilu_leo/article/details/7325383
版权

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


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


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



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


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


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

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

// 状态
    private static final int TAP_TO_REFRESH = 1;//点击刷新
    private static final int PULL_TO_REFRESH = 2;  //拉动刷新 
    private static final int RELEASE_TO_REFRESH = 3; //释放刷新
    private static final int REFRESHING = 4;  //正在刷新
    // 当前滑动状态
    private int mCurrentScrollState;
    // 当前刷新状态 
    private int mRefreshState;
    //头视图的高度
    private int mRefreshViewHeight;
    //头视图 原始的top padding 属性值
    private int mRefreshOriginalTopPadding;
    private int mLastMotionY;
    // 监听对listview的滑动动作
    private OnRefreshListener mOnRefreshListener;
    //箭头图片
    private static  int REFRESHICON = R.drawable.goicon;    
    //listview 滚动监听器
    private OnScrollListener mOnScrollListener;
    private LayoutInflater mInflater;
    private RelativeLayout mRefreshView;
    //顶部刷新时出现的控件
    private TextView mRefreshViewText;
    private ImageView mRefreshViewImage;
    private ProgressBar mRefreshViewProgress;
    private TextView mRefreshViewLastUpdated;
    // 箭头动画效果
    //变为向下的箭头
    private RotateAnimation mFlipAnimation;
    //变为逆向的箭头
    private RotateAnimation mReverseFlipAnimation;
    //是否反弹
    private boolean mBounceHack;
看下点击刷新的代码过程：

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

private void init(Context context) {
        // Load all of the animations we need in code rather than through XML  	
        mFlipAnimation = new RotateAnimation(0, -180,RotateAnimation.RELATIVE_TO_SELF, 
        		0.5f,RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        mFlipAnimation.setInterpolator(new LinearInterpolator());
        mFlipAnimation.setDuration(250);
        mFlipAnimation.setFillAfter(true);
                     
        mReverseFlipAnimation = new RotateAnimation(-180, 0,RotateAnimation.RELATIVE_TO_SELF, 0.5f,RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        mReverseFlipAnimation.setInterpolator(new LinearInterpolator());
        mReverseFlipAnimation.setDuration(250);
        mReverseFlipAnimation.setFillAfter(true);

        mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		mRefreshView = (RelativeLayout) mInflater.inflate(R.layout.pull_to_refresh_header, this, false);
		mRefreshViewText =(TextView) mRefreshView.findViewById(R.id.pull_to_refresh_text);
        mRefreshViewImage =(ImageView) mRefreshView.findViewById(R.id.pull_to_refresh_image);
        mRefreshViewProgress =(ProgressBar) mRefreshView.findViewById(R.id.pull_to_refresh_progress);
        mRefreshViewLastUpdated =(TextView) mRefreshView.findViewById(R.id.pull_to_refresh_updated_at);

        mRefreshViewImage.setMinimumHeight(50);
        mRefreshView.setOnClickListener(new OnClickRefreshListener());
        mRefreshOriginalTopPadding = mRefreshView.getPaddingTop();
        mRefreshState = TAP_TO_REFRESH;
        //为listview头部增加一个view  
        addHeaderView(mRefreshView);
        super.setOnScrollListener(this);
        measureView(mRefreshView);
        mRefreshViewHeight = mRefreshView.getMeasuredHeight();  
    }


我们看到，mRefreshView控件既是listview用于刷新的头控件，这里它设置了监听事件： 
mRefreshView.setOnClickListener(new OnClickRefreshListener());

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

private class OnClickRefreshListener implements OnClickListener {
        @Override
        public void onClick(View v) {
            if (mRefreshState != REFRESHING) {
                prepareForRefresh();  
                onRefresh(); 
            }
        }
    }

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

public void prepareForRefresh() {
        resetHeaderPadding();   // 恢复header的边距 
        mRefreshViewImage.setVisibility(View.GONE);
        // We need this hack, otherwise it will keep the previous drawable.
        // 注意加上，否则仍然显示之前的图片  
        mRefreshViewImage.setImageDrawable(null);
        mRefreshViewProgress.setVisibility(View.VISIBLE);
        // Set refresh view text to the refreshing label
       mRefreshViewText.setText(R.string.pull_to_refresh_refreshing_label);
        mRefreshState = REFRESHING;
    }
    public void onRefresh() {
        if (mOnRefreshListener != null) {
            mOnRefreshListener.onRefresh();
        }
    }

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

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

/** 
     * Sets the header padding back to original size.
     * 将head的边距重置为初始的数值 
     */ 
    private void resetHeaderPadding() {
        mRefreshView.setPadding(
                mRefreshView.getPaddingLeft(),
                mRefreshOriginalTopPadding,
                mRefreshView.getPaddingRight(),
                mRefreshView.getPaddingBottom());
    }

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

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

@Override
    public boolean onTouchEvent(MotionEvent event) {
    	//当前手指的Y值
        final int y = (int) event.getY();
        mBounceHack = false;   
        switch (event.getAction()) {
            case MotionEvent.ACTION_UP:
            	//将垂直滚动条设置为可用状态
                if (!isVerticalScrollBarEnabled()) {
                    setVerticalScrollBarEnabled(true);
                }
                if (getFirstVisiblePosition() == 0 && mRefreshState != REFRESHING) {
                	// 拖动距离达到刷新需要
                    if ((mRefreshView.getBottom() >= mRefreshViewHeight
                            || mRefreshView.getTop() >= 0)
                            && mRefreshState == RELEASE_TO_REFRESH) {  
                    	// 把状态设置为正在刷新
                        // Initiate the refresh
                        mRefreshState = REFRESHING; //将标量设置为，正在刷新
                        // 准备刷新
                        prepareForRefresh();  
                        // 刷新  
                        onRefresh();  
                    } else if (mRefreshView.getBottom() < mRefreshViewHeight
                            || mRefreshView.getTop() <= 0) {
                        // Abort refresh and scroll down below the refresh view
                    	//停止刷新，并且滚动到头部刷新视图的下一个视图
                        resetHeader();
                        setSelection(1); //定位在第二个列表项
                    }
                }
                break;
            case MotionEvent.ACTION_DOWN:
            	// 获得按下y轴位置 
                mLastMotionY = y;  
                break;            
            case MotionEvent.ACTION_MOVE:
            	//更行头视图的toppadding 属性
                applyHeaderPadding(event);
                break;
        }
        return super.onTouchEvent(event);
    }

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

// 获得header距离 
    private void applyHeaderPadding(MotionEvent ev) {
    	//获取累积的动作数
        int pointerCount = ev.getHistorySize();
        for (int p = 0; p < pointerCount; p++) {
        	//如果是释放将要刷新状态
            if (mRefreshState == RELEASE_TO_REFRESH) {   
                if (isVerticalFadingEdgeEnabled()) {   
                    setVerticalScrollBarEnabled(false);
                }
                //历史累积的高度
                int historicalY = (int) ev.getHistoricalY(p);
                // Calculate the padding to apply, we divide by 1.7 to
                // simulate a more resistant effect during pull.
                // 计算申请的边距，除以1.7使得拉动效果更好
                int topPadding = (int) (((historicalY - mLastMotionY)- mRefreshViewHeight) / 1.7);
                mRefreshView.setPadding(
                        mRefreshView.getPaddingLeft(),
                        topPadding,
                        mRefreshView.getPaddingRight(),
                        mRefreshView.getPaddingBottom());
            }
        }
    }

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

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

case MotionEvent.ACTION_UP:
            	//将垂直滚动条设置为可用状态
                if (!isVerticalScrollBarEnabled()) {
                    setVerticalScrollBarEnabled(true);
                }
                if (getFirstVisiblePosition() == 0 && mRefreshState != REFRESHING) {
                	// 拖动距离达到刷新需要
                    if ((mRefreshView.getBottom() >= mRefreshViewHeight
                            || mRefreshView.getTop() >= 0)
                            && mRefreshState == RELEASE_TO_REFRESH) {  
                    	// 把状态设置为正在刷新
                        // Initiate the refresh
                        mRefreshState = REFRESHING; //将标量设置为：正在刷新
                        // 准备刷新
                        prepareForRefresh();  
                        // 刷新  
                        onRefresh();  
                    } else if (mRefreshView.getBottom() < mRefreshViewHeight
                            || mRefreshView.getTop() <= 0) {
                        // Abort refresh and scroll down below the refresh view
                    	//停止刷新，并且滚动到头部刷新视图的下一个视图
                        resetHeader();
                        setSelection(1); //定位在第二个列表项
                    }
                }
                break;

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

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

@Override
    public void onScroll(AbsListView view, int firstVisibleItem,int visibleItemCount, int totalItemCount) {
        // When the refresh view is completely visible, change the text to say
        // "Release to refresh..." and flip the arrow drawable.
    	// 在refreshview完全可见时，设置文字为松开刷新，同时翻转箭头 
    	//如果是接触滚动状态,并且不是正在刷新的状态
        if (mCurrentScrollState == SCROLL_STATE_TOUCH_SCROLL&& mRefreshState != REFRESHING) {
            if (firstVisibleItem == 0) {  
            	//如果显示出来了第一个列表项，显示刷新图片
                mRefreshViewImage.setVisibility(View.VISIBLE);
                //如果下拉了listiview,则显示上拉刷新动画
                if ((mRefreshView.getBottom() >= mRefreshViewHeight + 20|| mRefreshView.getTop() >= 0)
                        && mRefreshState != RELEASE_TO_REFRESH) { 
                    mRefreshViewText.setText(R.string.pull_to_refresh_release_label);
                    mRefreshViewImage.clearAnimation();
                    mRefreshViewImage.startAnimation(mFlipAnimation);
                    mRefreshState = RELEASE_TO_REFRESH;   
                  //如果下拉距离不够，则回归原来的状态
                } else if (mRefreshView.getBottom() < mRefreshViewHeight + 20
                        && mRefreshState != PULL_TO_REFRESH) {    
                    mRefreshViewText.setText(R.string.pull_to_refresh_pull_label);
                    if (mRefreshState != TAP_TO_REFRESH) {
                        mRefreshViewImage.clearAnimation();
                        mRefreshViewImage.startAnimation(mReverseFlipAnimation);
                    }
                    mRefreshState = PULL_TO_REFRESH;
                }
            } else {   
                mRefreshViewImage.setVisibility(View.GONE);  
                resetHeader();   
            }
          //如果是滚动状态+ 第一个视图已经显示+ 不是刷新状态
        } else if (mCurrentScrollState == SCROLL_STATE_FLING  && firstVisibleItem == 0
                && mRefreshState != REFRESHING) {
            setSelection(1);
            mBounceHack = true;   
        } else if (mBounceHack && mCurrentScrollState == SCROLL_STATE_FLING) {
            setSelection(1);       
        }
        if (mOnScrollListener != null) {
            mOnScrollListener.onScroll(view, firstVisibleItem,visibleItemCount, totalItemCount);
        }
    }

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

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

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

/** 
     * Resets the header to the original state.
     * 重置header为之前的状态 
     */ 
    private void resetHeader() {
        if (mRefreshState != TAP_TO_REFRESH) {
            mRefreshState = TAP_TO_REFRESH; 
            resetHeaderPadding();
            // 将刷新图标换成箭头 
            // Set refresh view text to the pull label
            mRefreshViewText.setText(R.string.pull_to_refresh_tap_label);
            // Replace refresh drawable with arrow drawable
            // 清除动画 
            mRefreshViewImage.setImageResource(REFRESHICON);
            // Clear the full rotation animation
            mRefreshViewImage.clearAnimation();
            // Hide progress bar and arrow.
            // 隐藏图标和进度条 
            mRefreshViewImage.setVisibility(View.GONE);
            mRefreshViewProgress.setVisibility(View.GONE);
        }
    }

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

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

/** 
     * Resets the list to a normal state after a refresh.
     * 重置listview为普通的listview
     * @param lastUpdated 
     * Last updated at. 
     */  
    
    public void onRefreshComplete(CharSequence lastUpdated) {
        setLastUpdated(lastUpdated);
        onRefreshComplete(); 
    }
    /** 
     * Resets the list to a normal state after a refresh.
     * 重置listview为普通的listview，
     */
    public void onRefreshComplete() {        
        resetHeader();
        // If refresh view is visible when loading completes, scroll down to
        // the next item.
        if (mRefreshView.getBottom() > 0) {
            invalidateViews();  //重绘视图
            setSelection(1);
        }
    }
重新绘制listivew,然后setSelection(1)。完成!

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

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



傲慢的上校
关注
  • 20
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 33
    评论
专栏目录
仿新浪微博下拉刷新android实例
10-28
仿新浪微博下拉刷新android实例，pulltorefresh源码
Android 下拉刷新框架实现
热门推荐
永远即等待的专栏
10-13 13万+
一个通用的下拉刷新的框架介绍。 前段时间项目中用到了下拉刷新功能，之前在网上也找到过类似的demo，但这些demo的质量参差不齐，用户体验也不好，接口设计也不行。最张没办法，终于忍不了了，自己就写了一个下拉刷新的框架，这个框架是一个通用的框架，效果和设计感觉都还不错，现在分享给各位看官。
高仿新浪微博Android下拉刷新自动加载更多
03-17
Android下拉刷新自动加载更多
Android自定义控制(五)仿新浪微博的下拉刷新
xyjikl
05-29 540
网上有很多很有名的开源框架,这里就来拉拉PullToRefresh这个框架,也就是我们平时用的下拉刷新啦,当然你问我这个有什么用啊?别人已经写好了,这里主要是学习以及练习,练习的次数多了,一切就顺其自然的会了. 废话少说,先上图,再上代码: 1.要想实现下拉刷新功能必须要有个下拉刷新的布局,是吧? [html] view plaincopy
android listview 下拉刷新 上拉翻页 仿新浪微博客户端
06-05
android listview 下拉刷新 上拉翻页 仿新浪微博客户端 完美的demo
android activity选项卡 listview 下拉刷新 仿新浪微博
06-05
android activity选项卡 listview 下拉刷新 仿新浪微博 提供现成demo
Android仿新浪微博自定义ListView下拉刷新(4)
09-01
主要为大家详细介绍了Android仿新浪微博自定义ListView下拉刷新，重点介绍了Adapter的详细代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
android开发教程之实现listview下拉刷新和上拉刷新效果
09-04
主要介绍了android实现listview下拉刷新和上拉刷新效果,Android的ListView上拉下拉刷新，原理都一样，在Touch事件中操作header/footer的paddingTop属性，需要的朋友可以参考下
仿新浪微博下拉加载更多数据瀑布流效果
01-13
简单的模仿了新浪微博下拉页面到底部加载更多数据的瀑布流效果，用List做模拟数据源，做的非常简单，仅供学习参考。
Android新浪微博下拉刷新
BobbyCool的专栏
01-21 829
查看最新消息要用到类似新浪微博下拉刷新，想必这个功能很多的朋友都会使用吧，下面与大家分享下具体的实现方法，感兴趣的朋友可以参考下哈 查看最新消息要用到类似新浪微博下拉刷新 功能！把最新的消息显示在最上面！ 代码如下： PullToRefreshListView类代码 复制代码 代码如下: package com.markupartist.android.widg
仿新浪微博 ListView ListGridScroll下拉刷新 下拉加载
11-12
ListView ListGridScroll下拉刷新 下拉加载 代码可直接运行
Android下拉刷新列表（仿新浪微博，采用FrameLayout布局）
05-07
高仿新浪微博，采用FrameLayout布局的形式来实现下拉刷新。 在原程序的基础上添加了下拉刷新后listview列表内容的更新，更好的模拟刷新后的效果。 程序已在模拟器中测试通过，且效果很好。
仿新浪微博的ListView下拉更新功能
hududumo
04-15 89
由于最近做的项目中也用到了这个功能，今天刚好实现了下，就趁现在有时间写篇博客分享下。在做的时候也参考了下别人的代码，毕竟站在巨人的肩膀上才会是自己更加强大。哈哈！先看看新浪的下拉更新是什么样的吧！ OK，今天我们要实现的就是上面的下拉刷新功能。 首先实现下拉刷新的布局文件 layout/head.xml &lt;?xml version="1.0" encoding="utf...
Android 下拉刷新仿微博刷新展示
看美丽风晴
06-15 1403
见了很多刷新的控件，有很多都不靠谱，会有这样或者那样的Bug，用自定义view实现了仿微博的下拉刷新，用了很长时间没发现bug，流畅度很好和刷新样式很漂亮
android5.0效果的下拉刷新、上拉加载，可滚动置顶
qq_18741469的博客
05-17 3301
最近忙完了公司项目，花点时间来写写博客，跟大家分享一下android开发中必不可少的下拉刷新、上拉加载功能。很多APP都有这样的效果：列表向上滚动一定条目的数据时，在右下角出现一个返回顶部的图片，点击可置顶，在数据量大的时候就不用做死地滚回去了，这样的体验是不是很人性化呢，在本列中我也顺便实现了这个功能，从头到尾都是自己敲的代码哦，没有用到第三房依赖库，关键是代码简洁，有利于修改和维护。哈哈，不多
微博界面下拉刷新原理
captain
10-15 3385
原理：检测scrollView的contextOffset,偏移量达到临界值，进入刷新状态， 使用KVO监听偏移量的变化      1、进入刷新状态，发起网络请求，请求新的数据     RefreshHeaderView *refreshH = [[RefreshHeaderView alloc] init];          refreshH.scroll = self.table
Android实现微博下拉刷新上拉加载更多功能
wwwjiandan的专栏
02-12 1774
今天要做一个类似微博列表的功能,主要是实现下拉可以获取更多新内容，上拉获取更早的内容，在网上看了一些资料，比较靠谱的是github上的 PushtoRefresh项目,可以直接作为类库项目引入到自己的项目中，但是看到网上的文章大部分都是用了其中的单独下拉的功能而没有使用上拉加载更早的内容的功能，终于看到一篇文章一语惊醒梦中人，文章链接是http://blog.csdn.net/flybywind/
android倒计时功能的实现(CountDownTimer）
傲慢的上校的专栏
11-06 6万+
在逛论坛的时候，看到一个网友提问，说到了CountDownTimer这个类，从名字上面大家就可以看出来，记录下载时间。将后台线程的创建和Handler队列封装成一个方便的类调用。     查看了一下官方文档，这个类及其简单，只有四个方法，上面都涉及到了onTick，onFinsh、cancel和start。其中前面两个是抽象方法，所以要重写一下。          下面是官方给的一个小例子： ne
android listview下拉刷新
最新发布
05-17
在 Android 中，可以使用 SwipeRefreshLayout 来实现 ListView 的下拉刷新功能。下面是一个简单的示例代码： 1. 首先，在 XML 布局文件中添加 SwipeRefreshLayout 和 ListView： ``` <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/swipe_container" android:layout_width="match_parent" android:layout_height="match_parent"> <ListView android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="match_parent"/> </android.support.v4.widget.SwipeRefreshLayout> ``` 2. 在 Java 代码中，初始化 SwipeRefreshLayout 和 ListView，并设置下拉刷新的监听器： ``` SwipeRefreshLayout swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_container); swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() { @Override public void onRefresh() { // 执行下拉刷新的操作 // ... // 刷新完成后，调用 setRefreshing(false) 隐藏刷新进度条 swipeRefreshLayout.setRefreshing(false); } }); ListView listView = (ListView) findViewById(R.id.listview); // 设置 ListView 的适配器和数据 // ... ``` 在 onRefresh() 方法中，可以执行下拉刷新的操作，例如重新从服务器获取数据等等。刷新完成后，需要调用 setRefreshing(false) 方法来隐藏刷新进度条。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 33
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值