使用資訊卡顯示圖片清單

1. 事前準備

在先前的程式碼研究室中，您建立了 Affirmations 應用程式，該應用程式會列出 RecyclerView 中的文字清單。

在本後續程式碼研究室中，您將為應用程式的各個肯定字詞新增具啟發性的圖片。您會使用 Android 版 Material 元件程式庫中的 MaterialCardView 小工具，在資訊卡中顯示各個肯定字詞的文字和圖片。接著，只要建立精美的 UI，打造更流暢美觀的使用者體驗，就能製作出完整的應用程式。以下是已完成應用程式的螢幕截圖：

必要條件

可將圖片資源新增至應用程式。
熟悉修改 XML 版面配置。
可以在 RecyclerView 中建立顯示文字清單的應用程式。
可以為 RecyclerView 建立轉接器。

課程內容

如何將圖片新增至 RecyclerView 顯示的肯定字詞清單中。
如何在 RecyclerView 項目的版面配置中使用 MaterialCardView。
對 UI 進行視覺調整，讓應用程式看起來更精美。

建構項目

使用 RecyclerView 顯示資訊卡清單的精美 Affirmations 應用程式。每張資訊卡都包含圖片和肯定字詞文字。

軟硬體需求

已安裝 Android Studio 4.1 以上版本的電腦。
網際網路連線能力，可下載圖片檔。
先前「建立 Affirmations 應用程式」程式碼研究室中的 Affirmations 應用程式 (未提供範例程式碼，您必須先建立應用程式)。

2. 將圖片新增至清單項目

您目前建立了一個轉接器 ItemAdapter，可顯示 RecyclerView 中的肯定字詞字串。功能運作良好，但視覺上沒有吸引力。在這項工作中，您將修改清單項目的版面配置和轉接器程式碼，顯示包含肯定字詞的圖片。

下載圖片

若要開始使用，請在先前的程式碼研究室中，在 Android Studio 中開啟 Affirmations 應用程式專案。如果沒有這項專案，請按照上一個程式碼研究室中的步驟建立該專案，然後再返回本頁面。
接著，請將圖片檔下載到電腦。應用程式中應有十張圖片，每張各代表一個肯定字詞。檔案名稱應介於 image1.jpg 至 image10.jpg 之間。
將電腦中的圖片複製到 Android Studio 中專案的「res」(解析度) >「drawable」(可繪項目) 資料夾 (app/src/main/res/drawable)。將這些資源新增至應用程式後，您就能使用資源 ID (例如 R.drawable.image1)，從程式碼存取這些圖片 (您可能需要重新建立程式碼，才能讓 Android Studio 找到這個圖片)。

現在可以在應用程式中使用圖片了。

新增對 Affirmation (肯定字詞) 類別中圖片的支援

在這個步驟中，您將在 Affirmation 資料類別中新增屬性，用來保存圖片資源 ID 的值。這樣一來，單一 Affirmation 物件例項就會包含肯定字詞的文字資源 ID 和圖片資源 ID。

開啟 model 套件中的 Affirmation.kt 檔案。
新增命名為 imageResourceId 的參數 Int，即可修改 Affirmation 類別的建構函式。

使用資源註解

stringResourceId 和 imageResourceId 都是整數值。雖然看起來沒問題，但呼叫端可能會不小心以錯誤的順序傳入引數，即先傳入 imageResourceId，而不是 stringResourceId。

若要避免這種情況發生，您可以使用資源註解。註解相當實用，因為會新增至其他資訊至類別、方法或參數中。系統一律會使用 @ 符號宣告註解。在此情況下，請將 @StringRes 註解新增至字串資源 ID 屬性，並將 @DrawableRes 註解新增至可繪製資源 ID 屬性。如果提供的資源 ID 類型有誤，您會收到警告。

將 @StringRes 註解新增至 stringResourceId。
將 @DrawableRes 註解新增至 imageResourceId。
套件宣告完成後，確認匯入的 androidx.annotation.DrawableRes 和 androidx.annotation.StringRes　新增至檔案頂端。

Affirmation.kt

package com.example.affirmations.model

import androidx.annotation.DrawableRes
import androidx.annotation.StringRes

data class Affirmation(
   @StringRes val stringResourceId: Int,
   @DrawableRes val imageResourceId: Int
)

初始化內含圖片的肯定字詞清單

您已變更 Affirmation 類別的建構函式，因此必須更新 Datasource 類別。將圖片資源 ID 傳遞至每個初始化的 Affirmation 物件。

開啟 Datasource.kt。您應該會看到 Affirmation 的每個執行個體化錯誤。
請為每個 Affirmation 新增圖片的資源 ID 做為引數，例如 R.drawable.image1。

Datasource.kt

