Tina Tang's Blog

在哪裡跌倒了，就在哪裡躺下來

0%

Android筆記(18)-使用Cards顯示圖像List

Posted on Edited on In , ,

使用 Android 版 Material 元件程式庫中的 MaterialCardView 小工具，在資訊卡(cards)中顯示各個肯定字詞的文字和圖片。

學習目標

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

將圖像新增至List項目

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

下載圖像

  1. 在 Android Studio 中開啟 Affirmations 應用程式專案。
  2. 接著，請將圖像檔下載到電腦上。應用程式中應有十張圖片，每張各代表一個肯定字詞。檔案名稱應介於 image1.jpg 至 image10.jpg 之間。
  3. 將電腦中的圖像複製到 Android Studio 中專案的「Res」(解析度) >「drawable」(可繪項目) 資料夾 (app/src/main/res/drawable)。將這些資源新增至應用程式後，您就能使用資源資源 ID (例如 R.drawable.image1)，從程式碼存取這些圖片 (您可能需要重新建立程式碼，才能讓 Android Studio 找到這個圖像)。

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

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

  1. 開啟 model 套件中的 Affirmation.kt 檔案。
  2. 新增命名為 imageResourceId 的參數 Int，即可修改 Affirmation 類別的建構函式。
1
2
data class Affirmation(val stringResourceId: Int, val imageResourceId: Int) {
}
使用資源註解

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

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

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

Affirmation.kt

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

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

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

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

Datasource.kt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 至List項目版面配置

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

  1. 依序開啟「Res」>「Layout」>「list_item.xml」。在現有 TextView 周圍新增 LinearLayout，並將 orientation 屬性設定為 vertical。
  2. 將 xmlns schema 宣告行從 TextView 元素移至 LinearLayout 元素，以避免錯誤。

list_item.xml

1
2
3
4
5
6
7
8
9
10
11
12
<?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>
  1. 在 TextView, 之前的 LinearLayout, 內，新增資源 ID 為 item_image 的 ImageView。
  2. 將 ImageView 的寬度設定為 match_parent，高度設定為 194dp。視螢幕大小而定，這個值應會隨時在螢幕上顯示幾張資訊卡(card)。
  3. 將 scaleType 設定為 centerCrop.
  4. 將 importantForAccessibility 屬性設定為 no，因為該圖像用於裝飾用途。
1
2
3
4
5
6
<ImageView
    android:layout_width="match_parent"
    android:layout_height="194dp"
    android:id="@+id/item_image"
    android:importantForAccessibility="no"
    android:scaleType="centerCrop" />

更新 ItemAdapter 以設定圖像

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

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

ItemAdapter.kt

1
2
3
4
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)
}
  1. 在 ItemAdapter 中找出 onBindViewHolder() 函式。
  2. 您先前在 ItemViewHolder 中的 textView 上設定肯定字詞的 stringResourceId。現在，請在List項目檢視畫面的 ImageView 上設定肯定字詞項目的 imageResourceId。
1
2
3
4
5
override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
        val item = dataset[position]
        holder.textView.text = context.resources.getString(item.stringResourceId)
        holder.imageView.setImageResource(item.imageResourceId)
    }
  1. 執行應用程式，然後捲動肯定字詞清單。

製作精美的使用者介面

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

新增邊框間距

一開始，請先在List中的項目(Item)之間新增空白字元。

提示： 您可以依照本節所述，在 XML 中調整版面配置，也可以按個人偏好，前往「Design」檢視畫面中的「Attributes」面板進行變更。

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

list_item.xml

1
2
3
4
5
<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">
  1. 將 16dp 邊框間距新增至 item_title TextView。
  2. 在 TextView 中，將 textAppearance 屬性設定為 ?attr/textAppearanceHeadline6。textAppearance 是可讓您定義文字專屬樣式的屬性。若要瞭解其他預先定義的文字外觀值，請參閱此常見主題屬性網誌文章中的「TextAppearances」章節。
