實現RecyclerView下拉刷新

ShaKHV 7年前發布 | 9K 次閱讀 Android開發移動開發 RecyclerView

寫在前面

最近項目里有需求要用到下拉刷新，我是個比較懶的人，以前寫好的代碼也懶得動了，然后在github上發現了一個XRecyclerView能滿足的需求，而且也不必對我原來的代碼做多大的修改。

但是光會用還不夠，萬一碰到啥滿足不了自己需求或者是坑自己還得有辦法解決啊。所以打算通過自己寫一個，以此來加深自己對XRecyclerView的理解。

當然了，我只是抱著學習的目的實現一下，重復造輪子是不好的~這篇文主要是理一下自己的思路的，代碼不會貼非常完整的，完整代碼地址文末有。最后自己也稍微完善了一下代碼，權當是練習一下自己的所學所得吧。

簡單的實現部分邏輯

首先想一下我最初的需求，希望盡量少的改動自己的代碼，XRecyclerView做到了這一點，他內部是有一個WrapAdapter繼承于RecyclerView.Adapter。并且XRecyclerView重寫了setAdapter這個方法，當你調用setAdapter方法時，會先在WrapAdapter內部持有一個adapter的引用，之后調用RecyclerView的setAdapter將這個WrapAdapter設置給RecyclerView，這么做有一個好處，就是可以自己先在onCreateViewHolder和onBindViewHolder方法里對刷新頂部和你添加的頭部布局進行處理和綁定，在這之后再調用adapter的相應方法。

如果你對于RecyclerView的工作機制還不是很熟悉，可能會疑惑我以上的這段話。可以先簡單的理解為：onCreateViewHolder是生成整個列表中的一個個元素的，而onBindViewHolder則是在這個元素被滑動到可見（進入屏幕）的時候被調用，你可以在這個方法進行具體的元素視圖的設置操作。

既然知道了這么寫的好處，那么我自然也得弄一個：

private class AdapterWrapper extends Adapter {

    private Adapter mAdapter;

    AdapterWrapper(Adapter adapter) {
        this.mAdapter = adapter;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return null;
    }


    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        return 100;
    }

    @Override
    public int getItemViewType(int position) {

    }
}</code></pre> 

接下來當然是看看這玩意能不能用了，寫一個RecyclerVIew的子類，就叫做MRecyclerView吧： 
  package com.xiasuhuei321.test;

import android.content.Context;
import android.support.annotation.Nullable;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by xiasuhuei321 on 2017/1/4.
 * author:luo
 * e-mail:xiasuhuei321@163.com
 */

public class MRecyclerView extends RecyclerView {
    private Context mContext;

    public MRecyclerView(Context context) {
        this(context, null);
    }

    public MRecyclerView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MRecyclerView(Context context, @Nullable AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setAdapter(new AdapterWrapper(null));
        this.mContext = context;
    }

    private class AdapterWrapper extends Adapter {

        private Adapter mAdapter;

        AdapterWrapper(Adapter adapter) {
            this.mAdapter = adapter;
        }

        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            return new HeadViewHolder(LayoutInflater.from(mContext)
                    .inflate(R.layout.item_test, parent, false));
        }


        @Override
        public void onBindViewHolder(ViewHolder holder, int position) {

        }

        @Override
        public int getItemCount() {
            return 100;
        }

        @Override
        public int getItemViewType(int position) {
            return super.getItemViewType(position);
        }
    }

    class HeadViewHolder extends ViewHolder {

        public HeadViewHolder(View itemView) {
            super(itemView);
        }
    }
}

