Android creates (ListView, GridView, etc.) general drop-down refresh, pull automatically loaded components, androidgridview

Android creates (ListView, GridView, etc.) general drop-down refresh, pull automatically loaded components, androidgridview
Preface

The usage of the pull-down refresh component during development is very high, which is usually used by apps connected to the Internet. For development efficiency, the use of open-source libraries recognized by everyone must be the most efficient, but the premise of not repeatedly inventing the wheel is that you have to know how the wheel was invented, and you can implement these functions on your own. Otherwise, you only know how it works and do not practice it. If you are a programmer, you will encounter real problems. Otherwise, you will just think that you understand it. Today, this article is based on the fact that we have repeatedly invented the wheel. we can improve our understanding by implementing classic and high-usage components. Let's study it together.

Overall Layout Structure

Figure 1 Figure 2

The component uses the LinearLayout in the vertical direction as the root view, including Header, ContentView, and Foooter. The components are arranged from top to bottom, and the width and height of ContentView are match_parent, the width and height of footer and header are match_parent and wrap_content respectively. The original effect is 1. When headers and Foooter are initially hidden by setting padding, 2. Set the height of the Header whose paddingTop is negative. Similarly, Footer sets paddingBottom to the negative Footer height of Footer to achieve the hidden effect. Therefore, only the ContentView area is displayed. When the user pulls down to the top and continues to pull down, the pull-down refresh operation is triggered. When the user pulls up to the bottom and continues to pull up, more operations are triggered.

Although the Principles are simple, the implementation will also cause a lot of minor troubles. The onTouchListener method is not used here. Therefore, the "HOLD" view at the top of the ListView will still appear in the pull-down mode. This implementation method is quite simple. For details, refer to the full parsing of the Android pull-down refresh function of Guo Shen's blog, and teach you how to implement the pull-down refresh function in one minute.

