《第一行代碼：Android篇》學習筆記（十二）

這裡一共定義了5個item，分別使用android:id屬性指定菜單項的id, android:icon屬性指定菜單項的圖標，android:title屬性指定菜單項顯示的文字。就是這麼簡單，現在我們已經把menu準備好了。

接下來，應該準備headerLayout了，這是一個可以隨意定製的佈局，不過我並不想將它做得太複雜。這裡簡單起見，我們就在headerLayout中放置頭像、用戶名、郵箱地址這3項內容吧。

說到頭像，還需要再準備一張圖片，並把它放在了drawable-xxhdpi目錄下。另外這張圖片最好是一張正方形圖片，因為待會我們會把它圓形化。然後右擊layout文件夾→New→Layout resourcefile，創建一個nav_header.xml文件。修改其中的代碼，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:padding="10dp"
    android:background="?attr/colorPrimary">
    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:id="@+id/icon_image"
        android:src="@drawable/nav_icon"
        android:layout_centerInParent="true"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/mail"
        android:layout_alignParentBottom="true"
        android:text="[email protected]"
        android:textColor="#FFF"
        android:textSize="14sp"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/username"
        android:layout_above="@id/mail"
        android:text="Zhou zhou"
        android:textColor="#FFF"
        android:textSize="14sp"/>
</RelativeLayout>

佈局文件的最外層是一個RelativeLayout，將它的寬度設為match_parent，高度設為180dp，這是一個NavigationView比較適合的高度，然後指定它的背景色為colorPrimary。

在RelativeLayout中我們放置了3個控制項，CircleImageView是一個用於將圖片圓形化的控制項，它的用法基本和ImageView是完全一樣的，這裡給它指定了一張圖片作為頭像，然後設置為居中顯示。另外兩個TextView分別用於顯示用戶名和郵箱地址，它們都用到了一些RelativeLayout的定位屬性。

現在menu和headerLayout都準備好了，我們終於可以使用NavigationView了。修改activity_main.xml中的代碼，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <androidx.appcompat.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"
            android:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    </FrameLayout>
    <com.google.android.material.navigation.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/nav_view"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"/>
</androidx.drawerlayout.widget.DrawerLayout>

將之前的TextView換成了NavigationView，這樣滑動菜單中顯示的內容也就變成NavigationView了。這裡又通過app:menu和app:headerLayout屬性將我們剛纔準備好的menu和headerLayout設置了進去，這樣NavigationView就定義完成了。

NavigationView雖然定義完成了，但是我們還要去處理菜單項的點擊事件才行。修改MainActivity中的代碼，如下所示：

package com.zhouzhou.materialtest;

import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

import com.google.android.material.navigation.NavigationView;

public class MainActivity extends AppCompatActivity {
    private DrawerLayout mDrawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
        }
        navigationView.setCheckedItem(R.id.nav_call);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                mDrawerLayout.closeDrawers();
                return true;
            }
        });
    }
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.backup:
                Toast.makeText(this, "You clicked Backup", Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this, "You clicked Delete", Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this, "You clicked Settings", Toast.LENGTH_SHORT).show();
                break;
            case android.R.id.home:
                mDrawerLayout.openDrawer(GravityCompat.START);
                break;
            default:
        }
        return true;
    }
}

代碼還是比較簡單的，這裡首先獲取到了NavigationView的實例，然後調用它的setCheckedItem()方法將Call菜單項設置為預設選中。

接著調用了setNavigationItemSelectedListener()方法來設置一個菜單項選中事件的監聽器，當用戶點擊了任意菜單項時，就會回調到onNavigationItemSelected()方法中。我們可以在這個方法中寫相應的邏輯處理，不過這裡我並沒有附加任何邏輯，只是調用了DrawerLayout的closeDrawers()方法將滑動菜單關閉，這也是合情合理的做法。

現在可以重新運行一下程式了，點擊一下Toolbar左側的導航按鈕，效果如圖：

MaterialDesign的魅力就在這裡，它真的是一種非常美觀的設計理念，只要你按照它的各種規範和建議來設計界面，最終做出來的程式就是特別好看的。

