Android Development notes -- pull-down refresh and pull-up loading for open-source components PullToRefresh (one-minute processing, super simple) and Android pulltorefresh

Android Development notes -- pull-down refresh and pull-up loading for open-source components PullToRefresh (one-minute processing, super simple) and Android pulltorefresh

Preface

Previously, when we implemented ListView pull-down refresh and pull-up to load data, we inherited some native ListView methods to rewrite it, which was very complicated to implement, we need to customize the pull-down refresh and pull-up layout files for the ListView, add ScrollView and OnTouch listeners, and set the callback interface to get data. For better interaction experience, we cannot directly use setVisibility to hide the display layout and many other operations. We are exhausted. (Digress: pull-down refresh in the new version of the android-support-v4.jar, in fact, Google has provided us with a control called SwipeRefreshLayout, the use of the method is also very simple, interested friends can know their own online) its implementation effect is roughly as follows:

 

Today, let's talk about how to use the open-source project PullToRefresh. With just a few lines of code, we can implement the pull-down refresh and pull-up loading functions. (Although open-source things are easy to use, it is recommended that you do not need open-source components to implement the desired results by yourself. After all, you need to understand the principles, I try to be concise and enter the topic.

Let's take a look at the final implementation:

 

Preparations

1. Since the PullToRefresh component is used to implement pull-down refresh and pull-up data loading, We need to download it first.

This is the PullToRefresh on GitHub: https://github.com/chrisbanes/Android-PullToRefresh/wiki/Quick-Start-Guide

It's easy. After the download, we can start development.

 

Sharpen the knife without mistake

1. First, import the project

After importing the project, we will find a lot of red forks, don't worry, this is just a reference library path error, we right click the file with red forks select Properties, select Andorid drop-down, just re-introduce the corresponding library, and draw the gourd Based on the samples. Other red-cross files also do the same.

　　

After the Red Cross are solved, there is a very important thing to do, the android-support-v4.jar of all the folders just imported and your own project v4 package unified, avoid project running errors caused by inconsistent v4 package versions.

 

Work!

Layout file, which is very simple. Only one ListView can be pulled and refreshed.

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2     xmlns:tools="http://schemas.android.com/tools" 3     android:layout_width="match_parent" 4     android:layout_height="match_parent"> 5  6     <com.handmark.pulltorefresh.library.PullToRefreshListView 7         android:id="@+id/mylistview" 8         android:layout_width="match_parent" 9         android:layout_height="match_parent"10         >11         </com.handmark.pulltorefresh.library.PullToRefreshListView>12 13 </RelativeLayout>

 

Main code file:

