Android 高级UI设计笔记07：RecyclerView 的详解

1. RecyclerView介绍

      在Android应用程序中列表是一个非常重要的控件，适用场合非常多，如新闻列表、应用列表、消息列表等等，但是从Android 一出生到现在并没有非常好用的列表控件，早期的 ListView 用法非常复杂，尤其是自定义列表，简直就是地狱，因为其中还涉及到很多效率优化的问题，新手很难写出高效率的基于列表应用，而且 ListView 只能垂直方向呈现内容，使用很不灵活，为了解决这个缺陷，Android 官方推出了 RecyclerView 控件，用来替代 ListView。

（1）RecyclerView的控件相对于ListView，他好在哪里呢？

　　1）它封装了viewholder的回收复用。

      2）RecyclerView使用布局管理器管理子view的位置，也就是说你再不用拘泥于ListView的竖直线性展示方式。通过设置LayoutManager来快速实现listview、gridview、瀑布流的效果；而且还可以设置横向和纵向显示

　　3）带了ItemAnimation，可以设置加载和移除时的动画，方便做出各种动态浏览的效果。

　　4）分开的view ：

我们平时用listview的时候，adapter一般这么写的：

if (convertView == null) {
      holder = new ViewHolder();
       LayoutInflater inflater = ((Activity) mContext).getLayoutInflater();
       convertView = inflater.inflate(
               R.layout.list_device_binding, parent, false);

       holder.deviceImage = (ImageView) convertView
               .findViewById(R.id.bluetoothDeviceImage);
       holder.deviceName = (TextView) convertView
               .findViewById(R.id.bluetoothDeviceName);
       holder.deviceType = (TextView) convertView
               .findViewById(R.id.bluetoothDeviceType);
       convertView.setTag(holder);
   } else {
       holder = (ViewHolder) convertView.getTag();
   }

但是，到了这里，RecyclerView分隔开了，如下：

@Override
public A onCreateViewHolder(ViewGroup parent, int viewType) {       
    final View view = LayoutInflater.from(mContext).
          inflate(R.layout.listitem_track_history, parent, false);
    return new ViewHolder(view); 
 }  

@Override
public void onBindViewHolder(A holder, int position) {
     Data da=getData(position);
    holder.tvDate.setText(da.getDate());
}

　　5）相对简单的层次结构：

我们看下Listview他背后的继承关系：

public class ListView extends AbsListView 
public abstract class AbsListView extends AdapterView<ListAdapter>
public abstract class AdapterView<T extends Adapter> extends ViewGroup 

三重继承，内容还挺多的，不是直接继承ViewGroup，而相反的RecycleView却是直接继承自ViewGroup的。

（2）RecyclerView的控件相对于ListView，他有什么缺陷呢？（目前只知道1个缺点）

　　1）不能简单的添加点击事件onListItemClickListener 

我们在使用listview设置子item的点击事件的时候，只需要像下面这么写

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
       @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

           User user= parent.getItemAtPosition(position);                   
        }
});

但是，如果你使用这个RecycleView，会发现没有这个接口了。RecyclerView不再负责Item视图的布局及显示，所以RecyclerView也没有为Item开放OnItemClick等点击事件。

这就需要我们自己实现，见我的博客：Android 高级UI设计笔记20：RecyclerView 的详解之RecyclerView添加Item点击事件

（3）RecyclerView 核心内容：

• Android RecyclerView 的用法
• Android RecyclerView 横向布局
• Android RecyclerView 垂直布局
• Android RecyclerView 表格布局

这里我们使用的Android Studio，首先新建Android工程之后，右击app，打开  "Open Module Setting" ，然后找到"Dependencies"选项，添加RecyclerView依赖库，如下：

在gradle中添加依赖

dependencies {

    compile fileTree(dir: 'libs', include: ['*.jar'])

    testCompile 'junit:junit:4.12'

    compile 'com.android.support:appcompat-v7:23.4.0'

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

}

