Android PullToRefresh 实战（ListView）

今天带来最火的下拉刷新，上拉加载控件实战： Android PullToRefresh

github地址：https://github.com/chrisbanes/Android-PullToRefresh

因为git上面下载的项目是在eclipes中编译的，那么我们首先解决将library包导入Android Studio的问题。

首先将下载的library包导入eclipes中，然后Export ，选择Build方式，下一步完成build的创建，这样在library的源文件目录下就会生成一个build.gradle文件，之后我们就可以使用Android studio将library文件当作Model导入我们的工程里面，如图：



ok，接下来我们先来看listview的使用。

第一种：只有下拉刷新，不支持上拉加载更多

activity_main.xml布局文件

[code]<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.handmark.pulltorefresh.library.PullToRefreshListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/pull_refresh_list"
        android:divider="#19000000"
        android:dividerHeight="4dp"
        android:fadingEdge="none"
        android:fastScrollEnabled="false"
        android:footerDividersEnabled="false"
        android:headerDividersEnabled="false"
        android:smoothScrollbar="true"
        />

</RelativeLayout>

所有属性都是listView自带的属性，如果有属性不是很清楚的，大家可以自行Google一把。

MainActivity中

[code]public class MainActivity extends AppCompatActivity {

    private PullToRefreshListView mListView;
    private ArrayAdapter<String> mAdapter;
    private LinkedList<String> mDatas;

    private int mItemCount = 9;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化数据
        initDatas();
        //初始化视图
        initView();
        //初始化事件
        initEvent();
    }

    /**
     * 初始化事件
     */
    private void initEvent() {
        **mListView.setOnRefreshListener(new PullToRefreshBase.OnRefreshListener<ListView>()** {
            @Override
            public void onRefresh(PullToRefreshBase<ListView> refreshView) {
                String label = DateUtils.formatDateTime(
                        getApplicationContext(),
                        System.currentTimeMillis(),
                        DateUtils.FORMAT_SHOW_TIME
                                | DateUtils.FORMAT_SHOW_DATE
                                | DateUtils.FORMAT_ABBREV_ALL);
                refreshView.getLoadingLayoutProxy().setLastUpdatedLabel(label);

                //模拟加载数据
                new GetDataTask().execute();
            }
        });
    }

    /**
     * 初始化视图
     */
    private void initView() {
        mListView= (PullToRefreshListView) findViewById(R.id.pull_refresh_list);
        mAdapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,mDatas);

        mListView.setAdapter(mAdapter);
    }

    /**
     * 初始化数据方法
     */
    private void initDatas() {
        mDatas=new LinkedList<>();
        for (int i = 0; i < mItemCount; i++)
        {
            mDatas.add("" + i);
        }
    }

    /**
     * 模拟异步加载数据
     */
    public class GetDataTask extends AsyncTask<Void,Void,String>{

        @Override
        protected String doInBackground(Void... params) {
            try
            {
                Thread.sleep(2000);
            } catch (InterruptedException e)
            {
            }
            return "" + (mItemCount++);
        }

        @Override
        protected void onPostExecute(String s) {
            //将doInBackground返回的String字符串加入数据源
            mDatas.add(s);
            //listView适配器修改数据展示
            mAdapter.notifyDataSetChanged();
            //pull-to-refresh ListView 完成刷新
            mListView.onRefreshComplete();
        }
    }

}

注释很清楚，注意绑定以上监听，只能实现下拉刷新功能。简单看下效果：

