Android RecyclerView和CardView的结合使用

前言

RecyclerView和CardView虽然是Android L才引进的，但我们也可以利用Google提供的库来实现它。
这篇文章详细说明如何利用Eclipse导入相应的包，以及提供demo来说明这两个组件的使用。

导入

1. 导入项目

在Eclipse中选择Import，然后选择Existing Android Code Into Workspace，路径为yourSdkPath/extras\android\support\v7\cardview（RecyclerView类似），如果找不到的话就得先去SDK Manager中下载最新的Support Library，如图：

温馨提示：有时候下载完后会找不到对应的两个包，把库删掉重新下载一次应该就能看见了。

2. 将项目设置为库

对两个项目进行同样的操作：右键选择Properties->Android，将Is Library勾选上
温馨提示：RecyclerView导入后项目名称为TestActivity，建议大家对两个项目进行重命名

新建项目

新建一个Android项目，然后右键选择Properties->Android->Add,如图：

温馨提示：如果前面没有将项目设置为库的话这里是找不到项目的！

好了，到了这里，我们就可以开始coding了。

代码

主布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

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

</RelativeLayout>

cardView的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res/com.example.listtext"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    card_view:cardCornerRadius="4dp"
    app:cardBackgroundColor="#FFE4E1"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/id"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginBottom="5dp"
            android:layout_weight="1"
            android:textSize="24sp" />

        <TextView
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginBottom="5dp"
            android:layout_weight="1"
            android:textSize="24sp" />

        <TextView
            android:id="@+id/age"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginBottom="5dp"
            android:layout_weight="1"
            android:textSize="24sp" />
    </LinearLayout>

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

温馨提示：RecyclerView和CardView前面都要加上对应的包名。

和ListView类似，RecyclerView的使用也需要用到适配器，适配器也是这个Demo的核心了，所以我自己定义了一个适配器。（以前不喜欢自己写适配器，因为觉得麻烦，但掌握了之后反而觉得更加的方便）

package com.example.listtext;

import java.util.List;

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

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

    private List<Student> students;

    public StudentAdapter(List<Student> students) {
        super();
        this.students = students;
    }

    // 重写的自定义ViewHolder  
    public static class ViewHolder extends RecyclerView.ViewHolder {  
        public TextView name;  
        public TextView id;  
        public TextView age;  


        public ViewHolder( View v ) {  
            super(v);  
            name = (TextView) v.findViewById(R.id.name);  
            id = (TextView) v.findViewById(R.id.id);  
            age = (TextView) v.findViewById(R.id.age);  
        }  
    }

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

    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int position) {
        Student student = students.get(position);
        viewHolder.id.setText(student.getId()+"");
        viewHolder.name.setText(student.getName());
        viewHolder.age.setText(student.getAge()+"");

    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int arg1) {
        // 给ViewHolder设置布局文件  
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_card, viewGroup, false);  
        return new ViewHolder(v);  
    } 

}

再看最后的Activity：

package com.example.listtext;

import java.util.ArrayList;
import java.util.List;

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

public class MainActivity extends Activity {

    private List<Student> students;
    private StudentAdapter adapter;

    private RecyclerView mRecyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        students = new ArrayList<Student>();
        students.add(new Student(100L, "Cindy", 20));
        students.add(new Student(101L, "Lisa", 21));
        students.add(new Student(102L, "Lili", 22));
        students.add(new Student(103L, "Jack", 23));
        students.add(new Student(104L, "Jim", 24));
        students.add(new Student(105L, "Tom", 25));
        students.add(new Student(106L, "Mike", 26));

        adapter = new StudentAdapter(students);

        mRecyclerView = (RecyclerView) findViewById(R.id.reclcler_view);

        // 设置LinearLayoutManager  
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));  
        // 设置ItemAnimator  
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());  
        // 设置固定大小  
        mRecyclerView.setHasFixedSize(true);  
        // 初始化自定义的适配器  
        // 为mRecyclerView设置适配器  
        mRecyclerView.setAdapter(adapter);
    }
}

代码中用到的Student类只是封装了一些数据而已，这里就不给出来了。

效果图

第一次用Markdown写博客，排版可能不太好，大家多多包涵哈