当然也有很多朋友使用Eclipse开发工具（建议大家尽快使用AS，AS比Eclipse高效太多了），如果要使用RecyclerView也很简单，只要添加一个jar包到工程的libs文件下，然后构建路径就可以使用了，当然静态布局设计的时候还是注意要引用RecyclerView的全路径。

这个jar包为android-support-v7-recyclerview.jar  和 android-support-v4.jar，这个两个jar包往往会因为版本不一致产生冲突，从而会报错：

java.lang.RuntimeException: Unable to start activity ComponentInfo

这里是安全使用的v4 和 v7 库的下载地址为：http://download.csdn.net/detail/hebao5201314/9567555

那么这里我先讲解使用RecyclerView主要方法，如下：

   1）setLayoutManager（layout）：控制显示方式。

RecyclerView提供了三种LayoutManager：LinearLayoutManager、GridLayoutManager、StaggeredGridLayoutManager

   2）setItemAnimator（）：控制item的增删动画。

   3）addItemDecoration（）： 控制item间的间隔，这里还可以自定义间隔的样式。

——Adapter：使用RecyclerView时，我们需要一个集成RecyclerView.Adapter的适配器，作用是将数据与每个item的界面进行绑定。

——LayoutManager：用来确定每个item的布局，何时展示和隐藏。回收或重用的时候LayoutManager会向适配器请求新的数据来替换旧的数据，这种机制和ListView的原理类似，都避免了创建过多的View和频繁的调用findViewById方法。

目前SDK中提供了三种自带的LayoutManager：

　1）LinearLayoutManager

　2）GridLayoutManager

　3）StaggeredGridLayoutManager

2. 接下来我们就可以使用RecyclerView。

（1）首先我们来到MainActivity里面，如下：

package com.example.hebao.learnrv;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private RecyclerView rv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        rv = new RecyclerView(this);
         //先加载RecyclerView
        setContentView(rv);
         //然后动态设置RecyclerView
        rv.setLayoutManager(new LinearLayoutManager(this));
        rv.setAdapter(new RecyclerView.Adapter(){
            class ViewHolder extends  RecyclerView.ViewHolder {
                private TextView tv;

                public ViewHolder(TextView itemView) {
                    super(itemView);
                    tv = itemView;
                }

                public TextView getTv() {
                    return tv;
                }
            }

            /**
             * 创建ViewHolder
             * @param viewGroup
             * @param i
             * @return
             */
            @Override
            public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
                return new ViewHolder(new TextView(viewGroup.getContext()));
            }

            /**
             * 对上面自己创建的ViewHolder携带数据进行处理
             * @param viewHolder
             * @param i
             */
            @Override
            public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int i) {
                ViewHolder vh  = (ViewHolder) viewHolder;
                vh.getTv().setText("Item "+i);
            }

            /**
             *
             * 获取RecyclerView的子对象数量
             */
            @Override
            public int getItemCount() {
                return 100;
            }
        } );
    }


}

布署程序到模拟器上，如下：（可以上下滑动滚动）

（2）利用数组承载数据源：

package com.example.hebao.learnrv;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private RecyclerView rv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        rv = new RecyclerView(this);

        setContentView(rv);

        rv.setLayoutManager(new LinearLayoutManager(this));
        rv.setAdapter(new RecyclerView.Adapter(){
            private String[] data = new String[] {"hello", "二胎时代","九阴真经"};
            class ViewHolder extends  RecyclerView.ViewHolder {
                private TextView tv;

                public ViewHolder(TextView itemView) {
                    super(itemView);
                    tv = itemView;
                }

                public TextView getTv() {
                    return tv;
                }
            }

            /**
             * 创建ViewHolder
             * @param viewGroup
             * @param i
             * @return
             */
            @Override
            public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
                return new ViewHolder(new TextView(viewGroup.getContext()));
            }

            /**
             * 对上面自己创建的ViewHolder携带数据进行处理
             * @param viewHolder
             * @param i
             */
            @Override
            public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int i) {
                ViewHolder vh  = (ViewHolder) viewHolder;
                vh.getTv().setText(data[i]);
            }

            /**
             *
             * 获取RecyclerView的子对象数量
             */
            @Override
            public int getItemCount() {
                return data.length;
            }
        });
    }


}