1
2
3
4
5
6
<TextView
        android:id="@+id/item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:textAppearance="?attr/textAppearanceHeadline6" />
  1. 執行應用程式。

使用資訊卡(Card)

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

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

list_item.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?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 檔案。

  1. 開啟 colors.xml (「Res」>「values」>「colors.xml」)。
  2. 針對以下定義的藍色，將新的色彩資源新增至檔案：
1
2
3
<color name="blue_200">#FF90CAF9</color>
<color name="blue_500">#FF2196F3</color>
<color name="blue_700">#FF1976D2</color>
變更佈景主題色彩

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

  1. 開啟 themes.xml (「Res」(解析度) >「Values」(設定值) >「themes」(佈景主題) >「themes.xml」)。
  2. 找到　<!-- Primary brand color. -->　部分。
  3. 若要使用 @color/blue_500，請新增或變更 colorPrimary。
  4. 若要使用 @color/blue_700，請新增或變更 colorPrimaryVariant。
1
2
<item name="colorPrimary">@color/blue_500</item>
<item name="colorPrimaryVariant">@color/blue_700</item>
  1. 執行應用程式。應用程式列的色彩應該會變成藍色。
更新深色佈景主題色彩

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

  1. 開啟深色佈景主題 themes.xml (night) 檔案 (「themes」(佈景主題) >「themes.xml (night)」 (themes.xml (night))。
  2. 新增或變更 colorPrimary 和 colorPrimaryVariant 佈景主題屬性如下：
1
2
<item name="colorPrimary">@color/blue_200</item>
<item name="colorPrimaryVariant">@color/blue_500</item>
  1. 執行應用程式
  2. 在裝置的「設定」中，開啟「深色主題」。
  3. 您的應用程式會切換為「深色主題」。

注意： 應用程式列色彩。您可能不知道為什麼應用程式列無法指定的顯示深色佈景主題的主要色彩。深色應用程式列是依據設計。在深色主題中，應用程式列和其他大型區域會以深色背景 (colorSurface) 顯示，而非主要色彩。這是因為 Material 深色主題會建議在大型表面使用明亮色彩。按鈕或其他小型強調色會顯示定義的主要色彩。

變更應用程式圖示

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

  1. 下載應用程式圖示檔案 ic_launcher_foreground.xml 和 ic_launcher_background.xml。如果瀏覽器只是顯示檔案，而並未下載，請選取「File」>「Save Page As…」，將檔案儲存到您的電腦。
  2. 在 Android Studio 中，刪除用於先前應用程式圖示的　drawable/ic_launcher_background.xml 和 drawable-v24/ic_launcher_foreground.xml 這兩個檔案。您可以取消勾選「Safe delete (with usage search)」(安全刪除 (使用搜尋功能)。
  3. 接著，用滑鼠右鍵依序點選「Res」>「drawable」資料夾，然後依序選取「New」>「Image Asset」。
  4. 在「Configure Image Asset」視窗中，確認已選取「Foreground Layer」。
  1. 在下方找出「Path」標籤。
  2. 按一下「Path」文字方塊內的資料夾圖示。
  3. 在電腦上尋找並開啟所下載的 ic_launcher_foreground.xml 檔案。
  1. 切換至「Background Layer」分頁。
  2. 按一下「Path」文字方塊中的「Browse」圖示。
  3. 在電腦上找出並開啟 ic_launcher_background.xml 檔案。不需要其他變更。
    按一下「Next」。
  1. 在「Confirm Icon Path」對話方塊中，按一下「Finish」。
  2. 根據最佳做法，您可以將新的向量可繪項目 ic_launcher_foreground.xml 和 ic_launcher_background.xml，移至名為 drawable-anydpi-v26 的新資源目錄。自動調整圖示已在 API 26 中推出，因此這些資源只能在搭載 API 26 以上版本的裝置 (任何 dpi) 使用。
  3. 如果 drawable-v24 目錄沒有內容，則刪除。
  4. 執行應用程式，然後在應用程式導覽匣中看到精美的新應用程式圖示！

完成如下！