安卓開發筆記——關於開源組件PullToRefresh實現下拉刷新和上拉加載（一分鍾搞定，超級簡單）

前言

　　以前在實現ListView下拉刷新和上拉加載數據的時候都是去繼承原生的ListView重寫它的一些方法，實現起來非常繁雜，需要我們自己去給ListView定制下拉刷新和上拉加載的布局文件，然后添加ScrollView和OnTouch監聽，設置回調接口獲取數據，為了更好的交互體驗，我們還不能直接利用setVisibility隱藏顯示布局等等一大堆的操作，累都累死了。（題外話：關於下拉刷新在新版的android-support-v4.jar里，其實谷歌已經為我們提供了一個控件叫SwipeRefreshLayout，使用方法也非常簡單，有興趣的朋友可以自己網上了解下）它的實現效果大致是這樣的：

 

　　今天來說下關於開源項目PullToRefresh的使用方法，輕輕松松幾行代碼就可以把下拉刷新和上拉加載功能給實現了。（開源的東西雖然好用，但作為學習，還是建議大家先不用開源組件自己去實現一遍所需要的效果，畢竟原理需要懂），好了，言歸正傳，我盡量的言簡意賅，進入主題。

先看下最后的實現效果圖：

  

 

准備工作

1、既然是利用PullToRefresh組件來實現下拉刷新和上拉加載數據的效果，那么首先我們需要先把它下載下來。

這是PullToRefresh在GitHub上的下載地址：https://github.com/chrisbanes/Android-PullToRefresh/wiki/Quick-Start-Guide

很簡單，下載完畢后我們就可以開始進入開發工作了。

 

磨刀不誤砍柴工

1、首先先導入該項目

在導入項目后，我們會發現出現了很多紅叉，不用擔心，這個只是引用庫路徑出錯罷了，我們右鍵點擊有紅叉的文件選擇Properties，選擇Andorid下拉，把對應的library重新 引入即可，依樣畫葫蘆，其他出現的紅叉的文件也都這樣做。

　　

把紅叉都解決完之后，有個很重要的事情要做，把剛導入的所有文件夾里的android-support-v4.jar和你自己的項目里的v4包統一了，避免v4包版本不一致導致項目運行出錯。

 

干活干活！

布局文件，非常簡單，只放了一個可下拉刷新的ListView

<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
        android:id="@+id/mylistview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        </com.handmark.pulltorefresh.library.PullToRefreshListView>

</RelativeLayout>

 

主代碼文件：

package com.rabbit.pulltorefreshdemo;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.AsyncTask;
import android.os.Bundle;
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.PullToRefreshListView;

public class MainActivity extends Activity {
    
    //聲明下拉刷新ListView組件
    private PullToRefreshListView myListView;
    //聲明數據源
    private List<String> data;
    //聲明適配器
    private ArrayAdapter<String> adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //獲取下拉刷新ListView組件
        this.myListView=(PullToRefreshListView) findViewById(R.id.mylistview);
        //模擬數據
        this.data=new ArrayList<String>();
        data.add("JAVA");
        data.add("PHP");
        data.add("C++");
        data.add("C#");
        //實例化Adapter
        this.adapter=new ArrayAdapter<>(MainActivity.this, android.R.layout.simple_list_item_1, data);
        //設置Adapter
        myListView.setAdapter(adapter);
        //設置支持上下拉動和監聽
        myListView.setMode(Mode.BOTH);
        myListView.setOnRefreshListener(new OnRefreshListener<ListView>() {

            @Override
            public void onRefresh(PullToRefreshBase<ListView> refreshView) {
                
                    if(refreshView.isShownHeader()){
                        //判斷頭布局是否可見，如果可見執行下拉刷新
                        //設置尾布局樣式文字
                        myListView.getLoadingLayoutProxy().setRefreshingLabel("正在刷新");
                        myListView.getLoadingLayoutProxy().setPullLabel("下拉刷新數據");
                        myListView.getLoadingLayoutProxy().setReleaseLabel("釋放開始刷新");
                        //模擬加載數據線程休息3秒
                        new AsyncTask<Void, Void, Void>() {
                            @Override
                            protected Void doInBackground(Void... params) {
                                try {
                                    Thread.sleep(3000);
                                    data.add("刷新數據1");
                                    data.add("刷新數據2");
                                    data.add("刷新數據3");
                                } catch (InterruptedException e) {
                                    e.printStackTrace();
                                }
                                return null;
                            }
                            
                            @Override
                            protected void onPostExecute(Void result) {
                                super.onPostExecute(result);
                                //完成對下拉刷新ListView的更新操作
                                adapter.notifyDataSetChanged();
                                //將下拉視圖收起
                                myListView.onRefreshComplete();
                            }
                        }.execute();
                    }
                    if(refreshView.isShownFooter()){
                        //判斷尾布局是否可見，如果可見執行上拉加載更多
                        //設置尾布局樣式文字
                        myListView.getLoadingLayoutProxy().setRefreshingLabel("正在加載");
                        myListView.getLoadingLayoutProxy().setPullLabel("上拉加載更多");
                        myListView.getLoadingLayoutProxy().setReleaseLabel("釋放開始加載");
                        //模擬加載數據線程休息3秒
                        new AsyncTask<Void, Void, Void>() {
                            @Override
                            protected Void doInBackground(Void... params) {
                                try {
                                    Thread.sleep(3000);
                                    data.add("更多數據1");
                                    data.add("更多數據2");
                                    data.add("更多數據3");
                                } catch (InterruptedException e) {
                                    e.printStackTrace();
                                }
                                return null;
                            }
                            
                            @Override
                            protected void onPostExecute(Void result) {
                                super.onPostExecute(result);
                                //完成對下拉刷新ListView的更新操作
                                adapter.notifyDataSetChanged();
                                //將下拉視圖收起
                                myListView.onRefreshComplete();
                            }
                        }.execute();
                        
                        
                    }
                    
            }
        });
        
    }


}

