Android 下拉刷新框架实现

时间  2019-11-11
标签 android 下拉 刷新 框架 实现 栏目 Android 繁體版
原文   原文链接

前段时间项目中用到了下拉刷新功能，以前在网上也找到过相似的demo，但这些demo的质量良莠不齐，用户体验也很差，接口设计也不行。最张没办法，终于忍不了了，本身就写了一个下拉刷新的框架，这个框架是一个通用的框架，效果和设计感受都还不错，如今分享给各位看官。html

1. 关于下拉刷新

下拉刷新这种用户交互最先由twitter创始人洛伦•布里切特(Loren Brichter)发明，有理论认为，下拉刷新是一种适用于按照重新到旧的时间顺序排列feeds的应用，在这种应用场景中看完旧的内容时，用户会很天然地下拉查找更新的内容，所以下拉刷新就显得很是合理。你们能够参考这篇文章：有趣的下拉刷新，下面我贴出一个有趣的下拉刷新的案例。java

图1、有趣的下拉刷新案例（一）android

图1、有趣的下拉刷新案例（二）
git

2. 实现原理

上面这些例子，外观作得再好看，他的本质上都同样，那就是一个下拉刷新控件一般由如下几部分组成：github

【1】Header框架

Header一般有下拉箭头，文字，进度条等元素，根据下拉的距离来改变它的状态，从而显示不一样的样式ide

【2】Content布局

这部分是内容区域，网上有不少例子都是直接在ListView里面添加Header，但这就有局限性，由于好多状况下并不必定是用ListView来显示数据。咱们把要显示内容的View放置在咱们的一个容器中，若是你想实现一个用ListView显示数据的下拉刷新，你须要建立一个ListView旋转到个人容器中。咱们处理这个容器的事件（down, move, up），若是向下拉，则把整个布局向下滑动，从而把header显示出来。post

【3】Footerui

Footer能够用来显示向上拉的箭头，自动加载更多的进度条等。

以上三部分总结的说来，就是以下图所示的这种布局结构：

图三，下拉刷新的布局结构

关于上图，须要说明几点：

一、这个布局扩展于LinearLayout，垂直排列

二、从上到下的顺序是：Header, Content, Footer

三、Content填充满父控件，经过设置top, bottom的padding来使Header和Footer不可见，也就是让它超出屏幕外

四、下拉时，调用scrollTo方法来将整个布局向下滑动，从而把Header显示出来，上拉正好与下拉相反。

五、派生类须要实现的是：将Content View填充到父容器中，好比，若是你要使用的话，那么你须要把ListView, ScrollView, WebView等添加到容器中。

六、上图中的红色区域就是屏的大小（严格来讲，这里说屏幕大小并不许确，应该说成内容区域更加准确）

3. 具体实现

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

一、IPullToRefresh<T extends View>

它具体的定义方法以下：

public interface IPullToRefresh<T extends View> {
    public void setPullRefreshEnabled(boolean pullRefreshEnabled);
    public void setPullLoadEnabled(boolean pullLoadEnabled);
    public void setScrollLoadEnabled(boolean scrollLoadEnabled);
    public boolean isPullRefreshEnabled();
    public boolean isPullLoadEnabled();
    public boolean isScrollLoadEnabled();
    public void setOnRefreshListener(OnRefreshListener<T> refreshListener);
    public void onPullDownRefreshComplete();
    public void onPullUpRefreshComplete();
    public T getRefreshableView();
    public LoadingLayout getHeaderLoadingLayout();
    public LoadingLayout getFooterLoadingLayout();
    public void setLastUpdatedLabel(CharSequence label);
}

这个接口是一个泛型的，它接受View的派生类，由于要放到咱们的容器中的不就是一个View吗？


二、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会根据状态去显示相应的界面式样。

三、PullToRefreshBase<T extends View>继承关系

这里我实现了三个下拉刷新的派生类，分别是ListView、ScrollView、WebView三个，它们的继承关系以下：

图4、PullToRefreshBase类的继承关系

