RecyclerView 的基本使用

2017年1月21日

为了加强理解 RecyclerView 的使用方法，同时让自己的写作能力得到锻炼，所以实践一把，都是一些基本的使用，主要分析下拉刷新与上拉加载部分，细节很重要，以此来激励自己写出高质量的文章。

• 基本用法
  • 基本介绍
  • 代码实现

• SwipeRefreshLayout 配合实现下拉刷新
  • 基本介绍
  • 代码实现

• RecyclerView 实现上拉加载
  • 滚动事件的分析
  • 添加 FooterView 实现上拉加载

• 参考文章及总结

效果图

基本使用

RecyclerView 的基本介绍

RecyclerView 是谷歌V7包下新增的控件,用来替代 ListView 的使用,在 RecyclerView 标准化了 ViewHolder 类似于 ListView中 convertView 用来做视图缓存.

相信大家对于 ListView 都很熟悉，在我刚学 Android 开发的时候接触就是这个强大的控件，也被称为最难的控件之一。自从 RecyclerView 已经面市很久，也在很多应用中得到广泛的使用，在整个开发者圈子里面也拥有很不错的口碑，那说明 RecyclerView 拥有比 ListView,GridView 之类控件有很多的优点。

• 设置布局管理器以控制Item的布局方式，横向、竖向以及瀑布流方式
• 可设置Item操作的动画（删除或者添加等)
• 可设置Item的间隔样式（可绘制）

但是对于点击事件需要自己写回调借口实现，下面会详细介绍，并且没有了 ListView 强大的 addFootView() 的方法，需要自己去实现，不过还好拓展性很强。

代码实现

1.添加库依赖：首先要用这个控件，你需要在gradle文件中添加包的引用（配合官方CardView使用）

compile 'com.android.support:recyclerview-v7:25.0.0'
compile 'com.android.support:cardview-v7:25.0.0'

2.然后在 xml 文件里实现

<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/recycler_view"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"/>

3.接着就是在 Activity 里面设置

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private RecyclerAdapter mAdapter;
    private LinearLayoutManager mLayoutManager;
    private List<ShareBean> mData = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();//初始化数据
        initView();//初始化布局
        setListener();//设置监听事件
    }

    private void initData() {
        for (int i = 0; i < 4; i++) {
            mData.add(new ShareBean(R.mipmap.ic_image, "Android vs IOS"));
        }
    }

    private void initView() {
        mRecyclerView = (RecyclerView) findViewById(R.id.recycler);
        //设置布局管理器
        mLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(mLayoutManager);
        //确保尺寸是一个常数，避免计算每个item的size
        mRecyclerView.setHasFixedSize(true);
        //设置显示动画
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
        mAdapter = new RecyclerAdapter(this, mData);
        mRecyclerView.setAdapter(mAdapter);
    }

    private void setListener() {
        //设置Items的点击事件
        mAdapter.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(final View view, int position) {
                onClick(view, position);
            }
        });
      }
}

4.适配器 Adapter 的代码

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    public  OnItemClickListener itemClickListener;
    private List<ShareBean> mData = null;
    private LayoutInflater mInflater;

    public RecyclerAdapter(Context context, List<ShareBean> mData) {
        this.mData = mData;
        this.mInflater = LayoutInflater.from(context);
    }

    //将布局转化为 View 并传递给 RecyclerView 封装好的 ViewHolder
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType){    
        // 实例化展示的view
        View view = mInflater.inflate(R.layout.item_recyclerview, parent, false);
        // 实例化viewholder
        return new ItemViewHolder(view);
    }

    //将数据与视图进行绑定
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ((ItemViewHolder) holder).mImageView.setImageResource(mData.get(position).getImage_id());
        ((ItemViewHolder) holder).mTextView.setText(mData.get(position).getName());
    }

    //返回 Item 的数量
    @Override
    public int getItemCount() {
        return mData == null ? 0 : mData.size();;
    }

    public  class ItemViewHolder extends RecyclerView.ViewHolder {

        CardView mCardView;
        CircleImageView mImageView;
        TextView mTextView;

        public ItemViewHolder(View itemView) {
            super(itemView);
            mTextView = (TextView) itemView.findViewById(R.id.textView);
            mCardView = (CardView) itemView.findViewById(R.id.cardView);
            mImageView = (CircleImageView) itemView.findViewById(R.id.image);
            mCardView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    if (itemClickListener != null) {
                        itemClickListener.onItemClick(view, getPosition());
                    }
                }
            });
        }
    }

    //以下为点击事件的接口回调部分
    public void setOnItemClickListener(OnItemClickListener itemClickListener) {
        this.itemClickListener = itemClickListener;
    }

    public interface OnItemClickListener {
        void onItemClick(View view, int position);
    }
}

