Karta dayalı düzen oluşturma

"Oluştur" yöntemini deneyin
Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da düzenlerle nasıl çalışacağınızı öğrenin.
Materyal 3'teki kart →

Uygulamaların genellikle verileri, bir listedeki öğelerle ilgili bilgileri barındıran container'lar gibi benzer stile sahip kapsayıcılarda görüntülemesi gerekir. Sistem, bilgileri platform genelinde tutarlı bir görünüme sahip kartlarda göstermeniz için CardView API'yi sağlar. Örneğin, kartların bulunduğu görünüm grubunun üzerinde varsayılan bir yüksekliği olduğundan sistem, bunların altında gölgeler çizer. Kartlar bir görünüm grubu içermenin yolunu sunarken kapsayıcı için tutarlı bir stil de sağlar.

Kartlara dayalı bir uygulamanın kullanıcı arayüzüne bakışı gösteren resim
Şekil 1. Kartlara dayalı bir uygulama kullanıcı arayüzü.

Bağımlılıkları ekleme

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ştur

CardView kullanmak için bunu düzen dosyanıza ekleyin. Diğer görünümleri de içine almak için bunu bir görüntüleme grubu olarak kullanın. Aşağıdaki örnekte CardView, kullanıcıya bazı bilgilerin gösterilmesi 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ılarak aşağıdakine benzer bir içerik üretir:

Tek bir kartı gösteren resim
Şekil 2. CardView tabanlı düzene ilişkin temel bir örnek.

Bu örnekteki kart, ekrana varsayılan bir yükseklikle çizilmiştir. Bu yükseklik, sistemin resmin altına bir gölge çizmesine neden olur. card_view:cardElevation özelliğine sahip bir kart için özel yükseklik belirtebilirsiniz. Yüksek yükseklikteki kartların gölgesi daha güçlü, aşağıdaki yükseklikteki kartların gölgesi daha hafif olur. 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.