Android PullToRefresh （ListView GridView 下拉刷新） 使用詳解

轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/38238749，本文出自：【張鴻洋的博客】

羣裏一哥們今天聊天偶然提到這個git hub上的控件：pull-to-refresh ，有興趣的看下，例子中的功能極其強大，支持不少控件。本篇博客詳細給你們介紹下ListView和GridView利用pull-to-rerfesh 實現下拉刷新和上拉加載更多。

（下載地址：https://github.com/chrisbanes/Android-PullToRefresh）

一、ListView下拉刷新快速入門

pull-to-refresh對ListView進行了封裝，叫作：PullToRefreshListView，用法和listview沒什麼區別，下面看demo.

佈局文件：

 

<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" >

    <com.handmark.pulltorefresh.library.PullToRefreshListView
        xmlns:ptr="http://schemas.android.com/apk/res-auto"
        android:id="@+id/pull_refresh_list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:cacheColorHint="#00000000"
        android:divider="#19000000"
        android:dividerHeight="4dp"
        android:fadingEdge="none"
        android:fastScrollEnabled="false"
        android:footerDividersEnabled="false"
        android:headerDividersEnabled="false"
        android:smoothScrollbar="true" >
    </com.handmark.pulltorefresh.library.PullToRefreshListView>

</RelativeLayout>

聲明瞭一個PullToRefreshListView，裏面全部的屬性都是ListView的，沒有任何其餘屬性，固然了PullToRefreshListView也提供了不少配置的屬性，後面會詳細介紹。

 

Activity的代碼:

 

package com.example.zhy_pulltorefreash_chenyoca;

import java.util.LinkedList;

import android.app.Activity;
import android.os.AsyncTask;
import android.os.Bundle;
import android.text.format.DateUtils;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import com.handmark.pulltorefresh.library.PullToRefreshBase;
import com.handmark.pulltorefresh.library.PullToRefreshBase.OnRefreshListener;
import com.handmark.pulltorefresh.library.PullToRefreshListView;

public class PullToRefreshListActivity extends Activity
{

    private LinkedList<String> mListItems;
    /**
     * 上拉刷新的控件
     */
    private PullToRefreshListView mPullRefreshListView;

    private ArrayAdapter<String> mAdapter;

    private int mItemCount = 9;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 獲得控件
        mPullRefreshListView = (PullToRefreshListView) findViewById(R.id.pull_refresh_list);
        //初始化數據
        initDatas();
        //設置適配器
        mAdapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, mListItems);
        mPullRefreshListView.setAdapter(mAdapter);
        // 設置監聽事件
        mPullRefreshListView
                .setOnRefreshListener(new 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 initDatas()
    {
        // 初始化數據和數據源
        mListItems = new LinkedList<String>();

        for (int i = 0; i < mItemCount; i++)
        {
            mListItems.add("" + i);
        }
    }

    private 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 result)
        {
            mListItems.add(result);
            mAdapter.notifyDataSetChanged();
            // Call onRefreshComplete when the list has been refreshed.
            mPullRefreshListView.onRefreshComplete();
        }
    }

}

代碼極其簡單，獲得PullToRefreshListView控件，而後像ListView同樣設置數據集。固然了，咱們有下拉刷新，因此必須設置下拉刷新的回調：

 

