### a brief introduction of the MaterialRefreshLayout

MaterialRefreshLayout is a drop-down refresh control that is more beautiful, powerful and easy to use than the official SwipeRefreshLayout. Support for Android 3.0 (aka API 11) and above. The following is an official rendering provided by the company. Is there any high quality? !

Here’s GitHub’s address: github.com/android-cjj…

### ### ##

The MaterialRefreshLayout is basically the same as SwipeRefreshLayout.

1. Introduce the dependency library of MaterialRefreshLayout in Gradle.

The compile 'com. CJJ. Materialrefeshlayout: library: 1.3.0'Copy the code

2. Place our MaterialRefreshLayout in the layout file. The MaterialRefreshLayout can also be decoupled from the list by placing any list controls inside the MaterialRefreshLayout.

<com.cjj.MaterialRefreshLayout
    android:id="@+id/refresh_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:overlay="false"
    app:progress_colors="@array/material_colors"
    app:wave_color="#90ffffff"
    app:wave_height_type="higher"
    app:wave_show="true"
    >

    <android.support.v7.widget.RecyclerView
        android:id="@+id/hot_ware_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</com.cjj.MaterialRefreshLayout>
Copy the code

In the layout file above, the most important things to cover are the custom properties of The MaterialRefreshLayout, overlay and wave_show. Wave_show sets whether to display the following wave:

Overlay sets the MaterialRefreshLayout to either invasive (True) or non-invasive (false). The non-invasive effect is shown in the figure above, where the list can be pulled when the refresh is pulled down, and the list is visually separate from the MaterialRefreshLayout.

The intrusive effect is shown below, with The MaterialRefreshLayout on top of the list.

3, the code configuration, the simplest use is: if you want to use drop-down load more, just set it up. Then you set up the pull-down refresh and pull-up to load more callbacks, which is what you need to do after the user triggers both methods, typically to request (more) data from the server.

/ / set support drop-down load more refreshLayout. SetLoadMore (true); . / / refresh and to load the callback refreshLayout setMaterialRefreshListener (new MaterialRefreshListener () {@ Override public void onRefresh(MaterialRefreshLayout materialRefreshLayout) { } @Override public void onRefreshLoadMore(MaterialRefreshLayout  materialRefreshLayout) { } });Copy the code

MaterialRefreshLayout dropdown refresh and dropup load more

First, we need to clarify what our code should do when the APP is pulled down to refresh and pulled up to load more. Pull-down refresh: The pull-down refresh is to remove all the original data, if there is a page, put the page back to the first page, and then request data from the server, display the data and turn off the pull-down refresh. Pull-up load more: Append data to the end of existing data. After displaying the data, close the pull-up to load more. Therefore, our Adapter needs to provide the following two functions: ** @param newData */ public void refreshData(List< page.ware > newData) {mdatas.clear (); mDatas.addAll(newData); notifyItemRangeChanged(0, mDatas.size()); } @param moreData */ public void loadMoreData(List< page.ware > moreData) {int lastPosition = mDatas.size(); mDatas.addAll(lastPosition, moreData); notifyItemRangeInserted(lastPosition, moreData.size()); }Copy the code

Then, you need to define the following variables, where the data is a bean object of JSON data.

The core code is as follows:

Private int curPage = 1; private int curPage = 1; Private int pageSize = 10; Private List<Page.Ware> wareList; Private static final int STATE_INIT = 0; private static final int STATE_INIT = 0; private static final int STATE_REFRESH = 1; private static final int STATE_LOAD_MORE = 2; Private int curState = 0; private int curState = 0; Private int totalPage = 1; private int totalPage = 1;Copy the code

You then request data from the server, implement the getData() method, and when the request succeeds, get the data, which could be initialization data, pull-down refreshed data, or pull-up loading more “more data.” The request parameters for the server’s Uri need to have the current page and the page size.

The core code is as follows:

Private void getData () {String uri = "http://112.124.22.238:8081/course_api/wares/hot? curPage=" + curPage + "&pageSize=" + pageSize; httpHelper.get(uri, new BaseCallback<Page>() { ..... @override public void onSuccess(Response Response, Page Page) {wareList = page.getwareList (); totalPage = page.getTotalPage(); showData(); }}); }Copy the code

Implement the showData() method to display more data. You need to determine whether it is the initialization state, the drop-down refresh state, or the drop-down load more state. Different states do different things: Initialization state: Initializes the list. Pull-down refresh state: refresh data, return to the top of the list, close the pull-down refresh state: append data, close the pull-down load more

The core code is as follows:

