Android pull-down refresh and pull more extended ListView

Android pull-down refresh and pull more extended ListView
Pull refresh to pull more extended ListView

As we can see in many apps, sliding your finger under the screen on a list will show a hidden View above the list. Generally, the words "pull-down refresh" are written, which means, we slide our fingers below, and the words will become "Open refresh". At this time, we will open our fingers on the screen and we will see the words "refreshing... "and there is a rotation progress waiting for rotation. After 1 or 2 seconds, the new data in the list is loaded, and the view of this prompt is hidden. This is the pull-down refresh control in Android. Now we can implement this control by ourselves. First, Let's explain the principle. For example:

1. listView can use addHeaderView (header) to add the header Layout View, that is, the header is the view that displays the pull-down refresh, and then set the topMargin of the header to its height header. the negative value of getHeight () is hidden at the top of the screen, as shown in;

2. Set the slide listener setOnscrollListner for listview to monitor the slide status of users' fingers. It can be used to determine whether the user's fingers are pressed, slide, and lifted, then, dynamically update the slider to the margin of the listview header Based on the sliding distance of the finger, so that the entire listview will slide down, at this time, the header hidden on the top of the mobile phone screen will gradually scroll out from the top of the screen, as shown in. When the header is completely rolled out, the distance between the listView sliding down and the Height is greater than the header Height. At this time, the display status of the new header is displayed, and the header is displayed as "Open refresh ", that is, release the finger listview and refresh it.

3. When the header is displayed as a release refresh, the finger leaves the screen at this time, that is, the click event is MotionEvent. UP, the screen will show "refreshing... "and there will be a refresh progress bar on the left waiting for Refresh. After the new data of the master Acitivity is loaded, the header will be hidden, so that the principle of a positive pull-down refresh will be finished.

 

 

After we finish the pull-down refresh process, we will talk about pulling and loading more.

In a lot of listview list data, when we pull to the bottom, a circular progress bar and a "loading more... "It is mainly used to load network data by page. When we access network data, if there is a large amount of data, we usually use paging to process the data and load the data in batches, this will relieve the pressure on the mobile phone end to access a large amount of data. After all, the loading time will be long, and the user's waiting time will also increase, which is not conducive to the user experience. Therefore, it is used in listview to load more resources. It is also a required knowledge for android development.

 

As shown in, listview uses addFooterView to determine if it slides to the bottom and then adds the bottom View to the listview. Let the activity implement the refresh interface of the listview. When the listview slides to the bottom and then responds to the interface, after loading more implementations, it starts to set the loadingComplete () method of the listiview, load more views to hide them.

 

Okay, that's how it works. Now let's look at the effect.

 

 

The following is the RefreshListView code.

 