以上是适配器基本的写法，这个自定义 Adapter 和我们在使用 Listview 时候的 Adapter 相比还是有点不太一样的，首先这边我们需要继承 RecyclerView.Adaper 类，然后实现两个重要的方法 onBindViewHodler() 以及 onCreateViewHolder() ,这边我们看出来区别，使用 RecyclerView 控件我们就可以把 ItemView 视图创建和数据绑定这两步进行分来进行管理，用法就更加方便而且灵活了,并且我们可以定制打造千变万化的布局。同时这边我们还需要创建一个 ViewHolder 类，该类必须继承自 RecyclerView.ViewHolder 类，现在 Google 也要求我们必须要实现 ViewHolder 来承载 Item 的视图。

特别注意一下最下面的点击事件的回调函数，主要是对接口的熟悉程度，Java 是硬伤 55555.

同时 RecyclerView 有三种实现方式（上面介绍有），通过一下代码设置

mRecyclerView.setLayoutManager(new LinearLayoutManager(this));//这里用线性显示 类似于listview
mRecyclerView.setLayoutManager(new GridLayoutManager(this, 2));//这里用线性宫格显示 类似于grid view
mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, OrientationHelper.VERTICAL));//这里用线性宫格显示 类似于瀑布流

SwipeRefreshLayout 配合实现下拉刷新

基本介绍

SwipeRefrshLayout 是 Google 官方更新的一个 Widget ,可以实现下拉刷新的效果。该控件集成自 ViewGroup 在 support-v4 兼容包下，不过我们需要升级 supportlibrary 的版本到19.1以上。基本使用的方法如下:

• setOnRefreshListener(OnRefreshListener):添加下拉刷新监听器
• setRefreshing(boolean):显示或者隐藏刷新进度条
• isRefreshing():检查是否处于刷新状态
• setColorSchemeResources():设置进度条的颜色主题，最多设置四种，以前的setColorScheme()方法已经弃用了

代码实现

1.首先先看一下 xml 布局，在 RecyclerView 布局外部嵌套一层 SwipeRefreshLayout 布局即可。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipe_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

    </android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>

2.在 Activity 中获取 SwipeRefreshLayout 控件并且设置 OnRefreshListener 监听器，同时实现里边的 onRefresh() 方法，在该方法中进行网络请求最新数据，然后刷新 RecyclerView 列表同时设置 SwipeRefreshLayout 的进度Bar的隐藏或者显示效果。具体代码如下:

mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
          @Override
          public void onRefresh() {
              addTopData();
          }
      });

  private void addTopData() {
           new Handler().postDelayed(new Runnable() {
               @Override
               public void run() {
                   for (int i = 0; i < 5; i++) {
                       mData.add(i, new ShareBean(R.mipmap.ic_image_h, "下拉刷新数据" + i));
                   }
                   mAdapter.notifyDataSetChanged();
                   mSwipeRefreshLayout.setRefreshing(false);
               }
           }, 1000);
       }

RecyclerView 实现上拉加载

滚动事件的分析

1.RecyclerView 本身已经提供了滑动的监听接口,OnScrollListener,这个接口包含了以下的方法，代码注释介绍。

mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
      //当recycleView的滑动状态改变时回调
       @Override
       public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
           super.onScrollStateChanged(recyclerView, newState);
       }

      //当RecycleView滑动之后被回调
       @Override
       public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
           super.onScrolled(recyclerView, dx, dy);
      }
});