setOnRefreshListener(new OnRefreshListener<ListView>(){}

咱們在回調中模擬了一個異步任務，加載了一個Item。

效果圖：

下拉時，執行咱們的GetDataTask任務，任務執行完成後在onPostExecute中 調用mPullRefreshListView.onRefreshComplete();完成刷新。

是否是分分鐘實現下拉刷新。固然了，你可能會有疑問，下拉刷新的指示器上的文字能夠自定義嗎？那個圖片能夠換成箭頭嗎？說好的上拉加載更多呢？後面會一一添加~

二、添加上拉加載更多

如過但願實現上拉加載更多，那麼首先須要在佈局文件的聲明屬性中添加一個屬性，用於指定目前的下拉模式：

 

<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" >

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

</RelativeLayout>

咱們添加了一個屬性：ptr:ptrMode="both" ，意思：上拉和下拉都支持。

 

可選值爲：disabled（禁用下拉刷新），pullFromStart（僅支持下拉刷新），pullFromEnd（僅支持上拉刷新），both（兩者都支持），manualOnly（只容許手動觸發）

固然了，若是你不喜歡在佈局文件中指定，徹底可使用代碼設置，在onCreate裏面寫：mPullRefreshListView.setMode(Mode.BOTH);//設置你須要的模式

設置了模式爲雙向都支持，固然必須爲上拉和下拉分別設置回調，請看下面的代碼：

 

package com.example.zhy_pulltorefreash_chenyoca;

import java.util.LinkedList;

import android.app.Activity;
import android.os.AsyncTask;
import android.os.Bundle;
import android.text.format.DateUtils;
import android.util.Log;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import com.handmark.pulltorefresh.library.PullToRefreshBase;
import com.handmark.pulltorefresh.library.PullToRefreshBase.Mode;
import com.handmark.pulltorefresh.library.PullToRefreshBase.OnRefreshListener;
import com.handmark.pulltorefresh.library.PullToRefreshBase.OnRefreshListener2;
import com.handmark.pulltorefresh.library.PullToRefreshListView;

public class PullToRefreshListActivity extends Activity
{

    private LinkedList<String> mListItems;
    /**
     * 上拉刷新的控件
     */
    private PullToRefreshListView mPullRefreshListView;

    private ArrayAdapter<String> mAdapter;

    private int mItemCount = 9;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 獲得控件
        mPullRefreshListView = (PullToRefreshListView) findViewById(R.id.pull_refresh_list);
        mPullRefreshListView.setMode(Mode.BOTH);
        // 初始化數據
        initDatas();
        // 設置適配器
        mAdapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, mListItems);
        mPullRefreshListView.setAdapter(mAdapter);

        mPullRefreshListView
                .setOnRefreshListener(new OnRefreshListener2<ListView>()
                {
                    @Override
                    public void onPullDownToRefresh(
                            PullToRefreshBase<ListView> refreshView)
                    {
                        Log.e("TAG", "onPullDownToRefresh");
                        //這裏寫下拉刷新的任務
                        new GetDataTask().execute();
                    }

                    @Override
                    public void onPullUpToRefresh(
                            PullToRefreshBase<ListView> refreshView)
                    {
                        Log.e("TAG", "onPullUpToRefresh");
                        //這裏寫上拉加載更多的任務
                        new GetDataTask().execute();
                    }
                });

    }

    private void initDatas()
    {
        // 初始化數據和數據源
        mListItems = new LinkedList<String>();

        for (int i = 0; i < mItemCount; i++)
        {
            mListItems.add("" + i);
        }
    }

    private 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 result)
        {
            mListItems.add(result);
            mAdapter.notifyDataSetChanged();
            // Call onRefreshComplete when the list has been refreshed.
            mPullRefreshListView.onRefreshComplete();
        }
    }

和第一段的代碼只有一個地方有區別，可能很難發現：
mPullRefreshListView.setOnRefreshListener(new OnRefreshListener2<ListView>(){});注意這裏的接口類型是OnRefreshListener2，多了個2，和上面的不同，這個接口包含兩個方法，一個上拉回調，一個下拉回調。好了，這樣咱們就成功添加了上拉與下拉，而且分別能夠控制其回調代碼。

 

效果圖：

咋樣，是否是也很簡單~注:若是你的上拉和下拉需求是執行同樣的代碼，那麼你能夠繼續註冊OnRefreshListener接口，上拉和下拉都會執行同一個方法。

接下來介紹如何使用帶下拉刷新和加載更多的的GridView和自定義樣式~

三、帶下拉和上拉的GridView ( PullToRefreshGridView )

一樣的pull-to-refresh把GridView封裝爲：PullToRefreshGridView 。用法和PullToRefreshListView一摸同樣~

