Android RecyclerView与CardView完全指南：实例教程详解
Android Lollipop 中引入了 Android RecyclerView 和 Android CardView，搭配 Material Design 使用。对于那些不熟悉 Material Design 的人来说，它是自 Android 5.0 开始引入的一套全面的 UI 小部件指南，它提升了应用程序的视觉吸引力。
Android RecyclerView
Android RecyclerView是ListView的一个更高级、更强大和更灵活的版本。Android RecyclerView与ListView类似，不同之处在于它强制我们使用RecyclerView.ViewHolder类来持有元素，而在ListView中并不强制。正如名称所示，Android RecyclerView用于在上下滚动时通过回收列表中的项目来重复使用单元格。RecyclerView的另一个改进是它允许我们在运行时动态设置布局管理器，而ListView只能以垂直滚动列表的方式进行。RecyclerView允许我们在运行时设置以下类型的布局。
- LinearLayoutManager：支持垂直和水平列表
- StaggeredLayoutManager：支持交错列表
- GridLayoutManager：支持显示网格，类似于之前的GalleryView
Android RecyclerView类
- RecyclerView.ItemAnimator类：与ListView不同，它为视图动画提供了更好的支持
- RecyclerView.ItemDecorator类：在添加边框和分隔线时提供了更好的支持，从而给我们带来了巨大的控制权
因此与ListView相比，RecyclerView更具可自定义性，为用户提供了更大的控制权。RecyclerView在支持库中提供。因此，我们需要修改gradle脚本以添加以下依赖项。
dependencies {
compile 'com.android.support:recyclerview-v7:21.0.0-rc1'
}
Android CardView
Android CardView UI 组件可以展示卡片内的信息。通常用于展示联系人的信息。由于该组件是另一个支持库中的，所以我们还需添加其依赖。
dependencies {
compile 'com.android.support:cardview-v7:21.0.0-rc1'
compile 'com.android.support:recyclerview-v7:21.0.0-rc1'
}
Android CardView小部件允许我们控制背景颜色、阴影、圆角半径、高度等等。为了在XML中使用自定义属性，我们需要将以下命名空间声明添加到父布局中。以下是来自我们项目的命名空间声明及其一些属性。
<android.support.v7.widget.CardView
android:id="@+id/card_view"
xmlns:card_view="https://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="@color/grey_300"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="5dp"
card_view:cardUseCompatPadding="true">
以上所使用的重要属性是：
- card_view:cardCornerRadius：用于在我们的布局中设置圆角半径
- card_view:cardBackgroundColor：用于设置视图的背景颜色
在我们的示例项目中，我们将添加一个RecyclerView来显示包含Android版本名称和编号以及示例logo的CardView列表。点击CardView时，会将该卡从列表中移除。我们在ActionBar中添加了一个菜单选项，以便按序添加回被移除的卡片。注意：logo图片是随机从Google获取的，因此大小可能会有所不同。
Android RecyclerView和CardView示例
该项目由 MainActivity 组成，该 MainActivity 显示 RecyclerView。CardView 从 CustomAdapter 类添加到 RecyclerView 中。DataModel 通过 getter 方法用于获取每个 CardView 的数据。MyData 类保存了 textviews 和 drawables 数组以及它们的 id。
Android RecyclerView和CardView示例代码
activity_main.xml 文件中包含了一个 RecyclerView，它位于一个 RelativeLayout 中，如下所示。activity_main.xml 代码：
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity"
android:background="@color/grey_300"
>
<android.support.v7.widget.RecyclerView
android:id="@+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
/>
</RelativeLayout>
以下是Android的CardView布局定义代码: cards_layout.xml
Android的RecyclerView和CardView示例教程 – 第2部分（共4部分）
下面是一个嵌套的线性布局中的Android CardView，它包含一个ImageView和两个TextView。menu_main.xml文件包含一个用于添加被删除卡片的菜单项。menu_main.xml代码如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:tag="卡片主容器">
<android.support.v7.widget.CardView
android:id="@+id/card_view"
xmlns:card_view="https://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="@color/color_white"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="5dp"
card_view:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<ImageView
android:id="@+id/imageView"
android:tag="图片标签"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:src="@drawable/ic_launcher"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:layout_weight="2"
android:orientation="vertical"
>
<TextView
android:id="@+id/textViewName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:text="Android名称"
android:textAppearance="?android:attr/textAppearanceLarge"/>
<TextView
android:id="@+id/textViewVersion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:text="Android版本"
android:textAppearance="?android:attr/textAppearanceMedium"/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
以下是菜单布局文件menu_main.xml的代码：
<menu xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools"
tools:context=".MainActivity">
<item android:id="@+id/add_item"
android:title="添加"
android:orderInCategory="100"
app:showAsAction="always"/>
</menu>
接下来是MainActivity.java类的定义：
package com.Olivia.recyclerviewcardview;
import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
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.widget.TextView;
import android.widget.Toast;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private static RecyclerView.Adapter adapter;
private RecyclerView.LayoutManager layoutManager;
private static RecyclerView recyclerView;
private static ArrayList<DataModel> data;
static View.OnClickListener myOnClickListener;
private static ArrayList<Integer> removedItems;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myOnClickListener = new MyOnClickListener(this);
recyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
recyclerView.setHasFixedSize(true);
layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setItemAnimator(new DefaultItemAnimator());
data = new ArrayList<DataModel>();
for (int i = 0; i < MyData.nameArray.length; i++) {
data.add(new DataModel(
MyData.nameArray[i],
MyData.versionArray[i],
MyData.id_[i],
MyData.drawableArray[i]
));
}
removedItems = new ArrayList<Integer>();
adapter = new CustomAdapter(data);
recyclerView.setAdapter(adapter);
}
private static class MyOnClickListener implements View.OnClickListener {
private final Context context;
private MyOnClickListener(Context context) {
this.context = context;
}
@Override
public void onClick(View v) {
removeItem(v);
}
private void removeItem(View v) {
int selectedItemPosition = recyclerView.getChildPosition(v);
RecyclerView.ViewHolder viewHolder
= recyclerView.findViewHolderForPosition(selectedItemPosition);
TextView textViewName
= (TextView) viewHolder.itemView.findViewById(R.id.textViewName);
String selectedName = (String) textViewName.getText();
int selectedItemId = -1;
for (int i = 0; i < MyData.nameArray.length; i++) {
if (selectedName.equals(MyData.nameArray[i])) {
selectedItemId = MyData.id_[i];
}
}
removedItems.add(selectedItemId);
data.remove(selectedItemPosition);
adapter.notifyItemRemoved(selectedItemPosition);
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
super.onCreateOptionsMenu(menu);
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
super.onOptionsItemSelected(item);
if (item.getItemId() == R.id.add_item) {
//check if any items to add
if (removedItems.size() != 0) {
addRemovedItemToList();
} else {
Toast.makeText(this, "Nothing to add", Toast.LENGTH_SHORT).show();
}
}
return true;
}
private void addRemovedItemToList() {
int addItemAtListPosition = 3;
data.add(addItemAtListPosition, new DataModel(
MyData.nameArray[removedItems.get(0)],
MyData.versionArray[removedItems.get(0)],
MyData.id_[removedItems.get(0)],
MyData.drawableArray[removedItems.get(0)]
));
adapter.notifyItemInserted(addItemAtListPosition);
removedItems.remove(0);
}
}
点击CardView后，监听方法调用removeItems()方法来删除点击的CardView。它的相应id存储在一个数组中以便后续检索。为了在稍后添加视图，我们实现了另一个名为addRemovedItemToList()的方法。在这个方法中，我们将该视图添加到列表的预定义位置，并从removedItems数组中移除其id。无论哪种情况，都会通知CustomAdapter。CustomeAdapter.java类定义如下：
这是文章《Android 的 RecyclerView 和 CardView 示例教程》的第4部分（共4部分）。
package com.Olivia.recyclerviewcardview;
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;
public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.MyViewHolder> {
private ArrayList<DataModel> dataSet;
public static class MyViewHolder extends RecyclerView.ViewHolder {
TextView textViewName;
TextView textViewVersion;
ImageView imageViewIcon;
public MyViewHolder(View itemView) {
super(itemView);
this.textViewName = (TextView) itemView.findViewById(R.id.textViewName);
this.textViewVersion = (TextView) itemView.findViewById(R.id.textViewVersion);
this.imageViewIcon = (ImageView) itemView.findViewById(R.id.imageView);
}
}
public CustomAdapter(ArrayList<DataModel> data) {
this.dataSet = data;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent,
int viewType) {
View view = LayoutInflater.from(parent.getContext())
.inflate(R.layout.cards_layout, parent, false);
view.setOnClickListener(MainActivity.myOnClickListener);
MyViewHolder myViewHolder = new MyViewHolder(view);
return myViewHolder;
}
@Override
public void onBindViewHolder(final MyViewHolder holder, final int listPosition) {
TextView textViewName = holder.textViewName;
TextView textViewVersion = holder.textViewVersion;
ImageView imageView = holder.imageViewIcon;
textViewName.setText(dataSet.get(listPosition).getName());
textViewVersion.setText(dataSet.get(listPosition).getVersion());
imageView.setImageResource(dataSet.get(listPosition).getImage());
}
@Override
public int getItemCount() {
return dataSet.size();
}
}
在上面的代码中，我们通过扩展RecyclerView.ViewHolder实现了自定义的ViewHolder。视图是从layouts目录中我们在cards_layout.xml文件中定义的布局进行加载的。在下面的代码片段中，我们将MainActivity中的onClickListener附加到此视图上。
view.setOnClickListener(MainActivity.myOnClickListener);
一个ArrayList用于以DataModel类对象的形式存储所有数据，并将它们添加到列表中的相应卡片中。下面给出了DataModel.java和MyData.java类，它们包含了该应用程序的特定数据。
package com.Olivia.recyclerviewcardview;
public class DataModel {
String name;
String version;
int id_;
int image;
public DataModel(String name, String version, int id_, int image) {
this.name = name;
this.version = version;
this.id_ = id_;
this.image=image;
}
public String getName() {
return name;
}
public String getVersion() {
return version;
}
public int getImage() {
return image;
}
public int getId() {
return id_;
}
}
package com.Olivia.recyclerviewcardview;
public class MyData {
static String[] nameArray = {"Cupcake", "Donut", "Eclair", "Froyo", "Gingerbread", "Honeycomb", "Ice Cream Sandwich","JellyBean", "Kitkat", "Lollipop", "Marshmallow"};
static String[] versionArray = {"1.5", "1.6", "2.0-2.1", "2.2-2.2.3", "2.3-2.3.7", "3.0-3.2.6", "4.0-4.0.4", "4.1-4.3.1", "4.4-4.4.4", "5.0-5.1.1","6.0-6.0.1"};
static Integer[] drawableArray = {R.drawable.cupcake, R.drawable.donut, R.drawable.eclair,
R.drawable.froyo, R.drawable.gingerbread, R.drawable.honeycomb, R.drawable.ics,
R.drawable.jellybean, R.drawable.kitkat, R.drawable.lollipop,R.drawable.marsh};
static Integer[] id_ = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10};
}
以下是我们的Android RecyclerView和CardView示例应用程序生成的输出效果。正如您所见，被删除的项目总是被添加到第三个索引位置（即列表中的第四个位置）。至此，关于Android RecyclerView和CardView的教程已经结束。您可以通过以下链接下载Android RecyclerView CardView示例项目。
下载Android RecyclerView CardView示例项目
