RecyclerView和CardView的使用

        前言：Material Design Library系列博客写完后总觉得缺少了点什么，后来一想RecyclerView和CardView虽然是android-suport-v7-21中添加的，但也是Material Design不可或缺的一部分，所以在这篇博客中结合SwipeRefreshLayout实现一个下拉刷新的Demo做个笔记。

       接下来实现的效果是这样的：

       通过下拉刷新增加item

       

1.新建工程并添加依赖：

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

2.新建一个布局recycler_item.xml作为RecyclerView的每个item，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/id_card_view"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_margin="4dp"
    app:cardBackgroundColor="#AABBCC"
    app:cardCornerRadius="8dp"
    android:elevation="2dp">

    <TextView
        android:id="@+id/id_item_tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="40sp"
        android:layout_gravity="center"/>

</android.support.v7.widget.CardView>

这里只是在CardView下简单放置了一个TextView。

CardView下有三个重要的属性：

        cardBackgroundColor用来设置卡片的背景颜色

        cardCornerRadius用来设置卡片的四个圆角尺寸

        elevation用来设置卡片在Z轴上的悬浮尺寸

3.修改activity_main.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.v7.widget.RecyclerView
            android:id="@+id/id_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="vertical"/>

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

</LinearLayout>

这里用SwipeRefreshLayout将RecyclerView包裹住，需要注意的是SwipeRefreshLayout下只能有一个直接子View。

4.新建一个适配器类MyRecyclerAdapter用于RecyclerView的数据适配，代码如下：

    class MyRecyclerAdapter extends RecyclerView.Adapter<MyRecyclerAdapter.ViewHolder> {

        private LayoutInflater inflater;

        public MyRecyclerAdapter(Context context) {
            inflater = LayoutInflater.from(context);
            mItemNum = 5;
            mItemDatas = new ArrayList<String>();
            for (int i=0; i<mItemNum; i++) {
                mItemDatas.add(i, "item" + (i+1));
            }
        }

        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View view = inflater.inflate(R.layout.recycler_item, parent, false);
            ViewHolder viewHolder = new ViewHolder(view);
            return viewHolder;
        }

        @Override
        public void onBindViewHolder(ViewHolder holder, int position) {
            holder.itemTv.setText(mItemDatas.get(position));
        }

        @Override
        public int getItemCount() {
            return mItemDatas.size();
        }

        //自定义的ViewHolder，持有每个Item的所有界面元素
        public class ViewHolder extends RecyclerView.ViewHolder {
            public CardView itemCV;
            public TextView itemTv;

            public ViewHolder(View view) {
                super(view);
                itemCV = (CardView) view.findViewById(R.id.id_card_view);
                itemTv = (TextView) view.findViewById(R.id.id_item_tv);
            }
        }
    }

可以看到MyRecyclerView类重写了三个方法：

       onCreateViewHolder() => inflater出每个item的view，返回一个包含了具体view的ViewHolder

       onBindViewHolder() => 该方法通过接收ViewHolder和position这两个参数来确定是RecyclerView中的哪个item，然后将data与ViewHolder进行绑定，此时的ViewHolder已经是一个具有View和data的完整对象了

       getItemCount() => 顾名思义，获取item的数目

5.在onCreate()方法中加入RecyclerView部分的代码，如下：

        mRecyclerView = (RecyclerView) findViewById(R.id.id_recycler_view);
        //设置固定大小
        mRecyclerView.setHasFixedSize(true);
        //创建线性布局
        mRecyclerLayoutManager = new LinearLayoutManager(this);
        //垂直方向
        mRecyclerLayoutManager.setOrientation(OrientationHelper.VERTICAL);
        //给RecyclerView设置布局管理器
        mRecyclerView.setLayoutManager(mRecyclerLayoutManager);
        //创建适配器
        mAdapter = new MyRecyclerAdapter(this);
        mRecyclerView.setAdapter(mAdapter);

RecyclerView的使用主要分为三步：获取实例 -> 设置LayoutManager -> 添加适配器

/**----------到了这里RecyclerView的使用其实已经完成了，接下来的代码主要是为了增加对下拉刷新的支持！---------*/

6.在onCreate()方法中加入SwipeRefreshLayout的设置监听代码：

        swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.id_swipe_refresh);
        swipeRefreshLayout.setColorSchemeResources(R.color.colorPrimary);
        swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                new Thread(new Runnable() {
                    @Override
                    public void run() {
                        mItemDatas.add(mItemNum, "item" + (mItemNum+1));
                        mItemNum++;

                        try {
                            Thread.sleep(1000);
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                        mHandler.sendEmptyMessage(0);
                    }
                }).start();
            }
        });

7.添加handler处理部分代码：

    private Handler mHandler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            swipeRefreshLayout.setRefreshing(false);
            mAdapter.notifyDataSetChanged();
        }
    };

SwipeRefreshLayout下主要有5个方法：

       setOnRefreshListener() => 设置手势滑动监听器

       setProgressBackgroundColor() => 设置进度圈的背景颜色

       setColorSchemeResources() => 设置进度动画的颜色

       setRefreshing() => 设置组件是否在刷新，一般在刷新完成后设置为false

       setSize() => 设置进度圈的大小，只有两个值：DEFAULT、LARGE

源码地址：http://download.csdn.net/detail/chenhao0428/9567747

想全面完整地学习Material Design可以参考这里：http://www.mobileui.cn/material-design/