Package com. example. myfirst. pulltorefreshlist; import android. content. context; import android. util. attributeSet; import android. view. motionEvent; import android. view. view; import android. view. animation. animation; import android. view. animation. rotateAnimation; import android. widget. absListView; import android. widget. absListView. onScrollListener; import android. widget. imageView; import android. widget. listView; Import android. widget. progressBar; import android. widget. textView; import java. text. simpleDateFormat; public class RefreshListView extends ListView implements OnScrollListener {/*** pull-down refresh Part */private static final String TAG = "RefreshListView"; private int firstVisibleItemPosition; // position private int downY of the first visible item in listview Iew headerView; // view private final int DOWN_PULL_REFERESH = 0; // The private final int RELEASE_REFRESH state is private final int RELEASE_REFRESH = 1; // private final int REFRESHING = 2; // private int currentState = DOWN_PULL_REFERESH; // the current state of listView, the default value is "pull-down refresh" status private Animation upAnimation; // The drop-down arrow changes to the Animation private Animation downAnimation; // The up arrow changes to the Animation private ImageView ivArrow of the down arrow; // drop-down arrow private ProgressBar flat OgressBar; // progress bar private TextView tvState; // The text private TextView tvLastUpdateTimes that shows the status; // display the last update time/*** load more parts at the bottom */private boolean isScrollToBottom; // you can see if the private View footerView is at the bottom; // The footer view private int footerViewHeight at the bottom; // The height of the bottom view is private boolean isLoadingMore = false; // you can check whether it is the "load more"/*** listview interface, listen to the listview to refresh and pull up and load more */private OnRefreshListener mOnRefreshListener; public R EfreshListView (Context context, AttributeSet attrs) {super (context, attrs); initHeaderView (); initFooterView (); this. setOnScrollListener (this);}/*** initialize the bottom view */private void initFooterView () {footerView = View. inflate (getContext (), R. layout. footer_layout, null); // set (0, 0) so that the system can measure the width and height of footerView. measure (0, 0); footerViewHeight = footerView. getMeasuredHeight (); footerView. setPadding (0, -FooterViewHeight, 0, 0); this. addFooterView (footerView);}/*** initialize the top view */private void initHeaderView () {headerView = View. inflate (getContext (), R. layout. header_layout, null); ivArrow = (ImageView) headerView. findViewById (R. id. pull_to_refresh_icon); mProgressBar = (ProgressBar) headerView. findViewById (R. id. refresh_progressbar); tvState = (TextView) headerView. findViewById (R. id. hint_text); TV LastUpdateTimes = (TextView) headerView. findViewById (R. id. refresh_time); // tvLastUpdateTimes updated recently. setText ("recently updated:" + getLastUpdateTime (); // set () so that the system can measure the width and height of the footerView headerView. measure (0, 0); headerViewHeight = headerView. getMeasuredHeight (); headerView. setPadding (0,-headerViewHeight, 0, 0); this. addHeaderView (headerView); initAnimation ();}/*** obtain the latest update time */private String getLastUpdateTime (){ SimpleDateFormat sdf = new SimpleDateFormat ("yyyy-mm-dd HH: mm: ss"); return sdf. format (System. currentTimeMillis ();}/*** initialize the Animation */private void initAnimation () {upAnimation = new RotateAnimation (0f,-180f, Animation. RELATIVE_TO_SELF, 0.5f, Animation. RELATIVE_TO_SELF, 0.5f); upAnimation. setDuration (500); upAnimation. setFillAfter (true); // if it is set to true, it indicates that after the animation is completed, the animation state is downAnimation = new RotateAnimation. (-180f,-360f, Animation. RELATIVE_TO_SELF, 0.5f, Animation. RELATIVE_TO_SELF, 0.5f); downAnimation. setDuration (500); downAnimation. setFillAfter (true); // if it is set to true, it indicates that the animation is in the animation state after the animation is completed.}/*** the touche event of listView is determined by the finger on the listview, press, slide, and lift a set of finger actions to implement * pull-down refresh and pull-up loading more ** @ param ev * @ return */@ Override public boolean onTouchEvent (MotionEvent ev) {switch (ev. getAction () {case MotionEvent. ACTION_DOWN: downY = (Int) ev. getY (); break; case MotionEvent. ACTION_MOVE: int moveY = (int) ev. getY (); // get the sliding distance half the length, so that the finger slides on the screen for a long distance, headerview is not very high, // mainly for the sake of appearance, you do not need to divide 2, look at your own design, but in addition to 2, the display effect should be better int diff = (moveY-downY)/2; // set the distance between the top view and the top padding to int paddingTop =-headerViewHeight + diff; // if the first position currently visible is 0, if (firstVisibleItemPosition = 0 &-headerViewHeight <paddingTop) {// paddingTop> 0 indicates that headerView is completely pulled from the top and And the current status is "pull-down refresh" // change the current status to "Open refresh", and call refeshHeaderView () to update the interface if (paddingTop> 10 & currentState = DOWN_PULL_REFERESH) {currentState = RELEASE_REFRESH; refreshHeaderView ();} // paddingTop <0 indicates that the headerView is not completely pulled from the top, and the current status is "Release refresh" // change the current status to "pull-down refresh", and call the refeshHeaderView () Update interface; // in this case, after the refresh is completely pulled out, the finger is not raised, and then goes back to the top else if (paddingTop <10 & currentState = RELEASE_REFRESH) {currentState = DOWN_PULL_REFERESH; RefreshHeaderView ();} // dynamically refresh the top padding of headerView, so that lisview dynamically changes headerView. setPadding (0, paddingTop, 0, 0); return true;} break; // when the finger is lifted, the current status of the listview is case MotionEvent. ACTION_UP: // determine the current status if (currentState = RELEASE_REFRESH) {// if it is "Release refresh", set the padding of headerView to 0 headerView. setPadding (0, 0, 0, 0); // set the current status to "REFRESHING" currentState = REFRESHING; refreshHeaderView (); // determine whether the interface for refreshing is set outside if (mOnRefr EshListener! = Null) {// If an interface is set, call the pull-down refresh method mOnRefreshListener in the interface. onDownPullRefresh () ;}} else if (currentState = DOWN_PULL_REFERESH) {// if the current status is "pull-down refresh", the headerView is hidden. setPadding (0,-headerViewHeight, 0, 0);} break; default: break;} return super. onTouchEvent (ev);}/*** update the display content of the control in the view Interface Based on the current State currentState? */Private void refreshHeaderView () {switch (currentState) {case DOWN_PULL_REFERESH: tvState. setText ("pull-down refresh"); ivArrow. startAnimation (downAnimation); break; case RELEASE_REFRESH: tvState. setText ("Release refresh"); ivArrow. startAnimation (upAnimation); break; case REFRESHING: ivArrow. clearAnimation (); ivArrow. setVisibility (View. GONE); mProgressBar. setVisibility (View. VISIBLE); tvState. setText ("refreshing... "); brea K; default: break;}/*** listens to the status change of the listview scroll. If it slides to the bottom, "load more... "*/@ Override public void onScrollStateChanged (AbsListView view, int scrollState) {if (scrollState = SCROLL_STATE_IDLE | scrollState = SCROLL_STATE_FLING) {if (isScrollToBottom &&! IsLoadingMore) {isLoadingMore = true; footerView. setPadding (0, 0, 0, 0); this. setSelection (this. getCount (); if (mOnRefreshListener! = Null) {mOnRefreshListener. onLoadingMore () ;}}}/*** monitors the status change of listview scrolling, determines whether the current slide is to the bottom ** @ param view * @ param firstVisibleItem * @ param visibleItemCount * @ param totalItemCount */@ Override public void onScroll (AbsListView view, int cursor, int visibleItemCount, int totalItemCount) {firstVisibleItemPosition = firstVisibleItem; if (getLastVisiblePosition () = (totalItemCount-1) {isScrollToBottom = true;} else {isScrollToBottom = false ;}} /*** sets the listener interface. When it is ** @ param listener */public void setOnRefreshListener (OnRefreshListener listener) {mOnRefreshListener = listener;}/*** provides external methods, after the data in the Activity is loaded, call this method to hide the headerView */public void onRefreshComplete () {headerView. setPadding (0,-headerViewHeight, 0, 0); ivArrow. setVisibility (View. VISIBLE); mProgressBar. setVisibility (View. GONE); tvState. setText ("pull-down refresh"); tvLastUpdateTimes. setText ("last updated:" + getLastUpdateTime (); currentState = DOWN_PULL_REFERESH;}/*** provides external methods. After loading more data in the Activity, call this method to hide the footerView */public void loadMoreComplete () {headerView. setPadding (0,-headerViewHeight, 0, 0); isLoadingMore = false;}/*** sets the interface for external implementation, listen to the refresh and Load Status of listview */public interface OnRefreshListener {/*** pull-down refresh */void onDownPullRefresh (); /*** pull up to load more */void onLoadingMore ();}}