关于PullToRefreshBase类及其派和类，有几点须要说明：

  • 对于ListView，ScrollView，WebView这三种状况，他们是否滑动到最顶部或是最底部的实现是不同的，因此，在PullToRefreshBase类中须要调用两个抽象方法来判断当前的位置是否在顶部或底部，而其派生类必需要实现这两个方法。好比对于ListView，它滑动到最顶部的条件就是第一个child彻底可见而且first postion是0。这两个抽象方法是：

    /**
     * 判断刷新的View是否滑动到顶部
     * 
     * @return true表示已经滑动到顶部，不然false
     */
    protected abstract boolean isReadyForPullDown();
    
    /**
     * 判断刷新的View是否滑动到底
     * 
     * @return true表示已经滑动到底部，不然false
     */
    protected abstract boolean isReadyForPullUp();

  • 建立可下拉刷新的View（也就是content view）的抽象方法是

    /**
     * 建立能够刷新的View
     * 
     * @param context context
     * @param attrs 属性
     * @return View
     */
    protected abstract T createRefreshableView(Context context, AttributeSet attrs);

四、LoadingLayout

LoadingLayout是刷新Layout的一个抽象，它是一个抽象基类。Header和Footer都扩展于这个类。这类抽象类，提供了两个抽象方法：

  • getContentSize

这个方法返回当前这个刷新Layout的大小，一般返回的是布局的高度，为了之后能够扩展为水平拉动，因此方法名字没有取成getLayoutHeight()之类的，这个返回值，将会做为松手后是否能够刷新的临界值，若是下拉的偏移值大于这个值，就认为能够刷新，不然不刷新，这个方法必须由派生类来实现。

  • setState

这个方法用来设置当前刷新Layout的状态，PullToRefreshBase类会调用这个方法，当进入下拉，松手等动做时，都会调用这个方法，派生类里面只须要根据这些状态实现不一样的界面显示，以下拉状态时，就显示出箭头，刷新状态时，就显示loading的图标。

可能的状态值有：RESET, PULL_TO_REFRESH, RELEASE_TO_REFRESH, REFRESHING, NO_MORE_DATA


LoadingLayout及其派生类的继承关系以下图所示：


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

咱们能够随意地制定本身的Header和Footer，咱们也能够实现如图一和图二中显示的各类下拉刷新案例中的Header和Footer，只要重写上述两个方法getContentSize()和setState()就好了。HeaderLoadingLayout，它默认是显示箭头式样的布局，而RotateLoadingLayout则是显示一个旋转图标的式样。

五、事件处理

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

六、滚动布局(scrollTo)

如图三的布局结构可知，默认状况下Header和Footer是放置在Content View的最上面和最下面，经过设置padding来让他跑到屏幕外面去了，若是咱们将整个布局向下滚动(scrollTo)必定距离，那么Header就会被显示出来，基于这种状况，因此在个人实现中，最终我是调用scrollTo来实现下拉动做的。

总的说来，实现的重要的点就这些，具体的一些细节在实如今会碰到不少，能够参考代码。

4. 如何使用

使用下拉刷新的代码以下

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        mPullListView = new PullToRefreshListView(this);
        setContentView(mPullListView);
        
        // 上拉加载不可用
        mPullListView.setPullLoadEnabled(false);
        // 滚动到底自动加载可用
        mPullListView.setScrollLoadEnabled(true);
        
        mCurIndex = mLoadDataCount;
        mListItems = new LinkedList<String>();
        mListItems.addAll(Arrays.asList(mStrings).subList(0, mCurIndex));
        mAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, mListItems);
        
        // 获得实际的ListView
        mListView = mPullListView.getRefreshableView();
        // 绑定数据
        mListView.setAdapter(mAdapter);       
        // 设置下拉刷新的listener
        mPullListView.setOnRefreshListener(new OnRefreshListener<ListView>() {
            @Override
            public void onPullDownToRefresh(PullToRefreshBase<ListView> refreshView) {
                mIsStart = true;
                new GetDataTask().execute();
            }

            @Override
            public void onPullUpToRefresh(PullToRefreshBase<ListView> refreshView) {
                mIsStart = false;
                new GetDataTask().execute();
            }
        });
        setLastUpdateTime();
        
        // 自动刷新
        mPullListView.doPullRefreshing(true, 500);
    }

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