2.RecyclerView 的滑动状态

• 当前的recycleView不滑动(滑动已经停止时)：
  public static final int SCROLL_STATE_IDLE = 0;

• 当前的recycleView被拖动滑动：
  public static final int SCROLL_STATE_DRAGGING = 1;

• 当前的recycleView在滚动到某个位置的动画过程,但没有被触摸滚动.调用 scrollToPosition(int) 应该会触发这个状态：
  public static final int SCROLL_STATE_SETTLING = 2;

3.滑动位置的监听
3.1 以下是最简单的顶部/底部的判断方式：

mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
      //当recycleView的滑动状态改变时回调
       @Override
       public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
           super.onScrollStateChanged(recyclerView, newState);

          //获取最后一个可见view的位置
          int lastItemPosition = linearManager.findLastVisibleItemPosition();
          //获取第一个可见view的位置
          int firstItemPosition =linearManager.findFirstVisibleItemPosition();

          if (newState == RecyclerView.SCROLL_STATE_IDLE && lastItemPosition + 1 == adapter.getItemCount()) {
          //最后一个itemView的position为adapter中最后一个数据时,说明该itemView就是底部的view了
          //需要注意position从0开始索引,adapter.getItemCount()是数据量总数
          }

          //同理检测是否为顶部itemView时,只需要判断其位置是否为0即可
          if (newState == RecyclerView.SCROLL_STATE_IDLE && firstItemPosition == 0) {}
       }
});

以上的实现方式存在诸多问题，比如：

• itemView会在滑动过程中只显示一部分或者一半
• 检测数据不够时的RecycleView

3.2 对于显示不全的问题
也就是说：当某一个itemView只显示一部分的时候，此时已经算是一个position了，此时很可能去触发判断条件。所以官方 Api 里有一下两个方法：

• findFirstCompletlyVisibleItemPosition()
• findLastCompletlyVisibleItemPosition()

就可以尽可能的避免这种问题。

3.3 检测数据不够时的状态

如果为了避免这种情况,我们就需要对在检测时多进行一步,若当前的RecycleView显示的itemView不满屏的情况下,其实并不存在滑动的说法(没有加载更多,因为根本数据还没有满屏显示),至于下拉刷新的,还是可以的,但一般都会使用SwipeRefreshLayout实现下拉刷新了.因此这里主要考虑的是关于滑动到底部加载更多的问题.

3.4 上拉加载更多代码实现

mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {

    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        if (dy > 0) {//向下滚动
            int visibleItemCount = mLayoutManager.getChildCount();
            int totalItemCount = mLayoutManager.getItemCount();
            int pastVisiblesItems = mLayoutManager.findFirstVisibleItemPosition();

            if (!loading && (visibleItemCount + pastVisiblesItems) == totalItemCount) {
                loading = true;
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        for (int i = 0; i < 5; i++) {
                            mData.add(new ShareBean(R.mipmap.ic_image_s, "上拉加载数据" + i));
                        }
                        mAdapter.notifyDataSetChanged();
                        loading = false;
                    }
                }, 3000);
            }
        }
    }
});

添加 FooterView 实现上拉加载

