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>

最外层使用CardView布局，代码很好理解，值得注意的是：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);
        }
    }

    //必