Carson带你学Android：手把手带你深入学习RecylerView

分手后的思念是犯贱 2024-04-19 11:59 10阅读 0赞

![a26aedafc2ac45510787091b1d02f019.png][]

# 前言 #

*  `RecylerView`在`Android`开发中十分常见
 *  今天，我将为大家带来`RecylerView`的全面介绍，包括其定义、特点、具体使用等，希望你们会喜欢。

> **Carson带你学Android系列文章**  
> [Carson带你学Android：学习方法][Carson_Android]  
> [Carson带你学Android：四大组件][Carson_Android 1]  
> [Carson带你学Android：自定义View][Carson_Android_View]  
> [Carson带你学Android：异步-多线程][Carson_Android_-]  
> [Carson带你学Android：性能优化][Carson_Android 2]  
> [Carson带你学Android：动画][Carson_Android 3]

--------------------

# 目录 #

![示意图][format_png]

--------------------

# 1. 简介 #

*  定义`Google`用于代替`ListView`的滑动组件
 *  特点：功能更强大、支持定制样式更丰富、扩展性更高

--------------------

# 2. 与ListView对比 #

### 2.1 优点 ###

![示意图][format_png 1]

mRecyclerView = findView(R.id.id_recyclerview);
    //设置布局管理器
    mRecyclerView.setLayoutManager(layout);
    //设置adapter
    mRecyclerView.setAdapter(adapter)
    //设置Item增加、移除动画
    mRecyclerView.setItemAnimator(new DefaultItemAnimator());
    //添加分割线
    mRecyclerView.addItemDecoration(new DividerItemDecoration(
                    getActivity(), DividerItemDecoration.HORIZONTAL_LIST));

*  问：相比较于ListView，RecyclerView基本需要上面一系列步骤进行设置，而ListView可能只需要去设置一个adapter就能正常使用。那么为什么会添加这么多的步骤呢？
 *  答：从名字上看RecyclerView，即回收循环视图，也就是说RecyclerView只管回收与复用View，其他的你可以自己去设置，可以看出其高度的解耦，给予你充分的定制自由

### 2.2 缺点 ###

RecyclerView实现控制点击、长按事件较为麻烦，需要自己写

--------------------

# 3. 应用场景 #

列表页展示界面（需扩展、需支持动画、频繁更新 & 局部刷新）

--------------------

# 4. 基础概念 #

### 4.1 RecyclerView.Adapter ###

和ListView一样，RecyclerView一样需要适配器，而且这个适配器强制要求了我们必须要用Viewholder，让性能得到优化，而且getView方法不需自己写，我们只需要写好Viewholder，View的复用已经封装好了。

### 4.2 LayoutManager ###

布局管理器，设置为LinearLayoutManager、GridLayoutManager、StaggeredGridLayoutManager可以轻易地实现ListView，GridView以及流式布局的列表效果。

> 还可管理滚动 & 循环利用

### 4.3 ItemAnimator ###

这个类可以实现增删动画，而且不想设置的话它的默认效果已经很好了。

--------------------

# 5. 使用步骤 #

1.  定义主xml布局
2.  根据需要定义RecyclerView每行所实现的xml布局
3.  定义一个Adapter类继承RecyclerView.Adapter，重写里面的方法。
4.  定义一个HashMap构成的列表，将数据以键值对的方式存放在里面。
5.  构造Adapter对象，设置适配器。
6.  将RecyclerView绑定到Adapter上。

--------------------

# 6. 具体实例 #

*  将按照上述步骤进行具体实例展示
 *  个人推荐先下载Demo源码再对着下面分析看，效果会更好：[Demo的源码下载][Demo]

步骤1. 定义主xml布局  
*activity\_main.xml*

> 在AndroidStudio1.5使用support-v7包：

*  右键文件目录的app目录进入Moudle Setting
 *  在Dependencies里面加入

compile 'com.android.support:recyclerview-v7:23.1.1'

步骤2. 根据需要定义RecyclerView每行所实现的xml布局（item布局）  
*list\_cell.xml*

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:layout_alignParentRight="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/ItemImage"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Text"
            android:id="@+id/Itemtitle" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Text"
            android:id="@+id/Itemtext"
            android:layout_below="@+id/Itemtitle"/>
    </RelativeLayout>
    </LinearLayout>

步骤3. 定义一个Adapter类继承 RecyclerView.Adapter，重写里面的方法。  
*MyAdapter.java*

