應用程式通常需要在類似樣式的容器中顯示資料,例如
來保存清單中項目相關資訊的容器。系統提供
CardView
API,方便您
顯示在資訊卡中,在整個平台中保持一致的資訊。適用對象
例如資訊卡的預設高度高於其包含的檢視區塊群組,因此
系統會在它們下方繪製陰影。資訊卡是一種包含
並為容器提供一致的樣式
新增依附元件
CardView
小工具是 AndroidX 的一部分。若要在專案中使用,請將下列依附元件新增至應用程式模組的 build.gradle
檔案:
Groovy
dependencies { implementation "androidx.cardview:cardview:1.0.0" }
Kotlin
dependencies { implementation("androidx.cardview:cardview:1.0.0") }
建立資訊卡
如要使用 CardView
,請將其新增至版面配置檔案。使用做為檢視區塊群組,即可執行以下操作:
包含其他檢視畫面。在以下範例中,CardView
包含
ImageView
和幾個 TextViews
,可向使用者顯示部分資訊:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="16dp"
android:background="#E0F7FA"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:padding="4dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/header_image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="@drawable/logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/title"
style="@style/TextAppearance.MaterialComponents.Headline3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="I'm a title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/header_image" />
<TextView
android:id="@+id/subhead"
style="@style/TextAppearance.MaterialComponents.Subtitle2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="I'm a subhead"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/title" />
<TextView
android:id="@+id/body"
style="@style/TextAppearance.MaterialComponents.Body1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="I'm a supporting text. Very Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/subhead" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
上一個程式碼片段會產生類似以下的內容 (假設 使用相同的 Android 標誌圖片:
![顯示單一資訊卡的圖片](https://developer.android.google.cn/static/images/cards/card_basic_example.png?authuser=0000&hl=zh-tw)
本例中的資訊卡是以預設高度繪製在畫面上
會讓系統在其下方繪製陰影您可以提供自訂高度
屬性為 card_view:cardElevation
屬性的卡片。位於更高樓層的卡片
高度具有更明顯的陰影,而較低高度的資訊卡則具有
陰影CardView
在 Android 上使用實際高度和動態陰影
5.0 (API 級別 21) 以上版本。
請使用下列屬性自訂 CardView
小工具的外觀:
- 如要設定版面配置的圓角半徑,請使用
card_view:cardCornerRadius
屬性。 - 若要設定程式碼中的圓角半徑,請使用
CardView.setRadius
方法。 - 若要設定資訊卡的背景顏色,請使用
card_view:cardBackgroundColor
屬性。