package com.example.affirmations.data

import com.example.affirmations.R
import com.example.affirmations.model.Affirmation

class Datasource() {

    fun loadAffirmations(): List<Affirmation> {
        return listOf<Affirmation>(
            Affirmation(R.string.affirmation1, R.drawable.image1),
            Affirmation(R.string.affirmation2, R.drawable.image2),
            Affirmation(R.string.affirmation3, R.drawable.image3),
            Affirmation(R.string.affirmation4, R.drawable.image4),
            Affirmation(R.string.affirmation5, R.drawable.image5),
            Affirmation(R.string.affirmation6, R.drawable.image6),
            Affirmation(R.string.affirmation7, R.drawable.image7),
            Affirmation(R.string.affirmation8, R.drawable.image8),
            Affirmation(R.string.affirmation9, R.drawable.image9),
            Affirmation(R.string.affirmation10, R.drawable.image10)
        )
    }
}

新增 ImageView 至清單項目版面配置

若要顯示這份清單中各項肯定字詞的圖片，您必須新增 ImageView 至項目版面配置。由於您現在有 TextView 和 ImageView 兩個檢視區塊，因此需要將這兩個檢視區塊放置為 ViewGroup 內的子項檢視區塊。若要排列垂直欄的檢視區塊，請使用 LinearLayout。LinearLayout 會在單一方向 (垂直或水平) 對齊所有子項檢視區塊。

依序開啟「res」(解析度) >「Layout」(版面配置) >「list_item.xml」。在現有 TextView 周圍新增 LinearLayout，並將 orientation 屬性設定為 vertical。
將 xmlns schema 宣告行從 TextView 元素移至 LinearLayout 元素，以避免錯誤。

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

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

</LinearLayout>

在 TextView, 之前的 LinearLayout, 內，新增資源 ID 為 item_image 的 ImageView。
將 ImageView 的寬度設定為 match_parent，高度設定為 194dp。視螢幕大小而定，這個值應會隨時在螢幕上顯示幾張資訊卡。
將 scaleType 設定為 centerCrop.
將 importantForAccessibility 屬性設定為 no，因為該圖片用於裝飾用途。

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="194dp"
        android:id="@+id/item_image"
        android:importantForAccessibility="no"
        android:scaleType="centerCrop" />

更新 ItemAdapter 以設定圖片

開啟 adapter/ItemAdapter.kt (「app」(應用程式) >「java」>「adapter」(轉接器) >「ItemAdapter」)
前往 ItemViewHolder 類別。
在清單項目版面配置中，ItemViewHolder 執行個體應保留對 TextView 的參照及對 ImageView 的參照。進行以下變更。

在 textView 屬性的初始化下方，新增名為 imageView 的 val。使用 findViewById() 找出對 ID 為 item_image 的 ImageView 的參照，並指派給 imageView 屬性。

ItemAdapter.kt

class ItemViewHolder(private val view: View): RecyclerView.ViewHolder(view) {
    val textView: TextView = view.findViewById(R.id.item_title)
    val imageView: ImageView = view.findViewById(R.id.item_image)
}

在 ItemAdapter 中找出 onBindViewHolder() 函式。
您先前在 ItemViewHolder 中的 textView 上設定肯定字詞的 stringResourceId。現在，請在清單項目檢視區塊的 ImageView 上設定肯定字詞項目的 imageResourceId。

    override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
        val item = dataset[position]
        holder.textView.text = context.resources.getString(item.stringResourceId)
        holder.imageView.setImageResource(item.imageResourceId)
    }

執行應用程式，然後捲動肯定字詞清單。

這個應用程式使圖片看起來更美觀簡潔！但您還是可以改良應用程式 UI。在下一節中，我們會微幅調整應用程式來改良 UI。

3. 製作精美的 UI

到目前為止，您已經建構出功能完備的應用程式，內含肯定字詞字串和圖片清單本節將說明如何微調程式碼與 XML，讓應用程式看起來更精美。

新增邊框間距

一開始，請先在清單中的項目之間新增空白字元。

開啟 item_list.xml (「App」>「Res」>「Layout」>「activity_main.xml」)，並將 16dp 邊框間距新增至現有的 LinearLayout。

list_item.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

將 16dp 邊框間距新增至 item_title TextView。
在 TextView 中，將 textAppearance 屬性設定為 ?attr/textAppearanceHeadline6。textAppearance 是可讓您定義文字專屬樣式的屬性。若要瞭解其他預先定義的文字外觀值，請參閱此常見主題屬性網誌文章中的「TextAppearances」章節。

    <TextView
        android:id="@+id/item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:textAppearance="?attr/textAppearanceHeadline6" />

執行應用程式。您覺得清單看起來更美觀嗎？