private void showData() { switch (curState) { case STATE_INIT: MAdapter = new HotWaresListAdapter(wareList, getActivity()); hotWareList.setAdapter(mAdapter); hotWareList.setLayoutManager(new LinearLayoutManager(getActivity())); hotWareList.setItemAnimator(new DefaultItemAnimator()); break; Case STATE_REFRESH: // drop down refresh state, refreshData, list back to the top, close the drop down refresh madapter.refreshdata (wareList); hotWareList.scrollToPosition(0); refreshLayout.finishRefresh(); break; Case STATE_LOAD_MORE: // Pull up to load more state, append data, close the pull up to load more mAdapter.loadMoreData(wareList); refreshLayout.finishRefreshLoadMore(); break; }}Copy the code

4. Complete code

import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.support.v7.widget.DefaultItemAnimator; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Toast; import com.cjj.MaterialRefreshLayout; import com.cjj.MaterialRefreshListener; import com.lidroid.xutils.ViewUtils; import com.lidroid.xutils.view.annotation.ViewInject; import com.nan.cnshop.R; import com.nan.cnshop.adapter.HotWaresListAdapter; import com.nan.cnshop.bean.Page; import com.nan.cnshop.http.BaseCallback; import com.nan.cnshop.http.OkHttpHelper; import com.nan.cnshop.widget.CNToolbar; import com.squareup.okhttp.Request; import com.squareup.okhttp.Response; import java.util.List; public class HotFragment extends Fragment { @ViewInject(R.id.toolbar) private CNToolbar toolbar; @ViewInject(R.id.refresh_view) private MaterialRefreshLayout refreshLayout; @ViewInject(R.id.hot_ware_list) private RecyclerView hotWareList; OkHttpHelper httpHelper = OkHttpHelper.getinstance(); private HotWaresListAdapter mAdapter; Private int curPage = 1; private int curPage = 1; Private int pageSize = 10; Private List<Page.Ware> wareList; Private static final int STATE_INIT = 0; private static final int STATE_INIT = 0; private static final int STATE_REFRESH = 1; private static final int STATE_LOAD_MORE = 2; Private int curState = 0; private int curState = 0; Private int totalPage = 1; private int totalPage = 1; @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_hot, container, false); ViewUtils.inject(this, view); initRefreshLayout(); getData(); return view; } private void initRefreshLayout () {/ / set support drop-down load more refreshLayout. SetLoadMore (true); . / / refresh and to load the callback refreshLayout setMaterialRefreshListener (new MaterialRefreshListener () {@ Override public void OnRefresh (MaterialRefreshLayout MaterialRefreshLayout) {// A drop-down refresh callback that changes the current state to the drop-down refresh state and sets the current page to the first page, // Request data from the server curState = STATE_REFRESH; curPage = 1; getData(); } @override public void onRefreshLoadMore(MaterialRefreshLayout MaterialRefreshLayout) { CurState = STATE_LOAD_MORE; curState = STATE_LOAD_MORE; curPage = curPage + 1; if (curPage <= totalPage) { getData(); } else {toast.makeText (getActivity(), "no more! O(∩_∩)O", toast.length_short).show(); refreshLayout.finishRefreshLoadMore(); }}}); {String} private void getData () uri = "http://112.124.22.238:8081/course_api/wares/hot? curPage=" + curPage + "&pageSize=" + pageSize; httpHelper.get(uri, new BaseCallback<Page>() { @Override public void onRequestBefore() { } @Override public void onFailure(Request request, Exception e) {} @override public void onSuccess(Response Response, Page Page) { TotalPage = page.getTotalPage(); showData(); } @Override public void onError(Response response, int errorCode, Exception e) { } }); } private void showData() { switch (curState) { case STATE_INIT: MAdapter = new HotWaresListAdapter(wareList, getActivity()); hotWareList.setAdapter(mAdapter); hotWareList.setLayoutManager(new LinearLayoutManager(getActivity())); hotWareList.setItemAnimator(new DefaultItemAnimator()); break; Case STATE_REFRESH: // drop down refresh state, refreshData, list back to the top, close the drop down refresh madapter.refreshdata (wareList); hotWareList.scrollToPosition(0); refreshLayout.finishRefresh(); break; Case STATE_LOAD_MORE: // Pull up to load more state, append data, close the pull up to load more mAdapter.loadMoreData(wareList); refreshLayout.finishRefreshLoadMore(); break; }}}Copy the code

### 5. Effect drawing

Good today’s notes here so far, is not feeling lofty there is no, O(∩_∩)O ha ha ~!

If you feel that my words are helpful to you, welcome to pay attention to my public number:

My group welcomes everyone to come in and discuss all kinds of technical and non-technical topics. If you are interested, please add my wechat huannan88 and I will take you into our group.