使用資訊卡顯示圖片清單

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" />

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

使用資訊卡

但很難判斷圖片是否屬於圖片上方或下方的肯定字詞文字。若要解決這個問題，您可以使用「Card」(資訊卡) 檢視區塊。「Card」(資訊卡) 檢視區塊可讓您輕鬆納入一組檢視區塊，並為容器提供一致的樣式。若要進一步瞭解使用資訊卡的 Material Design (質感設計) 指南，請參閱這篇資訊卡指南。

在現有的 LinearLayout 四周新增 MaterialCardView。
再次將結構定義宣告從 LinearLayout 移到 MaterialCardView。
將 MaterialCardView 的 layout_width 設定為 match_parent，並將 layout_height 設定為 wrap_content。
新增 8dp 的 layout_margin。
移除 LinearLayout 中的邊框間距，以免有太多空白字元。
現在再次執行應用程式。您可以運用 MaterialCardView 明確分辨每個肯定字詞嗎？

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp">

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

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

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

    </LinearLayout>

</com.google.android.material.card.MaterialCardView>

變更應用程式佈景主題色彩

預設的應用程式佈景主題色彩可能不如您自己做的其他選擇。在這項工作中，您必須將應用程式佈景主題色彩變更為藍色。如此一來，您就可以使用自己的想法再次變更！

您可以從這個連結找到 Material Design 調色盤提供的預先定義不同層次的藍色。

在本程式碼研究室中，您將使用 Material Design 調色盤中的下列色彩：

blue_200: #FF90CAF9
blue_500: #FF2196F3
blue_700: #FF1976D2

新增色彩資源

集中定義應用程式內使用的色彩：colors.xml 檔案。

開啟 colors.xml (「Res」>「values」>「colors.xml」)。
針對以下定義的藍色，將新的色彩資源新增至檔案：

<color name="blue_200">#FF90CAF9</color>
<color name="blue_500">#FF2196F3</color>
<color name="blue_700">#FF1976D2</color>

變更佈景主題色彩

現在，您已擁有可用於主題的新色彩資源。

開啟 themes.xml (「Res」(解析度) >「Values」(設定值) >「themes」(佈景主題) >「themes.xml」)。
找到　　部分。
若要使用 @color/blue_500，請新增或變更 colorPrimary。
若要使用 @color/blue_700，請新增或變更 colorPrimaryVariant。

<item name="colorPrimary">@color/blue_500</item>
<item name="colorPrimaryVariant">@color/blue_700</item>

執行應用程式。應用程式列的色彩應該會變成藍色。

更新深色佈景主題色彩

建議您為應用程式的深色佈景主題選擇更飽和的色彩。

開啟深色佈景主題 themes.xml 檔案 (「themes」(佈景主題) >「themes.xml (night)」 (themes.xml (夜間))。
新增或變更 colorPrimary 和 colorPrimaryVariant 佈景主題屬性如下：

<item name="colorPrimary">@color/blue_200</item>
<item name="colorPrimaryVariant">@color/blue_500</item>

執行應用程式
在裝置的「設定」中，開啟「深色主題」。

淺色主題檢視區塊

深色主題檢視區塊

您的應用程式會切換為「深色主題」。請確認畫面類似以下螢幕截圖：

這時，您也可以移除 colors.xml 檔案中未使用的色彩 (例如預設應用程式主題中使用的紫色資源)。

變更應用程式圖示

最後一個步驟是更新應用程式圖示。

下載應用程式圖示檔案 ic_launcher_foreground.xml 和 ic_launcher_background.xml。如果瀏覽器只是顯示檔案，而並未下載，請選取「File」>「Save Page As...」，將檔案儲存到您的電腦。
在 Android Studio 中，刪除用於先前應用程式圖示的　drawable/ic_launcher_background.xml 和 drawable-v24/ic_launcher_foreground.xml 這兩個檔案。您可以取消勾選「Safe delete (with usage search)」(安全刪除 (使用搜尋功能)。
接著，用滑鼠右鍵依序點選「Res」>「drawable」資料夾，然後依序選取「New」>「Image Asset」。

在「Configure Image Asset」視窗中，確認已選取「Foreground Layer」。

在下方找出「Path」標籤。
按一下「Path」文字方塊內的資料夾圖示。
在電腦上尋找並開啟所下載的 ic_launcher_foreground.xml 檔案。

切換至「Background Layer」分頁。
按一下「Path」文字方塊中的「Browse」圖示。
在電腦上找出並開啟 ic_launcher_background.xml 檔案。不需要其他變更。
按一下「Next」。

在「Confirm Icon Path」對話方塊中，按一下「Finish」。還是可以覆寫現有圖示。
根據最佳做法，您可以將新的向量可繪項目 ic_launcher_foreground.xml 和 ic_launcher_background.xml，移至名為 drawable-anydpi-v26 的新資源目錄。自動調整圖示已在 API 26 中推出，因此這些資源只能在搭載 API 26 以上版本的裝置 (任何 dpi) 使用。
如果 drawable-v24 目錄沒有內容，則刪除。
執行應用程式，然後在應用程式導覽匣中看到精美的新應用程式圖示！