android開發之PullToRefresh （GridView 下拉刷新,上拉加載）

首先,看佈局文件:

• 主佈局文件(activity_main.xml):

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ptr="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

    <com.zanelove.gridviewpulltorefresh.library.PullToRefreshGridView
            android:id="@+id/pull_refresh_grid"
            android:columnWidth="100dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:numColumns="auto_fit"
            android:gravity="center_horizontal"
            android:horizontalSpacing="10dp"
            android:stretchMode="columnWidth"
            android:verticalSpacing="10dp"
            android:scrollbars="none"
            android:listSelector="@null"

            ptr:ptrAnimationStyle="flip"
            ptr:ptrHeaderBackground="#00000000"
            ptr:ptrHeaderSubTextColor="#999999"
            ptr:ptrHeaderTextColor="#333333"
            ptr:ptrListViewExtrasEnabled="false"
            ptr:ptrMode="both"
            ptr:ptrRefreshableViewBackground="#00000000"
            ptr:ptrScrollingWhileRefreshingEnabled="true"
            ptr:ptrShowIndicator="false"
            />
</RelativeLayout>

• item佈局文件(grid_item.xml):

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

然後,就是MainActivity類中的代碼:

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

    private int mItemCount = 13;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 得到控件
        mPullRefreshListView = (PullToRefreshGridView) findViewById(R.id.pull_refresh_grid);

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

        initIndicator();

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

            @Override
            public void onPullDownToRefresh(PullToRefreshBase<GridView> refreshView) {
                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) {
                new GetDataTask().execute();
            }
        });
    }

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

        ILoadingLayout endLabels = mPullRefreshListView.getLoadingLayoutProxy(false,true);
        endLabels.setPullLabel("您可勁扯,扯...");
        endLabels.setRefreshingLabel("好勒,正在加載...");
        endLabels.setReleaseLabel("您敢放手,我敢加載...");

//        只能下拉,不能上拉
//        mPullRefreshListView.setMode(PullToRefreshBase.Mode.PULL_FROM_START);
    }

    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();
        }
    }
}

接下來,一起來看看效果圖:

再次,來說說自定義上下拉指示器文本內容等效果:

可以在初始化完成mPullRefreshListView後，通過mPullRefreshListView.getLoadingLayoutProxy()可以得到一個ILoadingLayout對象，這個對象可以設置各種指示器中的樣式、文本等。

 ILoadingLayout startLabels = mPullRefreshListView.getLoadingLayoutProxy(true, false);
        //剛下拉時,顯示的提示
        startLabels.setPullLabel("您可勁拉,拉...");
        //刷新時
        startLabels.setRefreshingLabel("好勒,正在刷新...");
        //下拉達到一定距離時,顯示的提示
        startLabels.setReleaseLabel("您敢放手,我敢刷新...");

        ILoadingLayout endLabels = mPullRefreshListView.getLoadingLayoutProxy(false,true);
        endLabels.setPullLabel("您可勁扯,扯...");
        endLabels.setRefreshingLabel("好勒,正在加載...");
        endLabels.setReleaseLabel("您敢放手,我敢加載...");

//        只能下拉,不能上拉
//        mPullRefreshListView.setMode(PullToRefreshBase.Mode.PULL_FROM_START);

再來說說,在演示效果中,我們有看到時間的顯示,怎麼做到的,如何做到的:

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);

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

最後,不妨和大家一起討論討論一下我們在xml佈局文件中常用的一些屬性:

• 如果你想改變刷新時顯示的圖片的動畫

//flip:倒置動畫 rotate:旋轉動畫
ptr:ptrAnimationStyle="flip" 

• 如果你想改變只允許下拉不能下拉

方式一:在佈局文件中
ptr:ptrMode="both" //上拉和下拉都支持。

方式二:代碼設置
mPullRefreshListView.setMode(Mode.BOTH);//設置你需要的模式

/**
    disabled（禁用下拉刷新）
    pullFromStart（僅支持下拉刷新）
    pullFromEnd（僅支持上拉刷新）
    both（二者都支持）
    manualOnly（只允許手動觸發）
*/

• 如果你想替換刷新顯示的圖片,你完全可以這樣做:

ptr:ptrDrawable="@drawable/替換的圖片"  

• 如果,沒有如果!我不想說了,自己看去吧!哈哈

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屬性名 查看Api

如果,我寫得不好,不妨看看Here

示例代碼戳Here

好了,我累了,世界這麼大,好像出去看看!要不你給個好評也行!

不給好評,那我也告訴你一個好東西