Android学习笔记：界面设计Material Design的基本使用方法（二）

接上一篇文章，地址：Android学习笔记：界面设计Material Design的基本使用方法（一）
本文使用到的图片资源地址：https://pan.baidu.com/s/1c2PpZ0k

四、卡片式布局

1、使用CardView实现卡片式布局
CardView由appcompat-v7库提供，它也是一个FrameLayout，只是额外的提供了圆角和阴影等效果。
CardView的使用方法：<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="5dp"
app:cardCornerRadius="4dp">

<TextView
android:id="@+id/fruit_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</android.support.v7.widget.CardView>代码含义很好理解，其中：app:elevation="5dp" //指定卡片高度
app:cardCornerRadius="4dp" //指定卡片圆角弧度这样这个TextView就显示在一个卡片中了。
下面开始使用CardView布局。项目目标：使用RecyclerView填充主界面，实现水果图片的列表展现。
使用准备：
①、准备好水果图片资源（可以在我给的图片资源中找到）。放入drawable下。
②、添加库依赖。
因为会使用到CardView、RecyclerView和Glide库来实现，所以在（preject模式）app/build.gradle中添加三个依赖。dependencies {

...

compile 'com.android.support:recyclerview-v7:25.3.1'
compile 'com.android.support:cardview-v7:25.3.1'
compile 'com.github.bumptech.glide:glide:3.7.0'
}然后点击 Sync Now进行同步。Glide库是一个超级强大的加载图片的开源项目。
Glide开源项目地址：https://github.com/bumptech/glide
准备完成后开始具体实现：
（1）、修改activity_main.xml的代码，使RecyclerView填充整个主界面。
在Toolbar和FloatingActionButton标签的中间加入以下代码：<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />（2）使用RecyclerView
①、创建Fruit实体类，包括水果名、资源ID和getter方法。package com.my.materialdesigntest;

public class Fruit {

private String name; //水果名

private int imageId; //资源ID

public Fruit(String name, int imageId) {
this.name = name;
this.imageId = imageId;
}

public String getName() {
return name;
}

public int getImageId() {
return imageId;
}

}②、为RecyclerView子项自定义布局
在layout目录下新建fruit_item.xml文件。修改为以下代码：<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
app:cardCornerRadius="4dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<ImageView
android:id="@+id/fruit_image"
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="centerCrop" />

<TextView
android:id="@+id/fruit_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="5dp"
android:textSize="16sp" />

</LinearLayout>

</android.support.v7.widget.CardView>最外层使用Car
feea
dView布局，代码很好理解，值得注意的是：android:scaleType="centerCrop"，这条语句的含义是：指定图片的缩放模式，若水果图片的长宽比例不同，为了能让图片能填充整个ImageView，使用centerVrop模式，可以使图片保持原有比例填充ImageView，并将多余部分裁剪掉。
③、为RecyclerView自定义适配器
新建FruitAdapter类，继承RecyclerView.Adapter，并指定泛型为FruitAdapter.ViewHolder，代码如下：package com.my.materialdesigntest;

import android.content.Context;
import android.support.v7.widget.CardView;
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 com.bumptech.glide.Glide;

import java.util.List;

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

private Context mContext; //上下文
private List<Fruit> mFruitList; //装载水果信息的列表

//构造函数，传入数据源
public FruitAdapter(List<Fruit> mFruitList) {
this.mFruitList = mFruitList;
}

static class ViewHolder extends RecyclerView.ViewHolder {
private CardView cardView; //RecyclerView子项的最外层布局
private ImageView fruitImage;
private TextView fruitName;

public ViewHolder(View view) {
super(view);
cardView = (CardView) view; //RecyclerView子项最外层布局
fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
fruitName = (TextView) view.findViewById(R.id.fruit_name);
}
}

//必须重写的第一个方法：创建ViewHolder方法
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (mContext == null) {
mContext = parent.getContext();
}
//加载子项布局
View view = LayoutInflater.from(mContext).inflate(R.layout.fruit_item, parent, false);
//创建ViewHolder实例
final ViewHolder holder = new ViewHolder(view);
return holder;
}

//必须重写的第二个方法：对子项数据赋值
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
//获取当前项的水果实例
Fruit fruit = mFruitList.get(position);
//赋值
holder.fruitName.setText(fruit.getName());
//根据资源ID获取水果图片资源并填充ImageView
Glide.with(mContext).load(fruit.getImageId()).into(holder.fruitImage);
}