The basic principle of pull-down refresh is to determine whether the ContentView (ListView is used as an example here) is at the top of the onInterceptTouchEvent method when the user slides the components on the screen, if you reach the top and the user continues to decline, the touch event will be intercepted to prevent it from being distributed to the ListView. That is, true will be returned in onInterceptTouchEvent (For details, refer to the following: android Touch event distribution process. In this way, the touch event is distributed to the onTouchEvent function. The processing logic of the user's touch event is mainly in this function. If this function returns false, the touch event will be distributed to its Child View. The Child View here is the ListView. When false is returned, the ListView will be rolled when the user slides the screen.

/** Intercept the touch event when appropriate. This indicates that the event is intercepted when the mContentView slides to the top and is pulled down. Otherwise, the event is not blocked, it is handed to its child * view for processing. * @ See * android. view. viewGroup # onInterceptTouchEvent (android. view. motionEvent) * // @ Override public boolean onInterceptTouchEvent (MotionEvent ev) {/** This method JUST determines whether we want to intercept the motion. * If we return true, onTouchEvent will be called and we do the actual * scrolling there. */final int action = MotionEventCompat. getActionMasked (ev); // Always handle the case of the touch gesture being complete. if (action = MotionEvent. ACTION_CANCEL | action = MotionEvent. ACTION_UP) {// Do not intercept touch event, let the child handle it return false;} switch (action) {case MotionEvent. ACTION_DOWN: mYDown = (int) ev. getRawY (); break; case MotionEvent. ACTION_MOVE: // int yDistance = (int) ev. getRawY ()-mYDown; mYDistance = (int) ev. getRawY ()-mYDown; showStatus (mCurrentStatus); Log. d (VIEW_LOG_TAG, "% isBottom:" + isBottom () + ", isTop:" + isTop () + ", mYDistance:" + mYDistance ); // if it is pulled to the top and is a drop-down, the touch event is intercepted and then transferred to onTouchEvent to handle the pull-down refresh event if (isTop () & mYDistance> 0) | (mYDistance> 0 & mCurrentStatus = STATUS_REFRESHING) {return true;} break;} // Do not intercept touch event, let the child handle it return false ;}

First, we record the Y axis coordinate mYDown of the User-pressed touch point in the ACTION_DOWN event, and then obtain the Y axis coordinate again in ACTION_MOVE to calculate the difference between the two. If the sliding difference is greater than mTouchSlop, the processing continues. mTouchSlop is the minimum threshold value for judging whether a touch sliding event is valid. If it is smaller than this threshold value, we think this touch sliding event is invalid, for example, if you shake your hand and the distance is short, we ignore similar events. Within the valid sliding distance, we can determine the status of the current component. If it is not refreshing, we can set different values based on the height of the paddingTop of the current ListView, if the height of paddingTop is greater than 70% of the ListView height, set the current status to "Release refresh", that is, STATUS_RELEASE_TO_REFRESH. Otherwise, set the status to "continue drop-down, that is, "STATUS_PULL_TO_REFRESH ". Through this paddingTop height, we stipulate that the user will not Refresh after the user's pull-down distance reaches a certain distance, otherwise it will be regarded as invalid drop-down. However, no matter what the status is at this time, we will modify the padding Top attribute of the Header to achieve the effect of stretching the header. When the status is "Release refresh", we raise our finger and start the ACTION_UP event. In this case, we will perform the pull-down refresh operation in this event. The onTouchEvent code is as follows:

/** Handle the touch event here to achieve the pull-down refresh or pull-up automatic loading problem * @ see android. view. view # onTouchEvent (android. view. motionEvent) * // @ Override public boolean onTouchEvent (MotionEvent event) {Log. d (VIEW_LOG_TAG, "@ onTouchEvent: action =" + event. getAction (); switch (event. getAction () {case MotionEvent. ACTION_DOWN: mYDown = (int) event. getRawY (); Log. d (VIEW_LOG_TAG, "#### ACTION_DOWN"); break; case MotionEvent. ACTION_MOVE: Log. d (VIEW_LOG_TAG, "#### ACTION_MOVE"); int currentY = (int) event. getRawY (); mYDistance = currentY-mYDown; // refresh if (mYDistance> = mTouchSlop) {if (mCurrentStatus! = STATUS_REFRESHING) {// if (mHeaderView. getPaddingTop ()> mHeaderViewHeight * 0.7f) {mCurrentStatus = STATUS_RELEASE_TO_REFRESH; mTipsTextView. setText (R. string. pull_to_refresh_release_label);} else {mCurrentStatus = STATUS_PULL_TO_REFRESH; mTipsTextView. setText (R. string. pull_to_refresh_pull_label) ;}} rotateHeaderArrow (); int scaleHeight = (int) (mYDistance * 0.8f); // go to 80% of the sliding distance, reduce the sensitivity. // the header will be stretched only when the sliding distance of the Y axis is smaller than the screen height. Otherwise, it will remain unchanged if (scaleHeight <= mScrHeight/4) {adjustHeaderPadding (scaleHeight );}} break; case MotionEvent. ACTION_UP: // specific actions for pulling down and refreshing doRefresh (); break; default: break;} return true ;}

The Code is as follows:

/*** Execute the refresh operation */private final void doRefresh () {if (mCurrentStatus = STATUS_RELEASE_TO_REFRESH) {// set the status to refreshing mCurrentStatus = STATUS_REFRESHING; mArrowImageView. clearAnimation (); // hide the arrow icon mArrowImageView in the header. setVisibility (View. GONE); // set the progress bar in the header to see the mHeaderProgressBar. setVisibility (View. VISIBLE); // set some text mTimeTextView. setText (R. string. pull_to_refresh_update_time_label); SimpleDateFo Rmat sdf = new SimpleDateFormat (); mTimeTextView. append (sdf. format (new Date (); // mTipsTextView. setText (R. string. pull_to_refresh_refreshing_label); // execute the callback if (mPullRefreshListener! = Null) {mPullRefreshListener. onRefresh ();} // display the headview properly until the refreshComplete is called and the new headerviewhidetask(cmd.exe cute (0 );} else {// hide header view adjustHeaderPadding (-mHeaderViewHeight );}}

When the status is refreshed, the header is normally displayed, that is, the padding top must be set to 0. We use an asynchronous task to gradually modify the value of the padding top, this allows the header to gradually and smoothly restore the original size from the stretch effect. After the user calls the refreshComplete () function, that is, after the refresh is complete, gradually adjust the padding top Of The listview to hide it. So far, the entire pull-down refresh process has ended. It is much easier to slide to the bottom and slide to the bottom. We also describe the ContentView as the ListView. The principle is to listen to the rolling events of ListView (I .e. ContentView). Therefore, if the ContentView type does not support rolling events, this function cannot be implemented. Listview meets the requirements, so it can be automatically loaded. In the onScroll function, we determine whether the listview has reached the last item. If the last item is reached, footer is displayed and loading starts. When you call the loadMoreComplete function, table loading ends. At this time, the footer is hidden and the process ends.

/** Scroll events to pull and load more when sliding to the bottom * @ see android. widget. absListView. onScrollListener # onScroll (android. widget. * AbsListView, int) */@ Override public void onScroll (AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {Log. d (VIEW_LOG_TAG, "& mYDistance =" + mYDistance); if (mFooterView = null | mYDistance> = 0 | mCurrentStatus = STATUS_LOADING | mCurrentStatus = STATUS_REFRESHING) {return;} loadmore ();}/*** load more when pulling down to the bottom */private void loadmore () {if (isShowFooterView () & mLoadMoreListener! = Null) {mFooterTextView. setText (R. string. pull_to_refresh_refreshing_label); mFooterProgressBar. setVisibility (View. VISIBLE); adjustFooterPadding (0); mCurrentStatus = STATUS_LOADING; mLoadMoreListener. onLoadMore ();}}

Specifically, the isShowFooterView function called by the loadmore function is used to determine whether it is at the bottom. The Code is as follows:

/** Return true if the last item is pulled down to listview. The system automatically loads the * @ see com. uit. pullrefresh. base. pullRefreshBase # isShowFooterView () */@ Override protected boolean isShowFooterView () {if (mContentView = null | mContentView. getAdapter () = null) {return false;} return mContentView. getLastVisiblePosition () = mContentView. getAdapter (). getCount ()-1 ;}

OK. Now the entire core process has been introduced.

ListView

TextView pull-down refresh

Github address

Click here!

You can pull and refresh more source code from a drop-down list on the android listview.

1035688327@qq.com
Please check it!
I will give you the source code of the project. You can think about it by yourself. The data in it also has a local storage.

Kneel Android development ListView pull-down refresh, pull up and load source code