接下来完善UI，让用户知道确实在上拉加载的过程。用RecyclerView实现，使用 getItemType() 方法，就与 ListView 差不多了。不说多了，直接上完整代码（注释很清晰）：

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    public  OnItemClickListener itemClickListener;
    private List<ShareBean> mData = null;
    private LayoutInflater mInflater;

    //1.加入布局状态标志-用来判断此时加载是普通Item还是footView
    //没有更多了
    public static final int NO_DATA_MORE = 0;
    //上拉加载更多
    public static final int PULLUP_LOAD_MORE = 1;
    //正在加载中
    public static final int LOADING_MORE = 2;

    private int load_more_status = 0;

    private static final int TYPE_ITEM = 0;  //普通Item View
    private static final int TYPE_FOOTER = 1;  //顶部FootView

    public RecyclerAdapter(Context context, List<ShareBean> mData) {
        this.mData = mData;
        this.mInflater = LayoutInflater.from(context);
    }

    //4.接着onCreateViewHolder(ViewGroup parent,int viewType)加载布局的时候根据viewType的类型来选择指定的布局创建，返回即可:
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//        将布局转化为View并传递给Recycler封装好的ViewHolder
        if (viewType == TYPE_ITEM) {
            View view = mInflater.inflate(R.layout.item_recyclerview, parent, false);
            return new ItemViewHolder(view);
        } else if (viewType == TYPE_FOOTER) {
            View foot_view = mInflater.inflate(R.layout.part_footer, parent, false);
            return new BottomViewHolder(foot_view);
        }
        return null;
    }

    //5.最后进行判断数据的时候(onBindViewHolder)，判断holder的类型来进行判定数据即可.
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if (holder instanceof ItemViewHolder) {
            ((ItemViewHolder) holder).mImageView.setImageResource(mData.get(position).getImage_id());
            ((ItemViewHolder) holder).mTextView.setText(mData.get(position).getName());
        } else if (holder instanceof BottomViewHolder) {
            BottomViewHolder footViewHolder = (BottomViewHolder) holder;
            switch (load_more_status) {
                case PULLUP_LOAD_MORE:
                    footViewHolder.mFooterTv.setText("上拉加载更多...");
                    footViewHolder.mProgressBar.setVisibility(View.VISIBLE);
                    break;
                case LOADING_MORE:
                    footViewHolder.mFooterTv.setText("正在加载中...");
                    footViewHolder.mProgressBar.setVisibility(View.VISIBLE);
                    break;
                case NO_DATA_MORE:
                    footViewHolder.mFooterTv.setText("----我是有底线的----");
                    footViewHolder.mProgressBar.setVisibility(View.GONE);
                    break;
            }
        }
    }

    //3.重写getItemViewType方法来判断返回加载的布局的类型
    @Override
    public int getItemViewType(int position) {
        if (position + 1 == getItemCount()) {
            return TYPE_FOOTER;
        } else {
            return TYPE_ITEM;
        }
    }

    //2.返回item数量
    @Override
    public int getItemCount() {
        return mData.size() + 1;
    }

    /**
     * //上拉加载更多
     * PULLUP_LOAD_MORE=0;
     * //正在加载中
     * LOADING_MORE=1;
     * //加载完成已经没有更多数据了
     * NO_MORE_DATA=2;
     *
     * @param status
     */
    public void changeMoreStatus(int status) {
        load_more_status = status;
        notifyDataSetChanged();
    }

    public  class ItemViewHolder extends RecyclerView.ViewHolder {

        CardView mCardView;
        CircleImageView mImageView;
        TextView mTextView;

        public ItemViewHolder(View itemView) {
            super(itemView);
            mTextView = (TextView) itemView.findViewById(R.id.textView);
            mCardView = (CardView) itemView.findViewById(R.id.cardView);
            mImageView = (CircleImageView) itemView.findViewById(R.id.image);
            mCardView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    if (itemClickListener != null) {
                        itemClickListener.onItemClick(view, getPosition());
                    }
                }
            });
        }
    }

     /**
     * 底部FootView布局
     */
    public class BottomViewHolder extends RecyclerView.ViewHolder {

        ProgressBar mProgressBar;
        TextView mFooterTv;

        public BottomViewHolder(View itemView) {
            super(itemView);
            mProgressBar = (ProgressBar) itemView.findViewById(R.id.progress_bar);
            mFooterTv = (TextView) itemView.findViewById(R.id.footer_tv);
        }
    }

    public void setOnItemClickListener(OnItemClickListener itemClickListener) {
        this.itemClickListener = itemClickListener;
    }

}

终于分析完了，感觉滑动需要继续探究，，，嗯嗯，先就这样吧。

参考文章及总结

以上说对基础知识的一些梳理，存在诸多不足，请多指正。

主要参考文章：

• RecyclerView使用详解
• RecyclerView使用完全指南，是时候体验新控件了
• RecyclerView完全解析之下拉刷新与上拉加载
• RecyclerView滑动事件检测的辅助类