12.4 懸浮按鈕和可交互提示

立面設計是Material Design中一條非常重要的設計思想，也就是說，按照Material Design的理念，應用程式的界面不僅僅只是一個平面，而應該是有立體效果的。在官方給出的示例中，最簡單且最具代表性的立面設計就是懸浮按鈕了，這種按鈕不屬於主界面平面的一部分，而是位於另外一個維度的，因此就會給人一種懸浮的感覺。

本節中我們會對這個懸浮按鈕的效果進行學習，另外還會學習一種可互動式的提示工具。關於提示工具，我們之前一直都是使用的Toast，但是Toast只能用於告知用戶某某事情已經發生了，用戶卻不能對此做出任何的響應，那麼今天我們就將在這一方面進行擴展。

12.4.1 FloatingActionButton

FloatingActionButton是Design Support庫中提供的一個控制項，這個控制項可以幫助我們比較輕鬆地實現懸浮按鈕的效果。它預設會使用colorAccent來作為按鈕的顏色，我們還可以通過給按鈕指定一個圖標來表明這個按鈕的作用是什麼。

下麵開始來具體實現。首先仍然需要提前準備好一個圖標，這裡我放置了一張ic_done.png到drawable-xxhdpi目錄下。然後修改activity_main.xml中的代碼，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <androidx.appcompat.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"
            android:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    </FrameLayout>
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/fab"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@drawable/ic_done"/>
    <com.google.android.material.navigation.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/nav_view"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"/>
</androidx.drawerlayout.widget.DrawerLayout>

在主屏幕佈局中加入了一個FloatingActionButton。

• layout_width和layout_height屬性都指定成wrap_content。

• layout_gravity屬性指定將這個控制項放置於屏幕的右下角。

  其中end的工作原理和之前的start是一樣的，即如果系統語言是從左往右的，那麼end就表示在右邊，如果系統語言是從右往左的，那麼end就表示在左邊。

• layout_margin屬性給控制項的四周留點邊距，緊貼著屏幕邊緣肯定是不好看的。

• src屬性給FloatingActionButton設置了一個圖標。

就是這麼簡單，現在我們就可以來運行一下了，效果如圖：

一個漂亮的懸浮按鈕就在屏幕的右下方出現了。

仔細觀察的話，會發現這個懸浮按鈕的下麵還有一點陰影，因為FloatingActionButton是懸浮在當前界面上的，既然是懸浮，那麼就理所應當會有投影，Design Support庫連這種細節都幫我們考慮到了。說到懸浮，其實我們還可以指定FloatingActionButton的懸浮高度，如下所示：

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/fab"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@drawable/ic_done"
        app:elevation="8dp"/>

使用app:elevation屬性來給FloatingActionButton指定一個高度值，高度值越大，投影範圍也越大，但是投影效果越淡，高度值越小，投影範圍也越小，但是投影效果越濃。當然這些效果的差異其實都不怎麼明顯，我個人感覺使用預設的FloatingActionButton效果就已經足夠了。

接下來我們看一下FloatingActionButton是如何處理點擊事件的，畢竟，一個按鈕首先要能點擊才有意義。修改MainActivity中的代碼，如下所示：

public class MainActivity extends AppCompatActivity {
    private DrawerLayout mDrawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ...
        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "FAB clicked", Toast.LENGTH_SHORT).show();
            }
        });
        ...
    }
    ...
}

如果你在期待FloatingActionButton會有什麼特殊用法的話，那可能就要讓你失望了，它和普通的Button其實沒什麼兩樣，都是調用setOnClickListener()方法來註冊一個監聽器，當點擊按鈕時，就會執行監聽器中的onClick()方法，這裡我們在onClick()方法中彈出了一個Toast。

現在重新運行一下程式，並點擊FloatingActionButton，效果如圖：

12.4.2 Snackbar

現在已經掌握了FloatingActionButton的基本用法，在上一小節處理點擊事件，仍然是使用Toast來作為提示工具的，本小節中就來學習一個Design Support庫提供的更加先進的提示工具——Snackbar。

首先要明確，Snackbar並不是Toast的替代品，它們兩者之間有著不同的應用場景。

