Uygulamaların genellikle verileri, bir listedeki öğelerle ilgili bilgileri barındıran kapsayıcılar gibi benzer stile sahip kapsayıcılarda görüntülemesi gerekir. Sistem, bilgileri platform genelinde tutarlı bir şekilde görüntülenen kartlarda gösterebilmeniz için CardView
API'sini sağlar. Örneğin, kartların bulundukları görüntüleme grubunun üzerinde varsayılan bir yüksekliği vardır. Bu nedenle sistem, kartların altına gölgeler çizer. Kartlar hem bir grup görünümü ekleyebileceğiniz bir yöntem sağlarken hem de kapsayıcı için tutarlı bir stil sunar.
Bağımlılıkları ekleyin
CardView
widget'ı AndroidX'in bir parçasıdır. Projenizde kullanmak için uygulama modülünüzün build.gradle
dosyasına aşağıdaki bağımlılığı ekleyin:
Modern
dependencies { implementation "androidx.cardview:cardview:1.0.0" }
Kotlin
dependencies { implementation("androidx.cardview:cardview:1.0.0") }
Kart oluşturma
CardView
kullanmak için bunu düzen dosyanıza ekleyin. Diğer görünümleri eklemek için
bu görünümü bir görüntüleme grubu olarak kullanabilirsiniz. Aşağıdaki örnekte CardView
, kullanıcıya bazı bilgileri görüntülemek için bir ImageView
ve birkaç TextViews
içerir:
<?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>
Önceki kod snippet'i, aynı Android logo resmini kullandığınız varsayıldığında aşağıdakine benzer bir sonuç üretir:
Bu örnekteki kart, ekrana varsayılan bir yükseklikle çizilir. Bu durum, sistemin altına bir gölge çizmesine neden olur. card_view:cardElevation
özelliğiyle kart için özel bir yükseklik sağlayabilirsiniz. Yüksek yükseklikteki kartta daha belirgin bir gölge, daha düşük yükseklikteki kartta ise daha hafif bir gölge bulunur. CardView
, Android 5.0 (API düzeyi 21) ve sonraki sürümlerde gerçek yükseklik ve dinamik gölgeler kullanır.
CardView
widget'ının görünümünü özelleştirmek için şu özellikleri kullanın:
- Düzenlerinizde köşe yarıçapını ayarlamak için
card_view:cardCornerRadius
özelliğini kullanın. - Kodunuzda köşe yarıçapını ayarlamak için
CardView.setRadius
yöntemini kullanın. - Bir kartın arka plan rengini ayarlamak için
card_view:cardBackgroundColor
özelliğini kullanın.