在下拉刷新完成后，咱们能够调用onPullDownRefreshComplete()和onPullUpRefreshComplete()方法来中止刷新和加载

5. 运行效果

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


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

图7、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方法，修正后的代码以下：

    @Override
    public void setScrollLoadEnabled(boolean scrollLoadEnabled) {
        if (isScrollLoadEnabled() == scrollLoadEnabled) {
            return;
        }
        
        super.setScrollLoadEnabled(scrollLoadEnabled);
        
        if (scrollLoadEnabled) {
            // 设置Footer
            if (null == mLoadMoreFooterLayout) {
                mLoadMoreFooterLayout = new FooterLoadingLayout(getContext());
                mListView.addFooterView(mLoadMoreFooterLayout, null, false);
            }
            
            mLoadMoreFooterLayout.show(true);
        } else {
            if (null != mLoadMoreFooterLayout) {
                mLoadMoreFooterLayout.show(false);
            }
        }
    }

  • LoadingLayout#show方法，修正后的代码以下：

    /**
     * 显示或隐藏这个布局
     * 
     * @param show flag
     */
    public void show(boolean show) {
        // If is showing, do nothing.
        if (show == (View.VISIBLE == getVisibility())) {
            return;
        }
        
        ViewGroup.LayoutParams params = mContainer.getLayoutParams();
        if (null != params) {
            if (show) {
                params.height = ViewGroup.LayoutParams.WRAP_CONTENT;
            } else {
                params.height = 0;
            }
            
            requestLayout();
            setVisibility(show ? View.VISIBLE : View.INVISIBLE);
        }
    }

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

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

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

       onPull的修改以下：

    @Override
    public void onPull(float scale) {
        if (null == mRotationHelper) {
            mRotationHelper = new ImageViewRotationHelper(mArrowImageView);
        }
        
        float angle = scale * 180f; // SUPPRESS CHECKSTYLE
        mRotationHelper.setRotation(angle);
    }

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

/**
     * The image view rotation helper
     * 
     * @author lihong06
     * @since 2014-5-2
     */
    static class ImageViewRotationHelper {
        /** The imageview */
        private final ImageView mImageView;
        /** The matrix */
        private Matrix mMatrix;
        /** Pivot X */
        private float mRotationPivotX;
        /** Pivot Y */
        private float mRotationPivotY;
        
        /**
         * The constructor method.
         * 
         * @param imageView the image view
         */
        public ImageViewRotationHelper(ImageView imageView) {
            mImageView = imageView;
        }
        
        /**
         * Sets the degrees that the view is rotated around the pivot point. Increasing values
         * result in clockwise rotation.
         *
         * @param rotation The degrees of rotation.
         *
         * @see #getRotation()
         * @see #getPivotX()
         * @see #getPivotY()
         * @see #setRotationX(float)
         * @see #setRotationY(float)
         *
         * @attr ref android.R.styleable#View_rotation
         */
        public void setRotation(float rotation) {
            if (APIUtils.hasHoneycomb()) {
                mImageView.setRotation(rotation);
            } else {
                if (null == mMatrix) {
                    mMatrix = new Matrix();
                    
                    // 计算旋转的中心点
                    Drawable imageDrawable = mImageView.getDrawable();
                    if (null != imageDrawable) {
                        mRotationPivotX = Math.round(imageDrawable.getIntrinsicWidth() / 2f);
                        mRotationPivotY = Math.round(imageDrawable.getIntrinsicHeight() / 2f);
                    }
                }
                
                mMatrix.setRotate(rotation, mRotationPivotX, mRotationPivotY);
                mImageView.setImageMatrix(mMatrix);
            }
        }
    }

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

  • PullToRefreshBase构造方法兼容2.x

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

    @SuppressLint("NewApi")    @TargetApi(Build.VERSION_CODES.HONEYCOMB)

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程