首先看主佈局文件：

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <!-- The PullToRefreshGridView replaces a standard GridView widget. -->

    <com.handmark.pulltorefresh.library.PullToRefreshGridView
        xmlns:ptr="http://schemas.android.com/apk/res-auto"
        android:id="@+id/pull_refresh_grid"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:columnWidth="100dp"
        android:gravity="center_horizontal"
        android:horizontalSpacing="1dp"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth"
        android:verticalSpacing="1dp"
        ptr:ptrDrawable="@drawable/ic_launcher"
        ptr:ptrMode="both" />

</LinearLayout>

PullToRefreshGridView 的item的佈局文件：

 

 

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/id_grid_item_text"
    android:layout_width="100dp"
    android:gravity="center"
    android:textColor="#ffffff"
    android:textSize="16sp"
    android:background="#000000"
    android:layout_height="100dp" />

接下來就是Activity的代碼了：

 

 

public class PullToRefreshGridActivity extends Activity
{
    private LinkedList<String> mListItems;
    private PullToRefreshGridView mPullRefreshListView;
    private ArrayAdapter<String> mAdapter;

    private int mItemCount = 10;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_ptr_grid);
        // 獲得控件
        mPullRefreshListView = (PullToRefreshGridView) findViewById(R.id.pull_refresh_grid);

        // 初始化數據和數據源
        initDatas();

        mAdapter = new ArrayAdapter<String>(this, R.layout.grid_item,
                R.id.id_grid_item_text, mListItems);
        mPullRefreshListView.setAdapter(mAdapter);

        mPullRefreshListView
                .setOnRefreshListener(new OnRefreshListener2<GridView>()
                {

                    @Override
                    public void onPullDownToRefresh(
                            PullToRefreshBase<GridView> refreshView)
                    {
                        Log.e("TAG", "onPullDownToRefresh"); // Do work to
                        String label = DateUtils.formatDateTime(
                                getApplicationContext(),
                                System.currentTimeMillis(),
                                DateUtils.FORMAT_SHOW_TIME
                                        | DateUtils.FORMAT_SHOW_DATE
                                        | DateUtils.FORMAT_ABBREV_ALL);

                        // Update the LastUpdatedLabel
                        refreshView.getLoadingLayoutProxy()
                                .setLastUpdatedLabel(label);

                        new GetDataTask().execute();
                    }

                    @Override
                    public void onPullUpToRefresh(
                            PullToRefreshBase<GridView> refreshView)
                    {
                        Log.e("TAG", "onPullUpToRefresh"); // Do work to refresh
                                                            // the list here.
                        new GetDataTask().execute();
                    }
                });
    }

    private void initDatas()
    {
        mListItems = new LinkedList<String>();

        for (int i = 0; i < mItemCount; i++)
        {
            mListItems.add(i + "");
        }
    }

    private class GetDataTask extends AsyncTask<Void, Void, Void>
    {

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

        @Override
        protected void onPostExecute(Void result)
        {
            mListItems.add("" + mItemCount++);
            mAdapter.notifyDataSetChanged();
            // Call onRefreshComplete when the list has been refreshed.
            mPullRefreshListView.onRefreshComplete();
        }
    }

基本上上例沒有任何區別，直接看效果圖吧：

 

效果仍是不錯的，若是你比較細心會發現，那個下拉刷新的轉圈的圖片咋變成機器人了，那是由於我在佈局文件裏面設置了：

 

<com.handmark.pulltorefresh.library.PullToRefreshGridView
       ptr:ptrDrawable="@drawable/ic_launcher"
       ...
       />

固然了這是旋轉的效果，通常經常使用的還有，一個箭頭倒置的效果，其實也很簡單，一個屬性：

 

ptr:ptrAnimationStyle="flip"

去掉 ptr:ptrDrawable="@drawable/ic_launcher"這個屬性，若是你但願用下圖默認的箭頭，你也能夠自定義。

添加後，箭頭就是這個樣子：

ptr:ptrAnimationStyle的取值：flip（翻轉動畫）， rotate（旋轉動畫） 。 

