轉載請標明出處:http://blog.csdn.net/lmj623565791/article/details/38238749,本文出自:【張鴻洋的博客】
群里一哥們今天聊天偶然提到這個git hub上的控件:pull-to-refresh?,有興趣的看下,例子中的功能極其強大,支持很多控件。本篇博客詳細給大家介紹下ListView和GridView利用pull-to-rerfesh 實現下拉刷新和上拉加載更多。
1、ListView下拉刷新快速入門
pull-to-refresh對ListView進行了封裝,叫做:PullToRefreshListView,用法和listview沒什么區別,下面看demo.
布局文件:
[html]?view plaincopy
<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的代碼:
[java]?view plaincopy
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();?? ?????????????? ????????????mPullRefreshListView.onRefreshComplete();?? ????????}?? ????}?? ?? }??
代碼極其簡單,得到PullToRefreshListView控件,然后像ListView一樣設置數據集。當然了,我們有下拉刷新,所以必須設置下拉刷新的回調:
setOnRefreshListener(new OnRefreshListener<ListView>(){}
我們在回調中模擬了一個異步任務,加載了一個Item。
效果圖:
下拉時,執行我們的GetDataTask任務,任務執行完成后在onPostExecute中 調用mPullRefreshListView.onRefreshComplete();完成刷新。
是不是分分鐘實現下拉刷新。當然了,你可能會有疑問,下拉刷新的指示器上的文字可以自定義嗎?那個圖片可以換成箭頭嗎?說好的上拉加載更多呢?后面會一一添加~
2、添加上拉加載更多
如過希望實現上拉加載更多,那么首先需要在布局文件的聲明屬性中添加一個屬性,用于指定目前的下拉模式:
[html]?view plaincopy
<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);//設置你需要的模式
設置了模式為雙向都支持,當然必須為上拉和下拉分別設置回調,請看下面的代碼:
[java]?view plaincopy
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();?? ?????????????? ????????????mPullRefreshListView.onRefreshComplete();?? ????????}?? ????}??
和第一段的代碼只有一個地方有區別,可能很難發現:
mPullRefreshListView.setOnRefreshListener(new OnRefreshListener2<ListView>(){});注意這里的接口類型是OnRefreshListener2,多了個2,和上面的不一樣,這個接口包含兩個方法,一個上拉回調,一個下拉回調。好了,這樣我們就成功添加了上拉與下拉,并且分別可以控制其回調代碼。
效果圖:
咋樣,是不是也很簡單~注:如果你的上拉和下拉需求是執行一樣的代碼,那么你可以繼續注冊OnRefreshListener接口,上拉和下拉都會執行同一個方法。
接下來介紹如何使用帶下拉刷新和加載更多的的GridView和自定義樣式~
3、帶下拉和上拉的GridView (?PullToRefreshGridView?)
同樣的pull-to-refresh把GridView封裝為:PullToRefreshGridView 。用法和PullToRefreshListView一摸一樣~
首先看主布局文件:
[html]?view plaincopy
<?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"?>?? ?? ?????? ?? ????<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的布局文件:
[html]?view plaincopy
<?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的代碼了:
[java]?view plaincopy
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");??? ????????????????????????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();?? ????????????????????}?? ?? ????????????????????@Override?? ????????????????????public?void?onPullUpToRefresh(?? ????????????????????????????PullToRefreshBase<GridView>?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,?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();?? ?????????????? ????????????mPullRefreshListView.onRefreshComplete();?? ????????}?? ????}??
基本上上例沒有任何區別,直接看效果圖吧:
效果還是不錯的,如果你比較細心會發現,那個下拉刷新的轉圈的圖片咋變成機器人了,那是因為我在布局文件里面設置了:
[html]?view plaincopy
<com.handmark.pulltorefresh.library.PullToRefreshGridView?? ???????ptr:ptrDrawable="@drawable/ic_launcher"?? ???????...?? ???????/>??
當然了這是旋轉的效果,一般常用的還有,一個箭頭倒置的效果,其實也很簡單,一個屬性:
ptr:ptrAnimationStyle="flip"
去掉?ptr:ptrDrawable="@drawable/ic_launcher"這個屬性,如果你希望用下圖默認的箭頭,你也可以自定義。
添加后,箭頭就是這個樣子:
ptr:ptrAnimationStyle的取值:flip(翻轉動畫), rotate(旋轉動畫) 。?
ptr:ptrDrawable則就是設置圖標了。
4、自定義下拉指示器文本內容等效果
可以在初始化完成mPullRefreshListView后,通過mPullRefreshListView.getLoadingLayoutProxy()可以得到一個ILoadingLayout對象,這個對象可以設置各種指示器中的樣式、文本等。
[java]?view plaincopy
ILoadingLayout?startLabels?=?mPullRefreshListView?? ????????????????.getLoadingLayoutProxy();?? ????????startLabels.setPullLabel("你可勁拉,拉...");?? ????????startLabels.setRefreshingLabel("好嘞,正在刷新...");?? ????????startLabels.setReleaseLabel("你敢放,我就敢刷新...");??
如果你比較細心,會發現,前面我們設置上次刷新時間已經用到了:
// Update the LastUpdatedLabel
refreshView.getLoadingLayoutProxy().setLastUpdatedLabel(label);
現在的效果是:
默認是上拉和下拉的字同時改變的,如果我希望單獨改變呢?
[java]?view plaincopy
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返回設置上拉的。
5、常用的一些屬性
當然了,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,其他兩個依賴不用導入。
好了,如果你覺得本篇博客對你有用,就點個贊~留個言吧
源碼點擊下載
總結
以上是生活随笔為你收集整理的Android PullToRefresh (ListView GridView 下拉刷新) 使用详解的全部內容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。