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 → 'nı inceleyin.

Uygulamaların genellikle verileri benzer stile sahip kapsayıcılarda görüntülemesi gerekir: bir listedeki öğelerle ilgili bilgileri barındıran kapsayıcılardır. Sistem, CardView API'yi kullanarak bilgileri, platform genelinde tutarlı bir görünüme sahip kartlarda gösterin. Örneğin, Örneğin, kartların bulunduğu görünüm grubunun üzerinde varsayılan bir yüksekliği vardır. sistem altlarında gölgeler çizer. Kartlar, yüksek riskli kullanıcıların görüntüleme sayısını artırırken kapsayıcı için tutarlı bir stil 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. Bunu şurada kullanmak için: aşağıdaki bağımlılığı uygulama modülünüzün build.gradle parametresine ekleyin dosya:

Eski

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. Şunlar için bir görünüm grubu olarak kullanın: başka görünümler içerme. Aşağıdaki örnekte, CardView bir Kullanıcıya bazı bilgiler göstermek için ImageView ve birkaç 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>

Önceki kod snippet'i aşağıdakine benzer bir şey üretir; örneğin, aynı Android logo resmini kullanmanız gerekir:

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, sistemin bunun altında bir gölge çizmesine neden olur. Özel bir yükseklik belirleyebilirsiniz card_view:cardElevation özelliğine sahip bir kart için. Daha yüksek değerde bir kart yükseklik daha fazla gölgeye, daha düşük yükseklikteki bir karta ise daha açık gölge. CardView, Android'de gerçek yükseklik ve dinamik gölgeler kullanır 5.0 (API düzeyi 21) ve sonraki sürümler.

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 kullanın özelliğini gönderin.
  • 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 kullanın özelliğini gönderin.