[code]![这里写代码片](http://img.blog.csdn.net/20150713144551488)

添加上拉加载更多

如过希望实现上拉加载更多，那么首先需要在布局文件的声明属性中添加一个属性，用于指定目前的下拉模式：

[code]<com.handmark.pulltorefresh.library.PullToRefreshListView
        xmlns:ptr="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/pull_refresh_list"
        android:divider="#19000000"
        android:dividerHeight="4dp"
        android:fadingEdge="none"
        android:fastScrollEnabled="false"
        android:footerDividersEnabled="false"
        android:headerDividersEnabled="false"
        android:smoothScrollbar="true"
        ptr:ptrMode="both"
        ptr:ptrAnimationStyle="rotate"/>

我们添加了一个属性：ptr:ptrMode=”both” ，意思：上拉和下拉都支持。

可选值为：disabled（禁用下拉刷新），pullFromStart（仅支持下拉刷新），pullFromEnd（仅支持上拉刷新），both（二者都支持），manualOnly（只允许手动触发）

MainActivity中跟上面的区别只有一个地方：

[code]mListView.setOnRefreshListener(new PullToRefreshBase.OnRefreshListener2<ListView>() {
            @Override
            public void onPullDownToRefresh(PullToRefreshBase<ListView> refreshView) {
                Log.e("WJ", "onPullDownToRefresh");
                //这里写下拉刷新的任务
                new GetDataTask().execute();
            }

            @Override
            public void onPullUpToRefresh(PullToRefreshBase<ListView> refreshView) {
                Log.e("WJ", "onPullUpToRefresh");
                //这里写上拉加载更多的任务
                new GetDataTask().execute();
            }
        });

mPullRefreshListView.setOnRefreshListener(new OnRefreshListener2(){});注意这里的接口类型是OnRefreshListener2，多了个2，和上面的不一样，这个接口包含两个方法，一个上拉回调，一个下拉回调。好了，这样我们就成功添加了上拉与下拉，并且分别可以控制其回调代码。

效果：



接下来，我们改变下上下拉刷新时候的旋转图标

1.框架自身给我们实现了箭头的效果

[code]<com.handmark.pulltorefresh.library.PullToRefreshListView
        xmlns:ptr="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/pull_refresh_list"
        android:divider="#19000000"
        android:dividerHeight="4dp"
        android:fadingEdge="none"
        android:fastScrollEnabled="false"
        android:footerDividersEnabled="false"
        android:headerDividersEnabled="false"
        android:smoothScrollbar="true"
        ptr:ptrMode="both"
        ptr:ptrAnimationStyle="flip"
        />

可以看到最后一行跟我们之前的设置有不同：

ptr:ptrAnimationStyle的取值：flip（翻转动画）， rotate（旋转动画） 。

2.使用本地图片作为该图标



很简单，只要一行代码就Ok

[code]ptr:ptrAnimationStyle="rotate"

自定义下拉指示器文本内容等效果

ok，接下来看这样一个效果的实现



可以看到我们分别设置了上下拉刷新时候显示的文本内容，只需要加上如下方法就可以：

[code] private void initIndicator()
    {
        ILoadingLayout startLabels = mListView
                .getLoadingLayoutProxy(true, false);
        startLabels.setPullLabel("你可劲拉，拉...");// 刚下拉时，显示的提示
        startLabels.setRefreshingLabel("好嘞，正在刷新...");// 刷新时
        startLabels.setReleaseLabel("你敢放，我就敢刷新...");// 下来达到一定距离时，显示的提示

        ILoadingLayout endLabels = mListView.getLoadingLayoutProxy(
                false, true);
        endLabels.setPullLabel("你可劲拉，拉2...");// 刚下拉时，显示的提示
        endLabels.setRefreshingLabel("好嘞，正在刷新2...");// 刷新时
        endLabels.setReleaseLabel("你敢放，我就敢刷新2...");// 下来达到一定距离时，显示的提示
    }

在mListView.setOnRefreshListener之前调用该方法即可！

以上步骤，我们可以初步了解pullToRefresh框架的使用。但从一开始我就有个疑问，不知道你们有没有这个同样的疑惑，在上拉加载更多的时候，如果屏幕数据还没有占满全屏，我们没必要让屏幕支持上拉加载更多啊，请教了大神，然后解决了这个疑惑：

在做上拉加载更多的时候，我们一定会设置一个页面允许加载的最大值，如果我们list里面的数据

[code] @Override
        protected void onPostExecute(String s) {

            if(mItemCount++>15){
                mListView.setMode(PullToRefreshBase.Mode.BOTH);
            }else{
                mListView.setMode(PullToRefreshBase.Mode.PULL_FROM_START);
            }

            //将doInBackground返回的String字符串加入数据源
            mDatas.add(s);
            //listView适配器修改数据展示
            mAdapter.notifyDataSetChanged();
            //pull-to-refresh ListView 完成刷新
            mListView.onRefreshComplete();
        }

具体就是，在数据加载成功，执行onPostExecute(String str)方法的时候判断下就ok，上面的15就是我们设置的页面最大数量。

最后，总结下其他常用的

ptrRefreshableViewBackground 设置整个mPullRefreshListView的背景色

ptrHeaderBackground 设置下拉Header或者上拉Footer的背景色

ptrHeaderTextColor 用于设置Header与Footer中文本的颜色

ptrHeaderSubTextColor 用于设置Header与Footer中上次刷新时间的颜色

ptrShowIndicator如果为true会在mPullRefreshListView中出现icon，右上角和右下角，挺有意思的。

ptrHeaderTextAppearance ， ptrSubHeaderTextAppearance分别设置拉Header或者上拉Footer中字体的类型颜色等等。

ptrScrollingWhileRefreshingEnabled刷新的时候，是否允许ListView或GridView滚动。觉得为true比较好。

ptrListViewExtrasEnabled 决定了Header，Footer以何种方式加入mPullRefreshListView，true为headView方式加入，就是滚动时刷新头部会一起滚动。

最后2个其实对于用户体验还是挺重要的，如果设置的时候考虑下~。其他的属性自己选择就好。