ptr:ptrDrawable則就是設置圖標了。

 

四、自定義下拉指示器文本內容等效果

 

能夠在初始化完成mPullRefreshListView後，經過mPullRefreshListView.getLoadingLayoutProxy()能夠獲得一個ILoadingLayout對象，這個對象能夠設置各類指示器中的樣式、文本等。

 

ILoadingLayout startLabels = mPullRefreshListView
                .getLoadingLayoutProxy();
        startLabels.setPullLabel("你可勁拉，拉...");// 剛下拉時，顯示的提示
        startLabels.setRefreshingLabel("好嘞，正在刷新...");// 刷新時
        startLabels.setReleaseLabel("你敢放，我就敢刷新...");// 下來達到必定距離時，顯示的提示

若是你比較細心，會發現，前面咱們設置上次刷新時間已經用到了：

 

// Update the LastUpdatedLabel
refreshView.getLoadingLayoutProxy().setLastUpdatedLabel(label);

如今的效果是：

默認是上拉和下拉的字同時改變的，若是我但願單獨改變呢？

 

private void initIndicator()
    {
        ILoadingLayout startLabels = mPullRefreshListView
                .getLoadingLayoutProxy(true, false);
        startLabels.setPullLabel("你可勁拉，拉...");// 剛下拉時，顯示的提示
        startLabels.setRefreshingLabel("好嘞，正在刷新...");// 刷新時
        startLabels.setReleaseLabel("你敢放，我就敢刷新...");// 下來達到必定距離時，顯示的提示

        ILoadingLayout endLabels = mPullRefreshListView.getLoadingLayoutProxy(
                false, true);
        endLabels.setPullLabel("你可勁拉，拉2...");// 剛下拉時，顯示的提示
        endLabels.setRefreshingLabel("好嘞，正在刷新2...");// 刷新時
        endLabels.setReleaseLabel("你敢放，我就敢刷新2...");// 下來達到必定距離時，顯示的提示
    }

mPullRefreshListView.getLoadingLayoutProxy(true, false);接收兩個參數，爲true,false返回設置下拉的ILoadingLayout；爲false,true返回設置上拉的。

 

五、經常使用的一些屬性

固然了，pull-to-refresh在xml中還能定義一些屬性：

ptrMode，ptrDrawable，ptrAnimationStyle這三個上面已經介紹過。

ptrRefreshableViewBackground 設置整個mPullRefreshListView的背景色

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

ptrHeaderTextColor 用於設置Header與Footer中文本的顏色

ptrHeaderSubTextColor 用於設置Header與Footer中上次刷新時間的顏色

ptrShowIndicator若是爲true會在mPullRefreshListView中出現icon，右上角和右下角，挺有意思的。

ptrHeaderTextAppearance ， ptrSubHeaderTextAppearance分別設置拉Header或者上拉Footer中字體的類型顏色等等。

ptrRotateDrawableWhilePulling當動畫設置爲rotate時，下拉是是否旋轉。

ptrScrollingWhileRefreshingEnabled刷新的時候，是否容許ListView或GridView滾動。以爲爲true比較好。

ptrListViewExtrasEnabled 決定了Header，Footer以何種方式加入mPullRefreshListView，true爲headView方式加入，就是滾動時刷新頭部會一塊兒滾動。

最後2個其實對於用戶體驗仍是挺重要的，若是設置的時候考慮下~。其餘的屬性本身選擇就好。

注：上述屬性不少均可以代碼控制，若是有須要能夠直接mPullRefreshListView.set屬性名 查看

以上爲pull-to-refresh全部支持的屬性~~

定義了一堆的效果：

右上、右下那個圖標就是ptrShowIndicator。好了，你們能夠按照本身的需求對着上面的屬性解釋配置。

 

在github上下載的例子，是依賴3個項目的，一個基本的library_pullToRefresh，一個PullToRefreshViewPager，一個PullToRefreshListFragment ；

上面介紹的例子只依賴library_pullToRefresh，其餘兩個依賴不用導入。