// 設置LayoutManage的代碼
MRecyclerView mr = (MRecyclerView) findViewById(R.id.mrv);
mr.setLayoutManager(new LinearLayoutManager(this)); 
  這里暫時只是簡單的實踐，所以沒有更進一步的實現，先看一下效果是怎樣的： 
   
  效果圖 
  還行，感覺思路應該是對的。接著嘗試加上一個刷新的頭布局。這個可以通過設置ViewType和不同的ViewHolder來解決，首先復寫AdapterWrap內的getItemViewType方法，這里因為暫時不考慮外部adapter的設置，所以代碼比較簡單： 
  private static final int REFRESH_HEADER = 10086;

        @Override
        public int getItemViewType(int position) {
            return position == 0 ? REFRESH_HEADER : 0;
        } 
  接著將onCreateViewHolder的邏輯改改： 
  @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            if (viewType == REFRESH_HEADER) {
                return new HeadViewHolder(LayoutInflater.from(mContext)
                        .inflate(R.layout.item_refresh_header, parent, false));
            } else {
                return new HeadViewHolder(LayoutInflater.from(mContext)
                        .inflate(R.layout.item_test, parent, false));
            }
        } 
  看下啥樣子 
   
  添加一個下拉刷新 
  恩，不錯，有點樣子了，不過這里只是添加了一個item進去而已，并沒有平時常見的下拉刷新的效果。關于如何實現這種效果，我剛開始以為是將這個refresh head放到屏幕之外，以前也嘗試過ListView下拉刷新，不過忘得差不多了就是……看了一下XRecyclerView的實現方式，很巧妙，是將refresh head的初始高度設置為0，隨著下拉高度而逐漸展現refrsh head。這個好啊~我果斷也用這種方式實現了。 
  不過還是說明下，現在只是簡單的實現，并非完善的代碼，各位通過這個代碼簡單的了解如何實現就好了： 
  package com.xiasuhuei321.test;

import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.drawable.AnimationDrawable;
import android.os.Handler;
import android.os.Message;
import android.support.annotation.Nullable;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * Created by xiasuhuei321 on 2017/1/4.
 * author:luo
 * e-mail:xiasuhuei321@163.com
 */

public class MRecyclerView extends RecyclerView {
    private Context mContext;
    private static final int REFRESH_HEADER = 10086;

    private float mLastY = -1;
    private int mMeasuredHeight = -1;
    private HeadViewHolder h;
    private boolean releaseToRefresh = false;
    private RefreshListener r;
    private AnimationDrawable drawable;

    public MRecyclerView(Context context) {
        this(context, null);
    }

    public MRecyclerView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MRecyclerView(Context context, @Nullable AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setAdapter(new AdapterWrapper(null));
        this.mContext = context;
//        LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,0);

    }

    private class AdapterWrapper extends Adapter {

        private Adapter mAdapter;