其實和普通ListView的使用方式差不多，只是多了一些屬性的設置，這里有幾個要注意的地方：

1、模式的設置，默認下PullToRefresh的刷新模式只支持下拉刷新，我們可以通過setMode(Mode.XXXX)來設置它

BOTH:上拉刷新和下拉刷新都支持
DISABLED：禁用上拉下拉刷新
PULL_FROM_START:僅支持下拉刷新（默認）
PULL_FROM_END：僅支持上拉刷新
MANUAL_REFRESH_ONLY：只允許手動觸發

 

2、補充上述描述第1點，當我們設置模式為BOTH的時候，我們就可以實現下拉和上拉了，但這里的它們的樣式是一樣的，我們需要的場景應該是下拉的時候顯示"下拉刷新數據，正在刷新數據，數據刷新成功...."，而在我們上拉的時候應該出現的場景是"上拉加載數據，正在加載數據，加載數據成功..."，所以這里我們需要對樣式進行設置。

由於PullToRefresh默認是沒給我們判斷到底是上拉還是下拉的方法，所以我們需要去源代碼里修改下它的代碼，Ctrl+Shift+T搜索下PullToRefreshBase類，打開后再后最后面我們補上這樣一段代碼，我們可以根據當頭布局可見的時候執行下拉刷新，當尾布局可見的時候執行下拉加載，這樣我們就可以根據頭尾布局來判斷用戶到底是執行上拉還是下拉操作了。

    //判別頭部是否展示出來，如果展示出來代表下拉使得頭部展示。true為下拉
    public boolean isShownHeader() {
        return getHeaderLayout().isShown();
    }
    //判別低部是否展示出來，如果展示出來代表上拉使得低部展示。true為上拉
    public boolean isShownFooter() {
        return getFooterLayout().isShown();
    }

