[Google Course] Android Basics in Kotlin(第7篇) — Display the image and text with MaterialCardView

10 min readMar 25, 2021

這次延續第6篇RecyclerView，要來介紹 MaterialCardView，一般來說我們可以將 ListItem 的單一項目 layout 直接改成LinearLayout，並加入文字及圖片來做單一項目的排版，那又為什麼要介紹 MaterialCardView？下圖我們可以看到兩者在UI上顯示的不同：

我們可以看到右圖加上MaterialCardView 後多了兩個明顯的特徵：
● 原本扁平的清單內容變成卡片式內容，將每個單一項目較為清楚的區分開來
● 卡片式內容自帶陰影增加立體感，清楚知道能夠點選

在UI上能夠讓我們製作的應用程式更加的符合使用者經驗，我們能夠做出在Android 系統上統一風格的應用程式，讓人一看就知道這是可以拖拉、點選的一個畫面設計

那我們就話不多說，直接上工了！！！我們在這篇文章會學到以下：

● 加入圖片到 list_item.xml
● MaterialCardView
● 關於 MaterialCardView

如果只想看MaterialCardView，不想加入圖片的話，可以直接跳到上面的連結，不會對學習MaterialCardView有影響唷！！！

為了怕有些人沒有看之前的文章，文章中會使用到的編譯環境與參考內容也在這邊列出給大家：
Kotlin 線上編譯環境
Android Studio 安裝
Google Course 的 Android Basics in Kotlin

[匯入圖片資源]

這次的文章會使用到Google Course 的圖片，大家可以到連結先下載喔！也可以自已準備十組圖片來使用～將準備好的十張圖片放到第6篇文章專案的
res->drawable 資料夾中

[修改 data model]

因為我們這次加入了圖片到我們的清單項目中，因此我們需要修改我們的資料模型，打開 model->Affirmation ，將原本只有一個參數的model ，改成兩個參數，並幫參數加入註釋來確保參數類型正確：

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

接著我們到Android Studio 導覽列 Build->Rebuild Project，看看程式有沒有問題，我們發現在DataSource 中的 Affirmation 都少了一個 imageResourceId參數，因為我們剛剛已經修改了Affirmation 類別：

現在我們就把圖片資源加入到DataSource：

[新增圖片到Layout中]

首先我們一樣先來設計單一項目的Layout ，打開 res->layout->list_item.xml
我們看到只有一個TextView，因為現在我的單一項目內容要另外加上圖片，因此我們加入一個LinearLayout，將圖片及文字放到同一個LinearLayout內：

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

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

</LinearLayout>

[更新ItemAdapter]

打開adapter->ItemAdapter ，在ItemAdapter 的建構子加入imageView：

val imageView: ImageView = view.findViewById(R.id.item_image)

第二步就是在 onBindViewHolder 同時也 更新imageView：

holder.imageView.imageView.setImageResource(item.imageResourceId)

現在可以執行程式看看成果了～～

[MaterialCardView]

接著就來到我們的重頭戲 MaterialCardView ，剛剛我們只是按照原本的方法先加入圖片，我們看到單一項目的邊緣和螢幕都連在一起了，我們要來加入MaterialCardView 看看效果如何，那要如何使用MaterialCardView？

他其實也是一個向LinearLayout一樣的UI元件，因此我們只需要把LinearLayout 用另一個 MaterialCardView 包裝起來就可以了！！

現在打開 res->layout->list_item.xml ，加入MaterialCardView：

<?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 
    x̵m̵l̵n̵s̵:̵a̵n̵d̵r̵o̵i̵d̵=̵"̵h̵t̵t̵p̵:̵/̵/̵s̵c̵h̵e̵m̵a̵s̵.̵a̵n̵d̵r̵o̵i̵d̵.̵c̵o̵m̵/̵a̵p̵k̵/̵r̵e̵s̵/̵a̵n̵d̵r̵o̵i̵d̵"̵
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

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

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

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

這邊注意到我們先將MaterialCardView 的 android:layout_margin=”8dp” 設定成 8dp，此時我們來執行看看畫面變如何吧！！！

這邊清單之所以會變成有明顯陰影是因為我們有設定MaterialCardView 的 android:layout_margin=”8dp” ，這會使得上下兩個單一清單項目較為分離，因此我們可以看到 MaterialCardView 的卡片式效果

[TroubleShooting]

如果你的Android Studio 是版本 4.0 以上，或是遇到畫面閃退或App無法編譯安裝，可以試著到 res > values > styles.xml 將 Theme.AppCompat.Light.DarkActionBar to Theme.MaterialComponents.Light.DarkActionBar，就可以順利執行囉！！！

現在可以花點時間來美化你的App了！！

[更多關於 MaterialCardView]

話說 MaterialCardView 的爸爸是 CardView，但是他比爸爸多了兩個屬性，除此之外，我們完全可以把他們當成同一種東西來使用，而這兩個屬性就是 strokeColor 和 strokeWidth

那要如何設定呢？我們可以打開 res->list_item.xml ，幫MaterialCardView加入兩個屬性：

app:strokeColor="#dedede"
app:strokeWidth="3dp"

因為這兩個屬性和我們原本使用的 android 分屬不一樣的檔案，所以我們要再引進一個引用空間：

xmlns:app="http://schemas.android.com/apk/res-auto"

可以看到我們的項目有了粗粗的邊框囉～～～

[Reference]

● Android Developers MaterialCardView
● MaterialDesign — Card

[QA]

● MaterialCardView的父類別是誰？和父類別有什麼差異？
● 要如何加入上述的差異屬性？

喜歡我的文章的人也記得幫我按個拍手、分享，覺得很不錯的可以幫我拍個50下！
也要快點追蹤我的 FB粉絲專頁 — 飛比尋常的程式設計世界 ，不會太頻繁出現在你的塗鴉牆騷擾你，好文章生產需要一點時間，有錯誤或想討論的都歡迎留言給我唷！那就下次見拉！