• Toast的作用是告訴用戶現在發生了什麼事情，但同時用戶只能被動接收這個事情，因為沒有什麼辦法能讓用戶進行選擇。
• Snackbar則在這方面進行了擴展，它允許在提示當中加入一個可交互按鈕，當用戶點擊按鈕的時候可以執行一些額外的邏輯操作。

打個比方，如果我們在執行刪除操作的時候只彈出一個Toast提示，那麼用戶要是誤刪了某個重要數據的話肯定會十分抓狂吧，但是如果我們增加一個Undo按鈕，就相當於給用戶提供了一種彌補措施，從而大大降低了事故發生的概率，提升了用戶體驗。

Snackbar的用法也非常簡單，它和Toast是基本相似的，只不過可以額外增加一個按鈕的點擊事件。修改MainActivity中的代碼，如下所示：

public class MainActivity extends AppCompatActivity {
    private DrawerLayout mDrawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ...
        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //Toast.makeText(MainActivity.this, "FAB clicked", Toast.LENGTH_SHORT).show();
                Snackbar.make(view,"Data delete",Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this, "Data restored", Toast.LENGTH_SHORT).show();
                    }
                }).show();
            }
        });
    }
    ...
}

可以看到，這裡調用了Snackbar的make()方法來創建一個Snackbar對象，make()方法的第一個參數需要傳入一個View，只要是當前界面佈局的任意一個View都可以，Snackbar會使用這個View來自動查找最外層的佈局，用於展示Snackbar。第二個參數就是Snackbar中顯示的內容，第三個參數是Snackbar顯示的時長。這些和Toast都是類似的。

接著這裡又調用了一個setAction()方法來設置一個動作，從而讓Snackbar不僅僅是一個提示，而是可以和用戶進行交互的。簡單起見，我們在動作按鈕的點擊事件裡面彈出一個Toast提示。最後調用show()方法讓Snackbar顯示出來。現在重新運行一下程式，並點擊懸浮按鈕，效果如圖：

可以看到，Snackbar從屏幕底部出現了，上面有我們所設置的提示文字，還有一個Undo按鈕，按鈕是可以點擊的。過一段時間後Snackbar會自動從屏幕底部消失。不管是出現還是消失，Snackbar都是帶有動畫效果的，因此視覺體驗也會比較好。

不過，這個Snackbar竟然將我們的懸浮按鈕給遮擋住了。雖說也不是什麼重大的問題，因為Snackbar過一會兒就會自動消失，但這種用戶體驗總歸是不友好的。只需要藉助CoordinatorLayout就可以輕鬆解決。

12.4.3 CoordinatorLayout

CoordinatorLayout可以說是一個加強版的FrameLayout，這個佈局也是由Design Support庫提供的。它在普通情況下的作用和FrameLayout基本一致，不過既然是Design Support庫中提供的佈局，那麼就必然有一些Material Design的魔力了。

事實上，CoordinatorLayout可以監聽其所有子控制項的各種事件，然後自動幫助我們做出最為合理的響應。舉個簡單的例子，剛纔彈出的Snackbar提示將懸浮按鈕遮擋住了，而如果我們能讓CoordinatorLayout監聽到Snackbar的彈出事件，那麼它會自動將內部的FloatingActionButton向上偏移，從而確保不會被Snackbar遮擋到。

至於CoordinatorLayout的使用也非常簡單，只需要將原來的FrameLayout替換一下就可以了。修改activity_main.xml中的代碼，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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">
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <androidx.appcompat.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"
            android:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/fab"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@drawable/ic_done"
        app:elevation="8dp"/>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
    <com.google.android.material.navigation.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/nav_view"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"/>
</androidx.drawerlayout.widget.DrawerLayout>

由於CoordinatorLayout本身就是一個加強版的FrameLayout，因此這種替換不會有任何的副作用。現在重新運行一下程式，並點擊懸浮按鈕，效果如圖：

可以看到，懸浮按鈕自動向上偏移了Snackbar的同等高度，從而確保不會被遮擋住，當Snackbar消失的時候，懸浮按鈕會自動向下偏移回到原來位置。