3、這是關於PullToRefresh的一些屬性設置，在源碼中可以找到，這里我做了下翻譯：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="PullToRefresh">
        <!-- A drawable to use as the background of the Refreshable View -->
        <!-- 設置整個刷新列表的背景色 -->
        <attr name="ptrRefreshableViewBackground" format="reference|color" />
        <!-- A drawable to use as the background of the Header and Footer Loading Views -->
        <!--  設置下拉Header或者上拉Footer的背景色 -->
        <attr name="ptrHeaderBackground" format="reference|color" />
        <!-- Text Color of the Header and Footer Loading Views -->
        <!-- 用於設置Header與Footer中文本的顏色 -->
        <attr name="ptrHeaderTextColor" format="reference|color" />
        <!-- Text Color of the Header and Footer Loading Views Sub Header -->
        <!-- 用於設置Header與Footer中上次刷新時間的顏色 -->
        <attr name="ptrHeaderSubTextColor" format="reference|color" />
        <!-- Mode of Pull-to-Refresh that should be used -->
        <attr name="ptrMode">
            <flag name="disabled" value="0x0" /><!-- 禁用下拉刷新 -->
            <flag name="pullFromStart" value="0x1" /><!-- 僅支持下拉刷新 -->
            <flag name="pullFromEnd" value="0x2" /><!-- 僅支持上拉刷新 -->
            <flag name="both" value="0x3" /><!-- 上拉刷新和下拉刷新都支持 -->
            <flag name="manualOnly" value="0x4" /><!-- 只允許手動觸發 -->

            <!-- These last two are depreacted -->
            <flag name="pullDownFromTop" value="0x1" />
            <flag name="pullUpFromBottom" value="0x2" />
        </attr>
        <!-- Whether the Indicator overlay(s) should be used -->
        <!-- 如果為true會在mPullRefreshListView中出現icon，右上角和右下角，挺有意思的 -->
        <attr name="ptrShowIndicator" format="reference|boolean" />
        <!-- Drawable to use as Loading Indicator. Changes both Header and Footer. -->
        <!-- 同時改變頭部和底部的圖標 -->
        <attr name="ptrDrawable" format="reference" />
        <!-- Drawable to use as Loading Indicator in the Header View. Overrides value set in ptrDrawable. -->
        <!-- 頭部視圖的圖標-->
        <attr name="ptrDrawableStart" format="reference" />

        <!-- Drawable to use as Loading Indicator in the Footer View. Overrides value set in ptrDrawable. -->
        <!-- 底部視圖的圖標 -->
        <attr name="ptrDrawableEnd" format="reference" />
        <!-- Whether Android's built-in Over Scroll should be utilised for Pull-to-Refresh. -->
        <attr name="ptrOverScroll" format="reference|boolean" />
        <!-- Base text color, typeface, size, and style for Header and Footer Loading Views -->
         <!-- 分別設置拉Header或者上拉Footer中字體的類型顏色等等 -->
        <attr name="ptrHeaderTextAppearance" format="reference" />
        <!-- Base text color, typeface, size, and style for Header and Footer Loading Views Sub Header -->
        <attr name="ptrSubHeaderTextAppearance" format="reference" />
        <!-- Style of Animation should be used displayed when pulling. -->
        <attr name="ptrAnimationStyle">
            <flag name="rotate" value="0x0" /><!-- flip（翻轉動畫）， rotate（旋轉動畫）  -->
            <flag name="flip" value="0x1" />
        </attr>
        <!-- Whether the user can scroll while the View is Refreshing -->
        <!-- 刷新的時候，是否允許ListView或GridView滾動 -->
        <attr name="ptrScrollingWhileRefreshingEnabled" format="reference|boolean" />
        <!--
            Whether PullToRefreshListView has it's extras enabled. This allows the user to be 
            able to scroll while refreshing, and behaves better. It acheives this by adding
            Header and/or Footer Views to the ListView.
        -->
        <!-- 決定了Header，Footer以何種方式加入mPullRefreshListView，true為headView方式加入，就是滾動時刷新頭部會一起滾動 -->
        <attr name="ptrListViewExtrasEnabled" format="reference|boolean" />
        <!--
            Whether the Drawable should be continually rotated as you pull. This only
            takes effect when using the 'Rotate' Animation Style.
        -->
        <attr name="ptrRotateDrawableWhilePulling" format="reference|boolean" />
        <!-- BELOW HERE ARE DEPRECEATED. DO NOT USE. -->
        <attr name="ptrAdapterViewBackground" format="reference|color" />
        <attr name="ptrDrawableTop" format="reference" />
        <attr name="ptrDrawableBottom" format="reference" />
    </declare-styleable>
</resources>

設置屬性也很簡單，在對應的布局文件里直接設置就可以，比如字體顏色：

    <com.handmark.pulltorefresh.library.PullToRefreshListView
        xmlns:ptr="http://schemas.android.com/apk/res-auto"  
        android:id="@+id/lv_friendsline"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" 
        ptr:ptrHeaderTextColor="#000000"
        >

 

其他的一些，大家看我代碼注釋吧，寫的非常詳細了。

補充：關於這個PullToRefresh它不僅僅支持ListView，比如ScrollView，GridView等等，只要是能滾動到控件它都通吃，具體使用方法大家可以參考我們一開始導入的項目里的LauncherActivity。

 

 

作者：Balla_兔子
出處：http://www.cnblogs.com/lichenwei/
本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文鏈接。
正在看本人博客的這位童鞋，我看你氣度不凡，談吐間隱隱有王者之氣，日后必有一番作為！旁邊有“推薦”二字，你就順手把它點了吧，相得准，我分文不收；相不准，你也好回來找我！