实现RecyclerView下拉刷新
ShaKHV
8年前
<h2>写在前面</h2> <p>最近项目里有需求要用到下拉刷新，我是个比较懒的人，以前写好的代码也懒得动了，然后在github上发现了一个XRecyclerView能满足的需求，而且也不必对我原来的代码做多大的修改。</p> <p>但是光会用还不够，万一碰到啥满足不了自己需求或者是坑自己还得有办法解决啊。所以打算通过自己写一个，以此来加深自己对XRecyclerView的理解。</p> <p>当然了，我只是抱着学习的目的实现一下，重复造轮子是不好的~这篇文主要是理一下自己的思路的，代码不会贴非常完整的，完整代码地址文末有。最后自己也稍微完善了一下代码，权当是练习一下自己的所学所得吧。</p> <h2>简单的实现部分逻辑</h2> <p>首先想一下我最初的需求，希望尽量少的改动自己的代码，XRecyclerView做到了这一点，他内部是有一个WrapAdapter继承于RecyclerView.Adapter。并且XRecyclerView重写了setAdapter这个方法，当你调用setAdapter方法时，会先在WrapAdapter内部持有一个adapter的引用，之后调用RecyclerView的setAdapter将这个WrapAdapter设置给RecyclerView，这么做有一个好处，就是可以自己先在onCreateViewHolder和onBindViewHolder方法里对刷新顶部和你添加的头部布局进行处理和绑定，在这之后再调用adapter的相应方法。</p> <p>如果你对于RecyclerView的工作机制还不是很熟悉，可能会疑惑我以上的这段话。可以先简单的理解为：onCreateViewHolder是生成整个列表中的一个个元素的，而onBindViewHolder则是在这个元素被滑动到可见（进入屏幕）的时候被调用，你可以在这个方法进行具体的元素视图的设置操作。</p> <p>既然知道了这么写的好处，那么我自然也得弄一个：</p> <pre> <code class="language-java">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> <p>接下来当然是看看这玩意能不能用了，写一个RecyclerVIew的子类，就叫做MRecyclerView吧：</p> <pre> <code class="language-java">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));</code></pre> <p>这里暂时只是简单的实践，所以没有更进一步的实现，先看一下效果是怎样的：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/e5a866b6130670478ca349441162ae80.png"></p> <p style="text-align:center">效果图</p> <p>还行，感觉思路应该是对的。接着尝试加上一个刷新的头布局。这个可以通过设置ViewType和不同的ViewHolder来解决，首先复写AdapterWrap内的getItemViewType方法，这里因为暂时不考虑外部adapter的设置，所以代码比较简单：</p> <pre> <code class="language-java">private static final int REFRESH_HEADER = 10086; @Override public int getItemViewType(int position) { return position == 0 ? REFRESH_HEADER : 0; }</code></pre> <p>接着将onCreateViewHolder的逻辑改改：</p> <pre> <code class="language-java">@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)); } }</code></pre> <p>看下啥样子</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/b0fc77b026c4ba6f76490a11f50ac725.png"></p> <p style="text-align:center">添加一个下拉刷新</p> <p>恩，不错，有点样子了，不过这里只是添加了一个item进去而已，并没有平时常见的下拉刷新的效果。关于如何实现这种效果，我刚开始以为是将这个refresh head放到屏幕之外，以前也尝试过ListView下拉刷新，不过忘得差不多了就是……看了一下XRecyclerView的实现方式，很巧妙，是将refresh head的初始高度设置为0，随着下拉高度而逐渐展现refrsh head。这个好啊~我果断也用这种方式实现了。</p> <p>不过还是说明下，现在只是简单的实现，并非完善的代码，各位通过这个代码简单的了解如何实现就好了：</p> <pre> <code class="language-java">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(); } }</code></pre> <p>看看效果图：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/cca269c2055d129fa4a47d1888edfcce.gif"></p> <p style="text-align:center">效果图</p> <h2>后记</h2> <p>还有很多的细节没有完善和处理，比如适配不同的layoutmanage之类的，操作刷新布局也都是通过ViewHolder来的，其实是有必要抽出一个类的，真的还有非常多不完善的地方，不过只是简单实现和了解一下下拉刷新而已。</p> <p> </p> <p>来自：http://www.jianshu.com/p/7bbfe46c6dfd</p> <p> </p>