Android's official pull-down refresh component SwipeRefreshLayout

1. Problem Description

In Android development, the most commonly used data refresh method is pull-to-refresh, and the third-party open source library PullToRefresh is the most commonly used to complete this function. Nowadays, Google can't help but launch its own pull-down component SwipeRefreshLayout. Let's analyze and learn how to use SwipeRefreshLayout through API documents and source code.

First look at the effect diagram:

2. Specific usage of SwipeRefreshLayout

Next, let's look at the specific usage of SwipeRefreshLayout. As the name implies, this component is a layout, but it should be noted that there can only be one direct child View in this layout. In fact, through the documentation, we can know that SwipeRefreshLayout is just an inheritance of ViewGroup.

Looking at the document, we can know that there is an interface in SwipRefreshLayout, through which we can listen to sliding gestures. In fact, the most important step in using this component is to implement the onRefresh method of this interface, and implement the data update operation in this method. As follows:

Methods in the interface:

1. setOnRefreshListener(SwipeRefreshLayout.OnRefreshListener listener): Set the gesture sliding listener.

2. setProgressBackgroundColor(int colorRes): Set the background color of the progress circle.

3. setColorSchemeResources(int... colorResIds): sets the color of the progress animation.

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

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

After figuring out the API, let's do the actual coding. First, make the layout. The specific contents are as follows:

 <?xml version= "1.0" encoding= "utf-8" ?>
 <android.support.v4.widget.SwipeRefreshLayout
    xmlns:android= "http://schemas.android.com/apk/res/android"  
    android:layout_width= "match_parent"  
    android:layout_height= "match_parent"  
    android:orientation= "vertical"  
    android:id= "@+id/swipeLayout" > 
      
 <ListView
        android:id= "@+id/mylist"  
        android:layout_width= "match_parent"  
        android:layout_height= "wrap_content" /> 
     
 </android.support.v4.widget.SwipeRefreshLayout>

#p#

The core code of 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 to 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 found two important properties in SwipeRefreshLayout:

private MaterialProgressDrawable mProgress;

private CircleImageView mCircleView;
These two properties are used to achieve the progress animation effect. In the createProgressView method, we 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, and MaterialProgressDrawabel inherits Drawable. So far, we have understood how the progress animation is implemented. The specific details are not repeated in detail. You can check the source code by yourself

lass CircleImageView extends ImageView

class MaterialProgressDrawable extends Drawable implements Animatable

The specific drop-down function is mainly implemented in the onInterceptTouchEvent and onTouchEvent methods. I will not post the specific code here, you can check it yourself.