package scut.receiverview;
    
    import android.content.Context;
    import android.support.v7.widget.RecyclerView;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ImageView;
    import android.widget.TextView;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    
    /**
     * Created by yany on 2016/4/11.
     */
    public class MyAdapter extends RecyclerView.Adapter {
        private LayoutInflater inflater;
        private ArrayList<HashMap<String, Object>> listItem;
        private MyItemClickListener myItemClickListener;
    
        public MyAdapter(Context context, ArrayList<HashMap<String, Object>> listItem) {
            inflater = LayoutInflater.from(context);
            this.listItem = listItem;
        }//构造函数，传入数据
    
    
        //定义Viewholder
        class Viewholder extends RecyclerView.ViewHolder  {
            private TextView Title, Text;
            private ImageView ima;
    
            public Viewholder(View root) {
                super(root);
                Title = (TextView) root.findViewById(R.id.Itemtitle);
                Text = (TextView) root.findViewById(R.id.Itemtext);
                ima = (ImageView) root.findViewById(R.id.ItemImage);
                root.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        if (myItemClickListener != null)
                            myItemClickListener .onItemClick(v,getPosition());
                    }
    
                }//监听到点击就回调MainActivity的onItemClick函数
                );
    
            }
    
            public TextView getTitle() {
                return Title;
            }
    
            public TextView getText() {
                return Text;
            }
    
            public ImageView getIma() {
                return ima;
            }
    
    
        }
    
            @Override
            public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
                return new Viewholder(inflater.inflate(R.layout.list_cell, null));
            }//在这里把ViewHolder绑定Item的布局
    
            @Override
            public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
                Viewholder vh = (Viewholder) holder;
                vh.Title.setText((String) listItem.get(position).get("ItemTitle"));
                vh.Text.setText((String) listItem.get(position).get("ItemText"));
                vh.ima.setImageResource((Integer) listItem.get(position).get("ItemImage"));
            }//在这里绑定数据到ViewHolder里面
    
            @Override
            public int getItemCount() {
                return listItem.size();
            }//返回Item数目
    
            public void setOnItemClickListener(MyItemClickListener listener){
            myItemClickListener = listener;
            }//绑定MainActivity传进来的点击监听器
    }

> 实现点击事件:

1.  在Viewholder里面设置了点击事件监听器
2.  通过调用OnItemClickListener的接口方法回调MainActivity里的方法。

MyItemClickListener.java接口：用来实现点击事件

package scut.receiverview;
    
    import android.view.View;
    
    
    public interface MyItemClickListener {
        public void onItemClick(View view,int postion);
    }

步骤4：在MainActicity.java里：

*  定义一个HashMap构成的列表，将数据以键值对的方式存放在里面。
 *  构造Adapter对象，设置适配器
 *  将RecyclerView绑定到Adapter上

MainActicity.java

package scut.receiverview;
    
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.LinearLayoutManager;
    import android.support.v7.widget.RecyclerView;
    import android.view.View;
    import android.widget.Toast;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    
    public class MainActivity extends AppCompatActivity implements MyItemClickListener {
        private RecyclerView Rv;
        private ArrayList<HashMap<String,Object>> listItem;
        private MyAdapter myAdapter;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            initData();
            initView();
    
        }
    
        public void initData(){
            listItem = new ArrayList<HashMap<String, Object>>();/*在数组中存放数据*/
            for (int i = 0; i < 100; i++) {
                HashMap<String, Object> map = new HashMap<String, Object>();
                map.put("ItemTitle", "第" + i + "行");
                map.put("ItemText", "这是第" + i + "行");
                map.put("ItemImage",R.mipmap.ic_launcher);
                listItem.add(map);
            }
        }
        public void initView(){
    
    Rv = (RecyclerView) findViewById(R.id.my_recycler_view);
            //使用线性布局
            LinearLayoutManager layoutManager = new LinearLayoutManager(this);
            Rv.setLayoutManager(layoutManager);
            Rv.setHasFixedSize(true);
            Rv.addItemDecoration(new DividerItemDecoration(this, layoutManager.getOrientation()));//用类设置分割线
    //Rv.addItemDecoration(new DividerItemDecoration(this, R.drawable.list_divider)); //用已有图片设置分割线
    
          //为ListView绑定适配器
          myAdapter = new MyAdapter(this,listItem);
          myAdapter.setOnItemClickListener(this);
          Rv.setAdapter(myAdapter);  
    
         
            
    
        }
    
        @Override
        public void onItemClick(View view, int postion) {//点击事件的回调函数
            System.out.println("点击了第"+postion+"行");
            Toast.makeText(this, (String)listItem.get(postion).get("ItemText"), Toast.LENGTH_SHORT).show();
        }
    
    }

**5. 最后是一个步骤是实现分割线ItemDecoration**

> 如果自己画了分割线就可以直接添上去，不需要写这个类

DividerItemDecoration.java:

