Spesso le app devono mostrare i dati in contenitori con stili simili, ad esempio
container contenenti informazioni sugli elementi di un elenco. Il sistema fornisce
l'API CardView
per consentirti
mostrare le informazioni nelle schede con un aspetto coerente in tutta la piattaforma. Per
Ad esempio, le schede hanno un'elevazione predefinita rispetto al gruppo di visualizzazioni contenitore, quindi
il sistema disegna delle ombre sotto di loro. Le schede offrono un modo per raggruppare
di visualizzazione, fornendo al contempo uno stile coerente per il contenitore.
Aggiungi le dipendenze
Il widget CardView
fa parte di AndroidX. Per utilizzarla in
del tuo progetto, aggiungi la seguente dipendenza all'elemento build.gradle
del modulo dell'app
file:
Trendy
dependencies { implementation "androidx.cardview:cardview:1.0.0" }
Kotlin
dependencies { implementation("androidx.cardview:cardview:1.0.0") }
Crea schede
Per utilizzare un elemento CardView
, aggiungilo al file di layout. Utilizzalo come gruppo di visualizzazioni per
contengono altre viste. Nell'esempio seguente, CardView
contiene una proprietà
ImageView
e alcuni TextViews
per mostrare alcune informazioni all'utente:
<?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>
Lo snippet di codice precedente produce qualcosa di simile al seguente, supponendo utilizzi la stessa immagine del logo Android:
![Un'immagine che mostra una singola scheda](https://developer.android.com/static/images/cards/card_basic_example.png?authuser=9&hl=it)
La scheda in questo esempio è disegnata sullo schermo con un'elevazione predefinita, che
fa sì che il sistema disegna un'ombra al di sotto. Puoi fornire un'elevazione personalizzata
per una carta con l'attributo card_view:cardElevation
. Una carta a un livello superiore
elevazione ha un'ombra più pronunciata, mentre una scheda a un'altitudine più bassa ha un
un'ombra più chiara. CardView
utilizza elevazione reale e ombre dinamiche su Android
5.0 (livello API 21) e versioni successive.
Utilizza queste proprietà per personalizzare l'aspetto del widget CardView
:
- Per impostare il raggio d'angolo nei layout, utilizza lo
card_view:cardCornerRadius
. - Per impostare il raggio d'angolo nel codice, utilizza il metodo
CardView.setRadius
. - Per impostare il colore di sfondo di una scheda, utilizza l'
card_view:cardBackgroundColor
.