布署程序到模拟器上，如下：

3. 使用资源文件自定义列表项:

（1）首先来到MainActivity，如下：

package com.example.hebao.learnrv;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

public class MainActivity extends AppCompatActivity {

    private RecyclerView rv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        rv = new RecyclerView(this);

        setContentView(rv);

        rv.setLayoutManager(new LinearLayoutManager(this));
        rv.setAdapter(new MyAdapter());
    }


}

（2）此时MyAdapter，如下：

package com.example.hebao.learnrv;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by hebao on 11/16/15.
 */
class MyAdapter extends RecyclerView.Adapter {
    private ItemData[] data = new ItemData[] {new ItemData("东邪", "黄药师"), new ItemData("西狂","杨过")};

    class ViewHolder extends RecyclerView.ViewHolder {
        private View root;
        private TextView tvTitle, tvContent;

        public ViewHolder(View root) {
            super(root);
            tvTitle = (TextView) root.findViewById(R.id.tvTitle);
            tvContent = (TextView) root.findViewById(R.id.tvContent);
        }

        public TextView getTvContent() {
            return tvContent;
        }

        public TextView getTvTitle() {
            return tvTitle;
        }
    }

    /**
     * 创建ViewHolder
     *
     * @param viewGroup
     * @param i
     * @return
     */
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        return new ViewHolder(LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_cell,
                null));
    }

    /**
     * 对上面自己创建的ViewHolder携带数据进行处理
     *
     * @param viewHolder
     * @param i
     */
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int i) {
        ViewHolder vh = (ViewHolder) viewHolder;
        ItemData id = data[i];
        vh.getTvTitle().setText(id.title);
        vh.getTvContent().setText(id.content);

    }

    /**
     * 获取RecyclerView的子对象数量
     */
    @Override
    public int getItemCount() {
        return data.length;
    }



}

此处我们用到了一个实体数据类ItemData，如下：

package com.example.hebao.learnrv;

/**
 * Created by hebao on 11/16/15.
 */
public class ItemData {
    public String title = "title";
    public String content ="content";

    public ItemData(String title, String content) {
        this.title = title;
        this.content = content;
    }
}

自定义布局文件资源为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">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/tvTitle"
        android:layout_gravity="center_horizontal" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/tvContent"
        android:layout_gravity="center_horizontal" />
</LinearLayout>

（3）程序布署到模拟器上，如下：

 

相信大家看到上面的显示效果Item之间没有分割线，该怎么办呢？

这里我们需要用到RecyclerView.ItemDecoration给每一项Item视图添加子View，可以进行画分隔线之类的东西

那么具体如何使用呢

    我们可以创建一个类继承RecyclerView.ItemDecoration类来绘制分隔线，通过ItemDecoration可 以让我们每一个Item从视觉上面相互分开来，实现一个ItemDecoration，系统提供的ItemDecoration是一个抽象类，因为当我们RecyclerView在进行绘制的时候会进行绘制。

下面是转载别人实现的RecycleViewDivider，如下：

package com.himi.recyclerviewdemo;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.v4.content.ContextCompat;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.RecyclerView.ItemDecoration;
import android.view.View;

public class RecycleViewDivider extends ItemDecoration {
      private Paint mPaint;
        private Drawable mDivider;
        private int mDividerHeight = 2;//分割线高度，默认为1px
        private int mOrientation;//列表的方向：LinearLayoutManager.VERTICAL或LinearLayoutManager.HORIZONTAL
        private static final int[] ATTRS = new int[]{android.R.attr.listDivider};