另外，懸浮按鈕的向上和向下偏移也是伴隨著動畫效果的，且和Snackbar完全同步，整體效果看上去特別賞心悅目。不過我們回過頭來再思考一下，剛纔說的是CoordinatorLayout可以監聽其所有子控制項的各種事件，但是Snackbar好像並不是CoordinatorLayout的子控制項吧，為什麼它卻可以被監聽到呢？

還記得我們在Snackbar的make()方法中傳入的第一個參數嗎？這個參數就是用來指定Snackbar是基於哪個View來觸發的，剛纔我們傳入的是FloatingActionButton本身，而FloatingActionButton是CoordinatorLayout中的子控制項，因此這個事件就理所應當能被監聽到了。

你可以自己再做個試驗，如果給Snackbar的make()方法傳入一個DrawerLayout，那麼Snackbar就會再次遮擋住懸浮按鈕，因為DrawerLayout不是CoordinatorLayout的子控制項，CoordinatorLayout也就無法監聽到Snackbar的彈出和隱藏事件了。

12.5 卡片式佈局

現在界面上最主要的一塊區域還處於空白狀態。這塊區域通常都是用來放置應用的主體內容的，準備使用一些精美的水果圖片來填充這部分區域。

那麼，為了要讓水果圖片也能Material化，本節中我們將會學習如何實現卡片式佈局的效果。卡片式佈局也是Materials Design中提出的一個新的概念，它可以讓頁面中的元素看起來就像在卡片中一樣，並且還能擁有圓角和投影。

12.5.1 CardView

CardView也是一個FrameLayout，只是額外提供了圓角和陰影等效果，看上去會有立體的感覺。先來看一下CardView的基本用法吧，如下所示：

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="4dp"
        app:cardElevation="5dp">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/info_text"/>
    </androidx.cardview.widget.CardView>

這裡定義了一個CardView佈局，可以通過app:cardCornerRadius屬性指定卡片圓角的弧度，數值越大，圓角的弧度也越大。

另外，還可以通過app:cardElevation屬性指定卡片的高度，高度值越大，投影範圍也越大，但是投影效果越淡，高度值越小，投影範圍也越小，但是投影效果越濃，這一點和FloatingActionButton是一致的。

然後，我們在CardView佈局中放置了一個TextView，那麼這個TextView就會顯示在一張卡片當中了，CardView的用法就是這麼簡單。但是我們顯然不可能在如此寬闊的一塊空白區域內只放置一張卡片，為了能夠充分利用屏幕的空間，這裡使用RecyclerView來填充MaterialTest項目的主界面部分。

既然是要實現水果列表，那麼首先肯定需要準備許多張水果圖片，這裡我從網上挑選了一些精美的水果圖片，將它們複製到了項目當中。然後由於我們還需要用到RecyclerView、CardView這幾個控制項，因此必須在app/build.gradle文件中聲明這些庫的依賴才行：

dependencies {
    implementation 'androidx.recyclerview:recyclerview:1.1.0'
    implementation 'androidx.cardview:cardview:1.0.0'
    implementation 'com.github.bumptech.glide:glide:4.13.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.13.0'
	implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
}

註意上述聲明，這裡添加了一個Glide庫的依賴。Glide是一個超級強大的圖片載入庫，它不僅可以用於載入本地圖片，還可以載入網路圖片、GIF圖片、甚至是本地視頻。

最重要的是，Glide的用法非常簡單，只需一行代碼就能輕鬆實現複雜的圖片載入功能，因此這裡我們準備用它來載入水果圖片。Glide的項目主頁地址是：https://github.com/bumptech/glide。

接下來開始具體的代碼實現，修改activity_main.xml中的代碼，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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">
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <androidx.appcompat.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"
            android:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
        <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/recycler_view"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/fab"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@drawable/ic_done"
        app:elevation="8dp"/>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
    <com.google.android.material.navigation.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/nav_view"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"/>
</androidx.drawerlayout.widget.DrawerLayout>

在CoordinatorLayout中添加了一個RecyclerView，給它指定一個id，然後將寬度和高度都設置為match_parent，這樣RecyclerView也就占滿了整個佈局的空間。接著定義一個實體類Fruit，代碼如下所示：