//必须重写的第三个方法：获取所有子项的个数
@Override
public int getItemCount() {
return mFruitList.size();
}

}按照注释很容易理解。
（3）、修改MainActivity中的代码：public class MainActivity extends AppCompatActivity {

private DrawerLayout mDrawerLayout; //DrawerLayout布局，用于实现滑动菜单

//将水果信息装填到水果数组中
private Fruit[] fruits = {new Fruit("Apple", R.drawable.apple), new Fruit("Banana", R.drawable.banana),
new Fruit("Orange", R.drawable.orange), new Fruit("Watermelon", R.drawable.watermelon),
new Fruit("Pear", R.drawable.pear), new Fruit("Grape", R.drawable.grape),
new Fruit("Pineapple", R.drawable.pineapple), new Fruit("Strawberry", R.drawable.strawberry),
new Fruit("Cherry", R.drawable.cherry), new Fruit("Mango", R.drawable.mango)};

//装载水果的链表
//为什么有了数组还要定义List：因为我们要显示的水果数据个数不确定，使用多少个就往List中装多少水果数据
//水果数组只是装填水果信息的模具，具体使用数据还是使用List
private List<Fruit> fruitList = new ArrayList<>();

private FruitAdapter adapter; //适配器

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

...

initFruits(); //初始化水果数据
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
//使用GridLayoutManger布局，设置每行显示2列数据
GridLayoutManager layoutManager = new GridLayoutManager(this, 2);
recyclerView.setLayoutManager(layoutManager);
//创建适配器
adapter = new FruitAdapter(fruitList);
//绑定RecyclerView
recyclerView.setAdapter(adapter);

}

//初始化水果数据
private void initFruits() {
//清空水果列表的数据
fruitList.clear();
//向List中装填50个水果数据
for (int i = 0; i < 50; i++) {
Random random = new Random();
//从水果数组中随机一个不超过水果数组长度的整数
int index = random.nextInt(fruits.length);
//将随机出来的水果数据装到水果List中
fruitList.add(fruits[index]);
}
}

...

}运行程序：



效果很不错，但是Toolbar被盖住了。
原因：我们使用的最外层布局是CoordinatorLayout，他是一个加强版的FrameLayout，FrameLayout在其控件不指定位置时，都默认放在左上角。RecyclerView和Toolbar都是放在该布局中，没有指定位置。自然就产生了这种现象。
解决：解决方法可以是采用传统方法，把RecyclerView向下偏移一个Toolbar的高度。CoordinatorLayout布局不是普通的FrameLayout，它有更巧妙的解决方法。
2、使用AppBarLayout
APPBarLayout由Design Support库提供。它实际上是一个垂直方向的LinearLayout，并且在内部做了很多滚动事件的封装，应用了一些Material Design的设计理念。
使用AppBarLayout解决上面出现的问题只需要两步：
①、把Toolbar嵌套到AppBarLayout中。
②、为RecyclerView指定一个布局行为。
修改activity_main.xml的代码：<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

</android.support.design.widget.AppBarLayout>

<android.support.v7.widget.RecyclerView

...

app:layout_behavior="@string/appbar_scrolling_view_behavior" />

...

</android.support.design.widget.CoordinatorLayout>

...

</android.support.v4.widget.DrawerLayout>只需要几行代码就可以完成。为RecyclerView添加的布局行为是：app:layout_behavior="@string/appbar_scrolling_view_behavior"它可以把滚动事件发送给它外层的AppBarLayout布局。
运行程序：



已经可以解决Toolbar被遮盖的问题了。
当RecyclerView滚动时，会将滚动事件通知给AppBarLayout，上述代码中并没有进行处理。
当AppBarLayout收到滚动事件时，它内部的子控件可以指定如何去相应这些事件。
修改activity_main.xml代码，在Toolbar代码块后面加上一条语句即可：<android.support.v7.widget.Toolbar

...

app:layout_scrollFlags="scroll|enterAlways|snap" />它的作用是指定Toolbar响应RecyclerView滚动事件的方法。其中：
scroll：当RecyclerView向上滚动时，Toolbar会跟着一起向上滚动并实现隐藏。
enterAlways：当RecyclerView向下滚动时，Toolbar会跟着一起向下滚动并重新显示。
snap：当Toolbar还没有完全隐藏或显示的时候，Toolbar会根据当前滚动的距离，自动选择隐藏还是显示。
运行结果：

五、使用SwipeRefreshLayout实现下拉刷新

