SwipeRefreshLayout+Recyclerview實現下拉加載和上拉自動加載

時間  2019-12-01
標籤 swiperefreshlayout+recyclerview swiperefreshlayout recyclerview 實現 下拉 加載 自動 简体版
原文   原文鏈接

#前提： 如今市面上的Android的App只要涉及到網絡交互的，幾乎都有着上拉刷新的功能。不管是新聞資訊類的簡書掘金，仍是直播類的鬥魚火貓。網上的各類框架，也多的數不勝數。像我以前用的SwipeToLoadLayout，就是一個很好的下拉刷新框架。不過Google在5.0以後出了SwipeRefreshLayout，我的就很喜歡material design風格的設計。畢竟谷歌自家出的，出生就帶光環。哈哈，不閒扯了，下面進入正題。 本來在簡書發過的，可是因爲某某豚事件，就搬到掘金來了。android

1.SwipeRefreshLayout用法：

image.png
從源碼中能夠看到，他自己繼承與ViewGroup。因此只須要將他像通常的ViewGroup同樣用就行了。 

//xml代碼
    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swiperefreshlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

    </android.support.v4.widget.SwipeRefreshLayout>
複製代碼

這裏介紹幾個SwipeRefreshLayout的代碼的基本用法：git

//下拉刷新的圓圈是否顯示
        refreshLayout.setRefreshing(false);

        //設置下拉時圓圈的顏色（能夠由多種顏色拼成）
        refreshLayout.setColorSchemeResources(android.R.color.holo_blue_light,
                android.R.color.holo_red_light,
                android.R.color.holo_orange_light);

        //設置下拉時圓圈的背景顏色（這裏設置成白色）
        refreshLayout.setProgressBackgroundColorSchemeResource(android.R.color.white);

        //設置下拉刷新時的操做
        refreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                  //具體操做
                  ·······
            }
        });
複製代碼

這樣一個簡單的下拉刷新就完成了，簡單吧。哈哈。github

2.上拉加載：

下面重點來了，谷歌只提供了下拉刷新，但卻沒有像別的下拉刷新框架同樣提供上拉加載的功能。這可怎麼辦呢，別急。有的觀察仔細的朋友可能會發現，如今市面上用SwipeRefreshLayout作下拉刷新的，通常加載的時候都是用的自動加載。不像是傳統的下拉刷新框架，會有一個明顯的上拉動做。而是滑到必定的位置，就進行自動加載。這樣會使用戶有着更好的體驗，省去了等待上拉加載的時間。 #####代碼：bash

private class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
        private final static int TYPE_CONTENT=0;//正常內容
        private final static int TYPE_FOOTER=1;//下拉刷新

        @Override
        public int getItemViewType(int position) {
            if (position==listData.size()){
                return TYPE_FOOTER;
            }
            return TYPE_CONTENT;
        }

        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            if (viewType==TYPE_FOOTER){
                View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.activity_main_foot, parent, false);
                return new FootViewHolder(view);
            }
            else {
                View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.activity_main_item, parent, false);
                MyViewHolder myViewHolder = new MyViewHolder(view);
                return myViewHolder;
            }
        }

        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
            if (getItemViewType(position)==TYPE_FOOTER){

            }
            else{
                MyViewHolder viewHolder= (MyViewHolder) holder;
                viewHolder.textView.setText("第" + position + "行");
            }
        }


        @Override
        public int getItemCount() {
            return listData.size()+1;
        }
    }

    private class MyViewHolder extends RecyclerView.ViewHolder {
        private TextView textView;
        public MyViewHolder(View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.textItem);
        }
    }

    private class FootViewHolder extends RecyclerView.ViewHolder{
        private ContentLoadingProgressBar progressBar;
        public FootViewHolder(View itemView) {
            super(itemView);
            progressBar=itemView.findViewById(R.id.pb_progress);
        }
    }
複製代碼

分析：

顯示部分分紅兩部分， 一部分是正常的顯示內容， 另外一部分就是滑到底端的ProgressBar。 因此應該給RecyclerView增長一個progressBar做爲footer。固然這裏也不必定是progressbar做爲footer，具體是什麼View能夠由你本身定義。網絡

因爲手動給RecyclerView增長了一個Footer因此，recyclerview顯示的item個數就得+1.app

@Override
        public int getItemCount() {
            return listData.size()+1;//listData是數據源
        }
複製代碼

當recyclerview滑動到最低端時要給他添加一個底部的footer。因此要設置兩個viewHolder，一個是正常的內容，另外一個是滑動到底端時顯示的自定義view框架

private final static int TYPE_CONTENT=0;//正常內容
        private final static int TYPE_FOOTER=1;//加載View

        @Override
        public int getItemViewType(int position) {
            if (position==listData.size()){
                return TYPE_FOOTER;//判斷滑到最底部時，返回的ViewType爲TYPE_CONTENT。
            }
            return TYPE_CONTENT;
        }
複製代碼

recyclerview的onCreateViewHolder中：根據viewType來判斷recyclerview應該綁定哪一個viewHolder。 這裏咱們定義兩個viewHolder，一個正常加載內容的MyViewHolder(viewTpye==TYPE_CONTENT) ，還有一個當滑動到低端時的FootViewHolder(viewTpye==TYPE_FOOTER) 。ide

@Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            if (viewType==TYPE_FOOTER){
                View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.activity_main_foot, parent, false);
                return new FootViewHolder(view);
            }
            else {
                View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.activity_main_item, parent, false);
                MyViewHolder myViewHolder = new MyViewHolder(view);
                return myViewHolder;
            }
        }
複製代碼

自定義ViewHolder的代碼

private class MyViewHolder extends RecyclerView.ViewHolder {
        private TextView textView;
        public MyViewHolder(View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.textItem);
        }
    }

    private class FootViewHolder extends RecyclerView.ViewHolder{
        private ContentLoadingProgressBar progressBar;
        public FootViewHolder(View itemView) {
            super(itemView);
            progressBar=itemView.findViewById(R.id.pb_progress);
        }
    }
複製代碼
activity_main_item.xml
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardElevation="2dp"
    android:layout_margin="5dp"
    tools:context="app.com.swiperefreshlayout.activity.MainActivity">
    <TextView
        android:id="@+id/textItem"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="45dp"
        android:text=""
        android:gravity="center"/>
</android.support.v7.widget.CardView>
複製代碼
activity_main_foot.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v4.widget.ContentLoadingProgressBar
        android:id="@+id/pb_progress"
        style="?android:attr/progressBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal" />
</LinearLayout>
複製代碼
剩下的在onBindViewHolder中進行綁定操做就行了
@Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
            if (getItemViewType(position)==TYPE_FOOTER){
                //能夠進行操做
            }
            else{
                MyViewHolder viewHolder= (MyViewHolder) holder;
                viewHolder.textView.setText("第" + position + "行");
            }
        }
複製代碼

3.上拉加載的Listener

下拉刷新時用的SwipeRefreshLayout的OnRefreshListener（）接口。 而recyclerview沒有上拉加載接口，這裏咱們能夠本身定義一個。post

RecyclerView.OnScrollListener（）有兩個重寫方法，一個是onScrolled另外一個是onScrollStateChanged咱們先來分析一下這兩個方法。測試

onScrollStateChanged：

onScrollStateChanged.png
源碼中顯示的newState是更新滑動否的狀態值。有三個值， SCROLL_STATE_DRAGGING：拖拽（Recyclerview滑動時返回的狀態值） SCROLL_STATE_SETTLING：中止（Recyclerview中止時返回的狀態值，此時手指已經離開屏幕可是recyclerview可能因爲慣性依然在滑動） SCROLL_STATE_IDLE：空閒（Recyclerview空閒時返回的狀態值，recyclerview徹底中止）

onScrolled：

onScrolled.png
看源碼得知，這個方法是recyclerview滑動時調用的方法。dx是水平滑動時的距離，dy是垂直滑動時的距離。

重寫OnScrollListener

知道了這兩個方法以及參數的做用。咱們就要重寫滑動接口。 以下圖所示：

/**
 * @做者JTL.
 * @日期2017/12/1.
 * @說明：加載更多Listener
 */

public abstract class onLoadMoreListener extends RecyclerView.OnScrollListener {
    private int countItem;
    private int lastItem;
    private boolean isScolled = false;//是否能夠滑動
    private RecyclerView.LayoutManager layoutManager;

    /**
     * 加載回調方法
     * @param countItem 總數量
     * @param lastItem  最後顯示的position
     */
    protected abstract void onLoading(int countItem, int lastItem);

    @Override
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
     /* 測試這三個參數的做用
        if (newState==SCROLL_STATE_IDLE){
            Log.d("test","SCROLL_STATE_IDLE,空閒");
        }
        else if (newState==SCROLL_STATE_DRAGGING){
            Log.d("test","SCROLL_STATE_DRAGGING,拖拽");
        }
        else if (newState==SCROLL_STATE_SETTLING){
            Log.d("test","SCROLL_STATE_SETTLING,固定");
        }
        else{
            Log.d("test","其它");
        }*/
        //拖拽或者慣性滑動時isScolled設置爲true
        if (newState == SCROLL_STATE_DRAGGING || newState == SCROLL_STATE_SETTLING) {
            isScolled = true;
        } else {
            isScolled = false;
        }

    }

    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        if (recyclerView.getLayoutManager() instanceof LinearLayoutManager) {
            layoutManager = recyclerView.getLayoutManager();
            countItem = layoutManager.getItemCount();
            lastItem = ((LinearLayoutManager) layoutManager).findLastCompletelyVisibleItemPosition();
        }
        if (isScolled && countItem != lastItem && lastItem == countItem - 1) {
            onLoading(countItem, lastItem);
        }
    }
}

複製代碼
調用onLoadMoreListener：

寫完這個類以後，咱們就能夠直接在Activity中調用了。

recyclerView.addOnScrollListener(new onLoadMoreListener() {
            @Override
            protected void onLoading(int countItem,int lastItem) {
                handler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        getData("loadMore");
                    }
                },1000);
            }
        });
複製代碼

下面上兩張Gif圖看下效果

refresh.gif

loadmore.gif

這樣一個簡單的下拉加載以及上拉自動刷新就ok了。 有問題的但願你們一塊兒討論。喜歡的點個喜歡也算是給個人一點小動力。感謝，哈哈！

Demo地址：https://github.com/13046434521/loadMoreDemo。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程