package com.zhouzhou.materialtest;

public class Fruit {
    private String name;
    private int imageId;

    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"?>
<androidx.cardview.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:layout_width="match_parent"
            android:layout_height="100dp"
            android:id="@+id/fruit_image"
            android:scaleType="centerCrop"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/fruit_name"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            android:textSize="16sp"/>
    </LinearLayout>
</androidx.cardview.widget.CardView>

這裡使用了CardView來作為子項的最外層佈局，從而使得RecyclerView中的每個元素都是在卡片當中的。CardView由於是一個FrameLayout，因此它沒有什麼方便的定位方式，這裡我們只好在CardView中再嵌套一個LinearLayout，然後在LinearLayout中放置具體的內容。

內容中，定義了一個ImageView用於顯示水果的圖片，又定義了一個TextView用於顯示水果的名稱，並讓TextView在水平方向上居中顯示。

註意：在ImageView中我們使用了一個scaleType屬性，這個屬性可以指定圖片的縮放模式。由於各張水果圖片的長寬比例可能都不一致，為了讓所有的圖片都能填充滿整個ImageView，這裡使用了centerCrop模式，它可以讓圖片保持原有比例填充滿ImageView，並將超出屏幕的部分裁剪掉。

接下來，需要為RecyclerView準備一個適配器，新建FruitAdapter類，讓這個適配器繼承自RecyclerView.Adapter，並將泛型指定為FruitAdapter.ViewHolder，代碼如下所示：

package com.zhouzhou.materialtest;

import android.annotation.SuppressLint;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.cardview.widget.CardView;
import androidx.recyclerview.widget.RecyclerView;

import com.bumptech.glide.Glide;

import java.util.List;

public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {
    private Context mContext;
    private List<Fruit> mFruitList;
    static class ViewHolder extends RecyclerView.ViewHolder{
        CardView cardView;
        ImageView fruitImage;
        TextView fruitName;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            cardView = (CardView) itemView;
            fruitImage = (ImageView) itemView.findViewById(R.id.fruit_image);
            fruitName = (TextView) itemView.findViewById(R.id.fruit_name);
        }
    }
    public FruitAdapter(List<Fruit> fruitList) {
        mFruitList = fruitList;
    }
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        if (mContext == null) {
            mContext = parent.getContext();
        }
        @SuppressLint("ResourceType") View view = LayoutInflater.from(mContext).inflate(R.layout.fruit_item,parent,false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Fruit fruit = mFruitList.get(position);
        holder.fruitName.setText(fruit.getName());
        Glide.with(mContext).load(fruit.getImageId()).into(holder.fruitImage);
    }

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

上述代碼，和第3章中編寫的FruitAdapter幾乎一樣。唯一需要註意的是，在onBindViewHolder()方法中我們使用了Glide來載入水果圖片。

Glide的用法實在是太簡單了。首先調用Glide.with()方法並傳入一個Context、Activity或Fragment參數，然後調用load()方法去載入圖片，可以是一個URL地址，也可以是一個本地路徑，或者是一個資源id，最後調用into()方法將圖片設置到具體某一個ImageView中就可以了。

那麼我們為什麼要使用Glide而不是傳統的設置圖片方式呢？

因為這次我從網上找的這些水果圖片像素都非常高，如果不進行壓縮就直接展示的話，很容易就會引起記憶體溢出。而使用Glide就完全不需要擔心這回事，因為Glide在內部做了許多非常複雜的邏輯操作，其中就包括了圖片壓縮，我們只需要安心按照Glide的標準用法去載入圖片就可以了。

這樣我們就將RecyclerView的適配器也準備好了，最後修改MainActivity中的代碼，如下所示：

package com.zhouzhou.materialtest;

import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.navigation.NavigationView;
import com.google.android.material.snackbar.Snackbar;

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

public class MainActivity extends AppCompatActivity {
    private DrawerLayout mDrawerLayout;
    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)};
    private List<Fruit> fruitList = new ArrayList<>();
    private FruitAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        FloatingActionButton fab = (F