        /**
         * 默认分割线：高度为2px，颜色为灰色
         *
         * @param context
         * @param orientation 列表方向
         */
        public RecycleViewDivider(Context context, int orientation) {
            if (orientation != LinearLayoutManager.VERTICAL && orientation != LinearLayoutManager.HORIZONTAL) {
                throw new IllegalArgumentException("请输入正确的参数！");
            }
            mOrientation = orientation;

            final TypedArray a = context.obtainStyledAttributes(ATTRS);
            mDivider = a.getDrawable(0);
            a.recycle();
        }

        /**
         * 自定义分割线
         *
         * @param context
         * @param orientation 列表方向
         * @param drawableId  分割线图片
         */
        public RecycleViewDivider(Context context, int orientation, int drawableId) {
            this(context, orientation);
            mDivider = ContextCompat.getDrawable(context, drawableId);
            mDividerHeight = mDivider.getIntrinsicHeight();
        }

        /**
         * 自定义分割线
         *
         * @param context
         * @param orientation   列表方向
         * @param dividerHeight 分割线高度
         * @param dividerColor  分割线颜色
         */
        public RecycleViewDivider(Context context, int orientation, int dividerHeight, int dividerColor) {
            this(context, orientation);
            mDividerHeight = dividerHeight;
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mPaint.setColor(dividerColor);
            mPaint.setStyle(Paint.Style.FILL);
        }


        //获取分割线尺寸
        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            super.getItemOffsets(outRect, view, parent, state);
            outRect.set(0, 0, 0, mDividerHeight);
        }

        //绘制分割线
        @Override
        public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
            super.onDraw(c, parent, state);
            if (mOrientation == LinearLayoutManager.VERTICAL) {
                drawVertical(c, parent);
            } else {
                drawHorizontal(c, parent);
            }
        }

        //绘制横向 item 分割线
        private void drawHorizontal(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 + mDividerHeight;
                if (mDivider != null) {
                    mDivider.setBounds(left, top, right, bottom);
                    mDivider.draw(canvas);
                }
                if (mPaint != null) {
                    canvas.drawRect(left, top, right, bottom, mPaint);
                }
            }
        }

        //绘制纵向 item 分割线
        private void drawVertical(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 + mDividerHeight;
                if (mDivider != null) {
                    mDivider.setBounds(left, top, right, bottom);
                    mDivider.draw(canvas);
                }
                if (mPaint != null) {
                    canvas.drawRect(left, top, right, bottom, mPaint);
                }
            }
        }
    }

使用方法：

添加默认分割线：高度为2px，颜色为灰色

　　mRecyclerView.addItemDecoration(new RecycleViewDivider(mContext, LinearLayoutManager.VERTICAL));

添加自定义分割线：可自定义分割线drawable

　　mRecyclerView.addItemDecoration(new RecycleViewDivider(mContext, LinearLayoutManager.VERTICAL, R.drawable.divider_mileage));

添加自定义分割线：可自定义分割线高度和颜色

　　mRecyclerView.addItemDecoration(new RecycleViewDivider(mContext, LinearLayoutManager.VERTICAL, 10, getResources().getColor(R.color.divide_gray_color)));

使用很简单，这里我就不添加代码实现了。

4. RecyclerView的布局样式

（1）RecyclerView的横向布局：

修改2上面代码，如下：

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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/tvTitle"
        android:layout_gravity="center_horizontal" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/tvContent"
        android:layout_gravity="center_horizontal" />
</LinearLayout>

同时来到MainActivity，如下：

package com.example.hebao.learnrv;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

public class MainActivity extends AppCompatActivity {

    private RecyclerView rv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        rv = new RecyclerView(this);

        setContentView(rv);
        //设置RecyclerView为横向布局
        rv.setLayoutManager(new LinearLayoutManager(this,LinearLayoutManager.HORIZONTAL,false));
        rv.setAdapter(new MyAdapter());
    }


}

布署程序到模拟器上，如下：

 

 

（2）RecyclerView的垂直布局

rv.setLayoutManager（new LinearLayoutManager（this，LinearLayoutManager.VERTICAL，false））；

 

（3）RecyclerView的表格布局：

rv.setLayoutManager（new GridLayoutManager（this，3））；