SwipeRefreshLayout由Support-v4库提供，使用时，把需要实现下拉刷新的控件放到SwipeRefreshLayout中就可以了，本文所述就是将RecyclerView放到SwipeRefreshLayout中。
修改activity_main.xml文件：<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipe_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

</android.support.v4.widget.SwipeRefreshLayout>刚刚为了解决Toolbar被覆盖的问题，为Toolbar嵌套了一层AppBarLayout，并为RecyclerView添加了一个布局行为，这个滚动行为会把滚动事件发送给它的外层AppBarLayout。现在需要把它挪到SwipRefreshLayout中，否则滚动事件发送不到AppBarLayout。若它的位置不动，则Toolbar还是会被遮盖。只需要记住它是追随AppBarLayout的就可以了。
修改MainActivity的代码：public class MainActivity extends AppCompatActivity {

...

private SwipeRefreshLayout swipeRefreshLayout; //下拉刷新布局，用于实现下拉刷新

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

...

swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh);
//设置下拉刷新时的进度条颜色
swipeRefreshLayout.setColorSchemeResources(R.color.colorPrimary);
//触发下拉刷新的事件
swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
//刷新水果图片
refreshFruits();
}
});

}

//刷新显示的水果图片
private void refreshFruits() {
//刷新操作一般是从网络上获取数据，需要开启线程，这里采用的是本地刷新
new Thread(new Runnable() {
@Override
public void run() {
try {
//使线程睡眠2s，因为本地刷新速度太快，不设置睡眠容易看不到刷新进度条
Thread.sleep(2000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//从主线程更新UI
runOnUiThread(new Runnable() {
@Override
public void run() {
//再次初始化水果数据，因为每次初始化的水果数据都是不同的
initFruits();
//通知FruitAdapter的适配器，数据发生了变化
adapter.notifyDataSetChanged();
//表示刷新事件结束，隐藏刷新进度条，若无此语句，进度条一直存在。
swipeRefreshLayout.setRefreshing(false);
}
});
}
}).start(); //不要忘记启动线程
}

...

}运行程序：

六、使用CollapsingToolbarLayout实现可折叠式标题栏

看到CollapsingToolbarLayout这个名字就能够想到，它是一个和Toolbar相关的布局。它由Design Support库提供，作用于Toolbar之上，它可以让Toolbar的效果更加丰富，实现非常华丽的效果。
注意：CollapsingToolbarLayout并不是独立存在的，它被限定只能作为AppBarLayout的直接子布局，而AppBarLayout又必须是CoordinatorLayout的子布局。
需求：用一个额外的活动来展示水果详情页面，实现标题栏可折叠，内容包括标题栏、水果图片、水果内容详情和悬浮按钮。
新建一个Empty活动，指定活动名为FruitActivity，指定布局名为activity_fruit.xml。
活动布局主要分为两部分，一个是水果标题栏，一个是水果内容详情。分步骤来实现：

1、实现标题栏部分
（1）、使用CoordinatorLayout作为最外层布局<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

</android.support.design.widget.CoordinatorLayout>（2）、在CoordinatorLayout中嵌套一个AppBarLayout布局<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp">

</android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>定义了AppBarLayout的高度为250dp，这个高度是一会标题栏展开后图片的显示高度。
（3）、在AppBarLayout中嵌套一个CollapsingToolbarLayout布局<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp">

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">

</android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>CollapsingToolbarLayout布局中：
theme属性：用于设置主题，在MainActivity的Toolbar就是这个主题，现在把这个主题提到上一级来。app:contentScrim属性：用于指定CoordinatorLayout在趋于折叠以及折叠之后的背景色，CoordinatorLayout折叠之后就是一个普通的Toolbar，所以指定颜色为colorPrimary。
app:layout_scrollflags属性：
scroll表示CollapsingToolbarLayout会随着水果内容详情的滚动一起滚动。
exitUntilCollapsed表示当CollapsingToolbarLayout随滚动完成折叠后就保留在界面上，不再移出屏幕。
（4）、在CollapsingToolbarLayout中定义具体内容                                                     <android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">

<ImageView
android:id="@+id/fruit_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />

</android.support.design.widget.CollapsingToolbarLayout>app:layout_collapseMode属性：用于指定当前控件在CollapsingToolbarLayout折叠过程中的折叠模式。
Toolbar被指定成pin：表示折叠的过程中，Toolbar的位置始终保持不变。
ImageView被指定成parallax：表示会在折叠的过程中产生一定的错位偏移，即产生一定的视觉效果。
2、实现水果内容详情部分
（1）、在最外层使用NestedScrollView布局。
NestedScrollView由Support-v4库提供。像ScrollView一样，它支持使用滚动的方式来查看屏幕以外的数据，而NestedScrollView在此基础上还增加了嵌套相应滚动事件的功能。由于CoordinatorLayout本身已经可以响应滚动事件了，所以在它的内部就需要使用NestedScrollView或RecyclerView这样的布局。
NestedScrollView与AppBarLayout是平级的。在AppBarLayout下使用NestedScrollView标签：<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp">

...

</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

</android.support.design.widget.CoordinatorLayout>
通过app:behavior属性指定了一个布局行为，和之前在RecyclerView中的用法一样，不会遮盖到标题栏。
注：不论是ScrollView还是NestedScrollView，它们的内部都只允许存在一个直接子布局，所以，想要在里面放很多东西的话通常会先嵌套一个LinearLayout布局，在LinearLayout布局中放入具体内容。
（2）、设置NestedScrollView里的具体内容<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="35dp"
app:cardCornerRadius="4dp">

<TextView
android:id="@+id/fruit_content_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp" />

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

</LinearLayout> 3、加入悬浮按钮<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

...

<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

...

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

<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@drawable/ic_comment"
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|end" />

</android.support.design.widget.CoordinatorLayout> 通过app:layout_anchor属性为悬浮按钮设置了一个锚点，并将它的位置设置为右下角。这样悬浮按钮就会出现在展开后的标题栏中，且跟随着标题栏移动。
4、布局编写完毕，开始编写逻辑功能。
修改FruitActivity中的代码：package com.my.materialdesigntest;

import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.widget.ImageView;
import android.widget.TextView;

import com.bumptech.glide.Glide;

public class FruitActivity extends AppCompatActivity {

//水果名字段
public static final String FRUIT_NAME = "fruit_name";

//水果图片资源ID字段
public static final String FRUIT_IMAGE_ID = "fruit_image_id";

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fruit);

//获取启动本活动时传递过来的数据，没有数据就无法知道用户想要查看的水果数据是什么
Intent intent = getIntent();
//取出数据
String fruitName = intent.getStringExtra(FRUIT_NAME);
int fruitImageId = intent.getIntExtra(FRUIT_IMAGE_ID, 0);

//关联控件
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
ImageView fruitImageView = (ImageView) findViewById(R.id.fruit_image_view);
TextView fruitContentText = (TextView) findViewById(R.id.fruit_content_text);

//使用Toolbar
setSupportActionBar(toolbar);

//获取ActionBar实例，具体由Toolbar实现
ActionBar actionBar = getSupportActionBar();

//此时显示返回按钮
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true);
}