1 package com. rabbit. pulltorefreshdemo; 2 3 import java. util. arrayList; 4 import java. util. list; 5 6 import android. app. activity; 7 import android. OS. asyncTask; 8 import android. OS. bundle; 9 import android. widget. arrayAdapter; 10 import android. widget. listView; 11 12 import com. handmark. pulltorefresh. library. pullToRefreshBase; 13 import com. handmark. pulltorefresh. library. pullToRefreshBase. mode; 14 import com. handmark. pulltorefresh. library. pullToRefreshBase. onRefreshListener; 15 import com. handmark. pulltorefresh. library. pullToRefreshListView; 16 17 public class MainActivity extends Activity {18 19 // declaration pull-down refresh ListView component 20 private PullToRefreshListView myListView; 21 // declare data source 22 private List <String> data; 23 // declare the adapter 24 private ArrayAdapter <String> adapter; 25 26 @ Override 27 protected void onCreate (Bundle savedInstanceState) {28 super. onCreate (savedInstanceState); 29 setContentView (R. layout. activity_main); 30 // retrieve the drop-down list to refresh the ListView component 31 this. myListView = (PullToRefreshListView) findViewById (R. id. mylistview); 32 // simulate data 33 this. data = new ArrayList <String> (); 34 data. add ("JAVA"); 35 data. add ("PHP"); 36 data. add ("C ++"); 37 data. add ("C #"); 38 // instantiate Adapter 39 this. adapter = new ArrayAdapter <> (MainActivity. this, android. r. layout. simple_list_item_1, data); 40 // set Adapter 41 myListView. setAdapter (adapter); 42 // The setting supports up and down pulling and listening to 43 myListView. setMode (Mode. BOTH); 44 myListView. setOnRefreshListener (new OnRefreshListener <ListView> () {45 46 @ Override 47 public void onRefresh (PullToRefreshBase <ListView> refreshView) {48 49 if (refreshView. isShownHeader () {50 // determine whether the header layout is visible. If it is visible, execute the drop-down to refresh 51 // set the tail layout style text 52 myListView. getLoadingLayoutProxy (). setRefreshingLabel ("refreshing"); 53 myListView. getLoadingLayoutProxy (). setPullLabel ("pull down to refresh data"); 54 myListView. getLoadingLayoutProxy (). setReleaseLabel ("Release start refresh"); 55 // simulate loading data thread rest for 3 seconds 56 new AsyncTask <Void, Void, Void> () {57 @ Override 58 protected Void doInBackground (Void... params) {59 try {60 Thread. sleep (3000); 61 data. add ("refresh data 1"); 62 data. add ("refresh data 2"); 63 data. add ("refresh data 3"); 64} catch (InterruptedException e) {65 e. printStackTrace (); 66} 67 return null; 68} 69 70 @ Override 71 protected void onPostExecute (Void result) {72 super. onPostExecute (result); 73 // complete the update operation for the pull-down refresh ListView 74 adapter. notifyDataSetChanged (); 75 // collapse the drop-down list 76 myListView. onRefreshComplete (); 77} 78 rows .exe cute (); 79} 80 if (refreshView. isShownFooter () {81 // determine whether the tail layout is visible. If it is visible, pull up and load more 82 // set the tail layout style text 83 myListView. getLoadingLayoutProxy (). setRefreshingLabel ("loading"); 84 myListView. getLoadingLayoutProxy (). setPullLabel ("pull up to load more"); 85 myListView. getLoadingLayoutProxy (). setReleaseLabel ("Release start loading"); 86 // simulate loading data thread rest for 3 seconds 87 new AsyncTask <Void, Void, Void> () {88 @ Override 89 protected Void doInBackground (Void... params) {90 try {91 Thread. sleep (3000); 92 data. add ("more data 1"); 93 data. add ("more data 2"); 94 data. add ("more data 3"); 95} catch (InterruptedException e) {96 e. printStackTrace (); 97} 98 return null; 99} 100 101 @ Override102 protected void onPostExecute (Void result) {103 super. onPostExecute (result); 104 // complete the update operation on the pull-down refresh ListView 105 adapter. notifyDataSetChanged (); 106 // collapse the drop-down view to 107 myListView. onRefreshComplete (); 108} 109 cmd.exe cute (); 110 111 112} 113} 114}); 115 116} 117 118 119}

In fact, the usage is similar to that of normal ListView, but some attribute settings are added. Here are a few notes:

1. Set the Mode. By default, the PullToRefresh refresh Mode only supports pull-down refresh. We can set it through setMode (Mode. XXXX ).

1 BOTH: BOTH pull-up and pull-down refreshes Support 2 DISABLED: Disable pull-up and pull-down refresh 3 PULL_FROM_START: only pull-down refresh (default) 4 PULL_FROM_END: only pull-up refresh 5 MANUAL_REFRESH_ONLY: manual triggering is allowed only

 

2. Add the above description to 1st points. When we set the mode to BOTH, we can pull down and pull up, but their styles are the same here, the scenario we need is to display "pull-down refresh data, refreshing data, data refresh successful .... ", and the scenario we should use when pulling up is" pulling up and loading data, loading data... ", so we need to set the style here.

Because PullToRefresh does not determine whether it is a pull or drop-down method by default, we need to modify its code in the source code, Ctrl + Shift + t search for the PullToRefreshBase class, after opening the file, we can add such a piece of code at the end. We can execute the pull-down refresh command when the header layout is visible and the pull-down command when the tail layout is visible, in this way, we can determine whether the user is performing the pull-up or pull-down operations based on the head and tail layout.

1 // determine whether the header is displayed. If it is displayed, the header is displayed in a drop-down mode. True is the drop-down 2 public boolean isShownHeader () {3 return getHeaderLayout (). isShown (); 4} 5 // determine whether the lower part is displayed. If the lower part is displayed, the lower part is displayed. True: Pull up 6 public boolean isShownFooter () {7 return getFooterLayout (). isShown (); 8}

Others. Let's take a look at my code comments and write them in great detail.

Supplement: PullToRefresh not only supports ListView, such as ScrollView and GridView, but can be used to scroll to the control, for more information, see LauncherActivity in the project we first imported.

 

 

Author: Balla _ rabbit
Source: http://www.cnblogs.com/lichenwei/
The copyright of this article is shared by the author and the blog. You are welcome to repost this article, but you must keep this statement without the author's consent and provide the original article link clearly on the article page.
I am reading this kid's shoes from my blog. I think you are so angry that you have a secret of the king in your conversation. You will do something in the future! With the word "recommendation" next to it, you can just click it. it's accurate. I don't accept anything. If you're not sure, you can come back to me!