Android official pull-down refresh component SwipeRefreshLayout

Android official pull-down refresh component SwipeRefreshLayout

I. Problem Description

In android development, the most frequently used data refresh method is pull-down refresh, and the third-party open source library PullToRefresh is used to complete this function. Now, google has released its own drop-down component SwipeRefreshLayout. Next we will analyze and learn how to use SwipeRefreshLayout through api documentation and source code.

　　First look:

Ii. Usage of SwipeRefreshLayout

Next let's take a look at the specific usage of SwipeRefreshLayout. As the name suggests, this component is a layout, but note that there can only be one direct sub-View in this layout. In fact, we can see through the documentation that SwipeRefreshLayout only inherits the ViewGroup.

We can see that there is an interface in SwipRefreshLayout, through which we can monitor the sliding gesture. In fact, the most important step to use this component is to implement the onRefresh method of this interface, update Data in this method. As follows:

Method in the interface:

In addition to the OnRefreshListener interface, SwipRefreshLayout has some other important methods, such:

1. setOnRefreshListener (SwipeRefreshLayout. OnRefreshListener listener): sets the gesture slide listener.

2. setProgressBackgroundColor (int colorRes): sets the background color of the Progress circle.

3. setColorSchemeResources (int... ColorResIds): sets the color of the Progress animation.

4. setRefreshing (Boolean refreshing): sets the flushing status of the component.

5. setSize (int size): Set the progress circle size. There are only two values: DEFAULT and LARGE.

After figuring out the API, we will perform the actual encoding below. First, we will make the layout first. The specific content is as follows:

The core code of the Activity is as follows:

SwipeRefreshLayout = (SwipeRefreshLayout) findViewById (R. id. swipeLayout); swipeRefreshLayout. setColorSchemeResources (R. color. swipe_color_1, R. color. swipe_color_2, R. color. swipe_color_3, R. color. swipe_color_4); swipeRefreshLayout. setSize (SwipeRefreshLayout. LARGE); swipeRefreshLayout. setProgressBackgroundColor (R. color. swipe_background_color); // swipeRefreshLayout. setPadding (20, 20, 20, 20); // swipeRefreshLayout. setProgressViewOffset (true, 100,200); // swipeRefreshLayout. setDistanceToTriggerSync (50); swipeRefreshLayout. setProgressViewEndTarget (true, 100); swipeRefreshLayout. setOnRefreshListener (new OnRefreshListener () {@ Override public void onRefresh () {new Thread (new Runnable () {@ Override public void run () {data. clear (); for (int I = 0; I <20; I ++) {data. add ("SwipeRefreshLayout pull-down refresh" + I);} try {Thread. sleep (5000);} catch (InterruptedException e) {e. printStackTrace ();} mHandler. sendEmptyMessage (1 );}}). start () ;}}); // handler private Handler mHandler = new Handler () {@ Override public void handleMessage (Message msg) {super. handleMessage (msg); switch (msg. what) {case 1: swipeRefreshLayout. setRefreshing (false); adapter. notifyDataSetChanged (); // swipeRefreshLayout. setEnabled (false); break; default: break ;}}};

Through the above steps, we have implemented a simple pull-down refresh operation. On this basis, we can analyze and study how SwipeRefreshLayout is implemented.

Through the source code, we can find two important attributes in SwipeRefreshLayout:

Private MaterialProgressDrawable mProgress;

Private CircleImageView mCircleView;

These two attributes are used to achieve the progress animation effect. In the createProgressView method, we can see that mCircleView is finally added to SwipeRefreshLayout.

private void createProgressView() { mCircleView = new CircleImageView(getContext(), CIRCLE_BG_LIGHT, CIRCLE_DIAMETER/2); mProgress = new MaterialProgressDrawable(getContext(), this); mProgress.setBackgroundColor(CIRCLE_BG_LIGHT); mCircleView.setImageDrawable(mProgress); mCircleView.setVisibility(View.GONE); addView(mCircleView); }

At the same time, we can also see that CirlceImageView inherits ImageView, while MaterialProgressDrawabel inherits Drawable, so far we can understand how progress animation is implemented. The details are not described too much, you can view the source code on your own.

Class CircleImageView extends ImageView

Class MaterialProgressDrawable extends Drawable implements Animatable

The specific implementation of the drop-down function is mainly completed in the onInterceptTouchEvent and onTouchEvent methods. Here I will not post the specific code. You can view it on your own.

 

To learn more, you can download the complete project and run it on your own! If you have any questions, please refer to the post for discussion ~