package scut.receiverview;
    
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.Rect;
    import android.support.v7.widget.LinearLayoutManager;
    import android.support.v7.widget.RecyclerView;
    import android.util.TypedValue;
    import android.view.View;
    
    
    public class DividerItemDecoration extends RecyclerView.ItemDecoration {
        /*
          * RecyclerView的布局方向，默认先赋值
          * 为纵向布局
          * RecyclerView 布局可横向，也可纵向
          * 横向和纵向对应的分割想画法不一样
          * */
        private int mOrientation = LinearLayoutManager.VERTICAL ;
    
        /**
         * item之间分割线的size，默认为1
         */
        private int mItemSize = 1 ;
    
        /**
         * 绘制item分割线的画笔，和设置其属性
         * 来绘制个性分割线
         */
        private Paint mPaint ;
    
        /**
         * 构造方法传入布局方向，不可不传
         * @param context
         * @param orientation
         */
        public DividerItemDecoration(Context context,int orientation) {
            this.mOrientation = orientation;
            if(orientation != LinearLayoutManager.VERTICAL && orientation != LinearLayoutManager.HORIZONTAL){
                throw new IllegalArgumentException("请传入正确的参数") ;
            }
            mItemSize = (int) TypedValue.applyDimension(mItemSize, TypedValue.COMPLEX_UNIT_DIP,context.getResources().getDisplayMetrics());
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG) ;
            mPaint.setColor(Color.BLUE);
             /*设置填充*/
            mPaint.setStyle(Paint.Style.FILL);
        }
    
        @Override
        public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
            if(mOrientation == LinearLayoutManager.VERTICAL){
                drawVertical(c,parent) ;
            }else {
                drawHorizontal(c,parent) ;
            }
        }
    
        /**
         * 绘制纵向 item 分割线
         * @param canvas
         * @param parent
         */
        private void drawVertical(Canvas canvas,RecyclerView parent){
            final int left = parent.getPaddingLeft() ;
            final int right = parent.getMeasuredWidth() - parent.getPaddingRight() ;
            final int childSize = parent.getChildCount() ;
            for(int i = 0 ; i < childSize ; i ++){
                final View child = parent.getChildAt( i ) ;
                RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams();
                final int top = child.getBottom() + layoutParams.bottomMargin ;
                final int bottom = top + mItemSize ;
                canvas.drawRect(left,top,right,bottom,mPaint);
            }
        }
    
        /**
         * 绘制横向 item 分割线
         * @param canvas
         * @param parent
         */
        private void drawHorizontal(Canvas canvas,RecyclerView parent){
            final int top = parent.getPaddingTop() ;
            final int bottom = parent.getMeasuredHeight() - parent.getPaddingBottom() ;
            final int childSize = parent.getChildCount() ;
            for(int i = 0 ; i < childSize ; i ++){
                final View child = parent.getChildAt( i ) ;
                RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams();
                final int left = child.getRight() + layoutParams.rightMargin ;
                final int right = left + mItemSize ;
                canvas.drawRect(left,top,right,bottom,mPaint);
            }
        }
    
        /**
         * 设置item分割线的size
         * @param outRect
         * @param view
         * @param parent
         * @param state
         */
        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            if(mOrientation == LinearLayoutManager.VERTICAL){
                outRect.set(0,0,0,mItemSize);
            }else {
                outRect.set(0,0,mItemSize,0);
            }
        }
    }

### 效果输出图 ###

![format_png 2][]

--------------------

# 7. 总结 #

*  本文全面介绍了`RecylerView`，包括其定义、特点、具体使用等。
 *  **Carson带你学Android系列文章**  
    [Carson带你学Android：学习方法][Carson_Android]  
    [Carson带你学Android：四大组件][Carson_Android 1]  
    [Carson带你学Android：自定义View][Carson_Android_View]  
    [Carson带你学Android：异步-多线程][Carson_Android_-]  
    [Carson带你学Android：性能优化][Carson_Android 2]  
    [Carson带你学Android：动画][Carson_Android 3]

--------------------

# 欢迎关注Carson\_Ho的[CSDN博客][CSDN] 与 公众号！ #

博客链接：https://carsonho.blog.csdn.net/  
![06b2ed0fbb8979f0aba34c14ede04b59.png][]

--------------------

# 请帮顶 / 评论点赞！因为你的鼓励是我写作的最大动力！ #

[a26aedafc2ac45510787091b1d02f019.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fb21c9a17866411daaaee3d7d5444d58.png
[Carson_Android]: https://blog.csdn.net/carson_ho/category_9273178.html?spm=1001.2014.3001.5482
[Carson_Android 1]: https://blog.csdn.net/carson_ho/category_5959547.html?spm=1001.2014.3001.5482
[Carson_Android_View]: https://blog.csdn.net/carson_ho/category_6735474.html?spm=1001.2014.3001.5482
[Carson_Android_-]: https://blog.csdn.net/carson_ho/category_6440777.html?spm=1001.2014.3001.5482
[Carson_Android 2]: https://blog.csdn.net/carson_ho/category_7474499.html?spm=1001.2014.3001.5482
[Carson_Android 3]: https://blog.csdn.net/carson_ho/category_9268277.html?spm=1001.2014.3001.5482
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtZGEwYmYzYThjNGMzMTYxYy5wbmc?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzk0NDM2NS0zMjE4MWU3ZmMzODJiZmMzLnBuZw?x-oss-process=image/format,png
[Demo]: https://github.com/Carson-Ho/RecyclerView
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzk0NDM2NS01NzU0NjQ1YTg1MTY5Y2RjLnBuZw?x-oss-process=image/format,png
[CSDN]: https://carsonho.blog.csdn.net/
[06b2ed0fbb8979f0aba34c14ede04b59.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/85d10599b99543d098cbbb4f81fda6dd.png