        AdapterWrapper(Adapter adapter) {
            this.mAdapter = adapter;
        }

        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            if (viewType == REFRESH_HEADER) {
                h = new HeadViewHolder(LayoutInflater.from(mContext)
                        .inflate(R.layout.item_refresh_header, parent, false));
                LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 0);
                h.itemView.setLayoutParams(lp);
                return h;
            } else {
                return new HeadViewHolder(LayoutInflater.from(mContext)
                        .inflate(R.layout.item_test, parent, false));
            }
        }


        @Override
        public void onBindViewHolder(ViewHolder holder, int position) {

        }

        @Override
        public int getItemCount() {
            return 100;
        }

        @Override
        public int getItemViewType(int position) {
            return position == 0 ? REFRESH_HEADER : 0;
        }

    }

    @Override
    public boolean onTouchEvent(MotionEvent e) {
        if (mLastY == -1) {
            mLastY = e.getRawY();
        }
        if (mMeasuredHeight == -1) {
            mMeasuredHeight = h.getMeasureHeight();
        }
        switch (e.getAction()) {
            case MotionEvent.ACTION_DOWN:

                break;
            case MotionEvent.ACTION_MOVE:
                float deltaY = e.getRawY() - mLastY;
                mLastY = e.getRawY();
                onMove(deltaY / 3);
                break;
            default:
                mLastY = -1;
                if (releaseToRefresh) refresh();
                else refreshComplete();
                break;
        }
        return super.onTouchEvent(e);
    }

    class HeadViewHolder extends ViewHolder {

        public HeadViewHolder(View itemView) {
            super(itemView);

        }

        public int getMeasureHeight() {
            itemView.measure(ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
            return itemView.getMeasuredHeight();
        }

        public void setVisibleHeight(int height) {
            if (height < 0) height = 0;
            LayoutParams lp = (LayoutParams) itemView.getLayoutParams();
            lp.height = height;
            itemView.setLayoutParams(lp);

        }

        public int getVisibleHeight() {
            LayoutParams lp = (LayoutParams) itemView.getLayoutParams();
            return lp.height;
        }

        public ImageView getArrowImg() {
            return (ImageView) itemView.findViewById(R.id.iv_progress);
        }

        public ImageView getRefreshImg() {
            return (ImageView) itemView.findViewById(R.id.iv_refresh);
        }

        public void changeText(String text) {
            TextView refreshTitle = (TextView) itemView.findViewById(R.id.tv_refresh_text);
            refreshTitle.setText(text);
        }
    }

    public void refreshComplete() {
        if (releaseToRefresh) {
            ImageView arrowImg = h.getArrowImg();
            ObjectAnimator rotate = ObjectAnimator.ofFloat(arrowImg, "rotation", 180f, 0f);
            rotate.setDuration(300);
            rotate.start();
        }
        releaseToRefresh = false;
        handler.sendEmptyMessageDelayed(1, 800);
    }

    Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what) {
                case 1:
                    h.setVisibleHeight(0);
                    h.changeText("下拉刷新");
                    break;
                case 2:
                    if (drawable != null) drawable.stop();
                    ImageView refreshImg = h.getRefreshImg();
                    ImageView arrowImg = h.getArrowImg();
                    arrowImg.setVisibility(VISIBLE);
                    refreshImg.setVisibility(GONE);
                    h.changeText("刷新完成");
                    refreshComplete();
                    break;
                default:

                    break;
            }
        }
    };

    public void onMove(float deltaY) {
        h.setVisibleHeight((int) deltaY + h.getVisibleHeight());
        if (h.getVisibleHeight() > mMeasuredHeight) {
            if (!releaseToRefresh) {
                //旋轉箭頭
                ImageView arrowImg = h.getArrowImg();
                ObjectAnimator rotate = ObjectAnimator.ofFloat(arrowImg, "rotation", 0f, 180f);
                h.changeText("釋放刷新");
                rotate.setDuration(300);
                rotate.start();
                releaseToRefresh = true;
            }
        }
    }

    private void refresh() {
        ImageView refreshImg = h.getRefreshImg();
        ImageView arrowImg = h.getArrowImg();
        arrowImg.setVisibility(GONE);
        refreshImg.setVisibility(VISIBLE);
        drawable = (AnimationDrawable) refreshImg.getDrawable();
        drawable.start();
        h.changeText("刷新中...");
        handler.sendEmptyMessageDelayed(2,3000);
    }

    public void setPullToRefreshListener(RefreshListener r) {
        this.r = r;
    }

    public interface RefreshListener {
        void refresh();
    }


} 
  看看效果圖： 
   
  效果圖 
  后記 
  還有很多的細節沒有完善和處理，比如適配不同的layoutmanage之類的，操作刷新布局也都是通過ViewHolder來的，其實是有必要抽出一個類的，真的還有非常多不完善的地方，不過只是簡單實現和了解一下下拉刷新而已。 
    
  來自：http://www.jianshu.com/p/7bbfe46c6dfd


                    
                         本文由用戶 ShaKHV 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1484826481564.html
                         Android開發 移動開發 RecyclerView

實現RecyclerView下拉刷新

寫在前面

簡單的實現部分邏輯

后記

相關經驗

相關資訊

相關文檔

目錄