//设置标题
collapsingToolbar.setTitle(fruitName);

//加载图片
Glide.with(this).load(fruitImageId).into(fruitImageView);

//通过generateFruitContent方法获取一段水果内容信息
String fruitContent = generateFruitContent(fruitName);

//将获取到的信息设置到控件上
fruitContentText.setText(fruitContent);
}

//通过水果名获取一段水果信息
private String generateFruitContent(String fruitName) {

//字符串缓冲区
StringBuilder fruitContent = new StringBuilder();

//将水果名拼接500次
for (int i = 0; i < 500; i++) {
fruitContent.append(fruitName);
}
return fruitContent.toString();
}

//重写的标题栏返回按钮的点击事件，结束活动。即返回主活动
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
finish();
return true;
}
return super.onOptionsItemSelected(item);
}
}5、设置RecyclerView的点击事件。
不设置点击事件，自然没有办法进入到FruitActivity中。修改FruitAdapter的代码：public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {

...

//必须重写的第一个方法：创建ViewHolder方法
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

...

final ViewHolder holder = new ViewHolder(view);

//设置CardView的点击事件
holder.cardView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

//获取点击项的位置
int position = holder.getAdapterPosition();
//获取水果实例
Fruit fruit = mFruitList.get(position);

//启动FruitActivity，放入水果的名称、资源ID信息
Intent intent = new Intent(mContext, FruitActivity.class);
intent.putExtra(FruitActivity.FRUIT_NAME, fruit.getName());
intent.putExtra(FruitActivity.FRUIT_IMAGE_ID, fruit.getImageId());
mContext.startActivity(intent);
}
});

return holder;
}

...

}运行程序：



篇幅太长了，最后的部分转到下一篇。地址：Android学习笔记：界面设计Material Design的基本使用方法（三）
相关文章：Android学习笔记：界面设计Material Design的基本使用方法（一）

本文总结参考自郭神（郭霖）的《第一行代码 第2版》