Detailed explanation of the top refresh implementation of RecyclerView in Android
1. The principle of RecyclerView top refresh
The implementation of top refresh of RecyclerView usually wraps another layer of layout outside the RecyclerView. In this outer layout, a custom View is also included as an indicator View when refreshing the top. That is to say, the outer layout contains two children, one top refresh View and one RecyclerView, and the top refresh View is hidden and invisible by default. Sliding events are processed in the outer layout. When the RecyclerView slides to the top and continues to slide, the top refreshes the display of the view based on the distance of the sliding. When the sliding distance exceeds a set value, perform the top refresh operation.
2. Implementation of RecyclerView top refresh
The implementation of RecyclerView top refresh generally includes the following steps.
- Create a custom layout class, which can inherit from existing layout classes, such as LinearLayout, or directly inherit from ViewGroup.
- Add RecyclerView and top refresh View as its child.
- Rewrite the onMeasure(), onLayout(), dispatchTouchEvent(), onInterceptTouchEvent() and other methods of the customized layout class.
Step 3 is the most complex part, and it is necessary to complete the measurement of itself and child, layout and sliding events in these rewrite methods. Especially for handling sliding events, you need to have a comprehensive understanding of the sliding mechanism of Android View to achieve it.
Google added the SwipeRefreshLayout class to the support library v4 package after 19.1. It inherits from ViewGroup, and contains a CircleImageView object inside it as the top refresh View, while it implements all the functions of step 3 above. Combining SwipeRefreshLayout and RecyclerView allows for easy top refresh function.
3.1 SwipeRefreshLayout usage
Before introducing the combination of SwipeRefreshLayout and RecyclerView to achieve the top refresh function, let’s first introduce the usage of SwipeRefreshLayout.
The two most important methods of SwipeRefreshLayout are: setOnRefreshListener() and setRefreshing().
The setOnRefreshListener() method is used to set the listening of the top refresh event. When the top refresh needs to be performed, the listener's onRefresh() method will be called to obtain the latest data.
The setRefreshing() method is used to set the top refresh state. When the data acquisition is completed, this method needs to be called to indicate that the refresh is completed.
In addition, SwipeRefreshLayout also provides some methods to set the top refresh View progress bar color, background color, etc.
3.2 SwipeRefreshLayout combined with RecyclerView to achieve top refresh
SwipeRefreshLayout combined with RecyclerView to achieve top refresh function is very simple. You only need to include a RecyclerView as its child in SwipeRefreshLayout. It can be directly laid out through XML files.
The XML layout is as follows.
<.
android:
android:layout_width="match_parent"
android:layout_height="wrap_content">
<.
android:
android:layout_width="match_parent"
android:layout_height="wrap_content">
</.>
</.>
For easy use, the layout settings here can be encapsulated through code and created a custom XSwipeRefreshLayout class to implement. The code method is implemented as follows. Since the layout is very simple, no layout files are introduced in the code.
public class XSwipeRefreshLayout extends SwipeRefreshLayout {
private RecyclerView mRecyclerView;
public XSwipeRefreshLayout(Context context) {
super(context);
init(context);
}
public XSwipeRefreshLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context) {
mRecyclerView = new RecyclerView(context);
addView(mRecyclerView);
}
}
3.3 Operating RecyclerView
To refresh the top of the XML implementation, to operate the RecyclerView, you only need to find the corresponding RecyclerView object through findViewById(), and then call the corresponding method.
To refresh the top of the code method, you need to add an interface to operate the internal RecyclerView in XSwipeRefreshLayout. There are two ways: one is to add the getRecyclerView() method to XSwipeRefreshLayout, return the internal RecyclerView object, and then call the method of the RecyclerView object externally. Another method is to add various methods corresponding to RecyclerView in XSwipeRefreshLayout, and then pass it to the internal RecyclerView object. The example code for these two methods is as follows.
public class XSwipeRefreshLayout extends SwipeRefreshLayout {
private RecyclerView mRecyclerView;
public XSwipeRefreshLayout(Context context) {
super(context);
init(context);
}
public XSwipeRefreshLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context) {
mRecyclerView = new RecyclerView(context);
addView(mRecyclerView);
}
public RecyclerView getRecyclerView() {
return mRecyclerView;
}
}
public class XSwipeRefreshLayout extends SwipeRefreshLayout {
private RecyclerView mRecyclerView;
public XSwipeRefreshLayout(Context context) {
super(context);
init(context);
}
public XSwipeRefreshLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context) {
mRecyclerView = new RecyclerView(context);
addView(mRecyclerView);
}
public getAdapter() {
return ();
}
public void setAdapter( adapter) {
(adapter);
}
public void setLayoutManager( layout) {
(layout);
}
// Write every RecyclerView method you need to use here .....
}
3. RecyclerView supports both top refresh and bottom refresh
In actual applications, top refreshes usually need to be used with bottom refreshes. To make RecyclerView support both top refresh and bottom refresh, you only need to replace the RecyclerView in the above top refresh implementation with the XRecyclerView in the previous article.
The XML layout is as follows.
<.
android:
android:layout_width="match_parent"
android:layout_height="wrap_content">
<
android:
android:layout_width="match_parent"
android:layout_height="wrap_content">
</>
</.>
The corresponding code method is implemented as follows.
public class XSwipeRefreshLayout extends SwipeRefreshLayout {
private XRecyclerView mRecyclerView;
public XSwipeRefreshLayout(Context context) {
super(context);
init(context);
}
public XSwipeRefreshLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context) {
mRecyclerView = new XRecyclerView(context);
addView(mRecyclerView);
}
}
If you have any questions, please leave a message or go to the community of this site to exchange and discuss. Thank you for reading. I hope it can help you. Thank you for your support for this site!